Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a notification for the Rust 2023 survey #1128

Merged
merged 2 commits into from
Dec 5, 2024
Merged

Add a notification for the Rust 2023 survey #1128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29f6156
Remove the notification for dark mode
shepmaster Dec 2, 2024
c53f7a7
Add a notification for the Rust 2023 survey
shepmaster Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 7 additions & 59 deletions ui/frontend/Notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,88 +3,36 @@ import { Portal } from 'react-portal';

import { Close } from './Icon';
import { useAppDispatch, useAppSelector } from './hooks';
import { swapTheme } from './reducers/configuration';
import { seenDarkMode, seenRustSurvey2023 } from './reducers/notifications';
import { seenRustSurvey2024 } from './reducers/notifications';
import { allowLongRun, wsExecuteKillCurrent } from './reducers/output/execute';
import * as selectors from './selectors';
import { Theme } from './types';

import * as styles from './Notifications.module.css';

const SURVEY_URL = 'https://blog.rust-lang.org/2023/12/18/survey-launch.html';
const SURVEY_URL = 'https://blog.rust-lang.org/2024/12/05/annual-survey-2024-launch.html';

const Notifications: React.FC = () => {
return (
<Portal>
<div className={styles.container}>
<DarkModeNotification />
<RustSurvey2023Notification />
<RustSurvey2024Notification />
<ExcessiveExecutionNotification />
</div>
</Portal>
);
};

const DarkModeNotification: React.FC = () => {
const showIt = useAppSelector(selectors.showDarkModeSelector);
const RustSurvey2024Notification: React.FC = () => {
const showIt = useAppSelector(selectors.showRustSurvey2024Selector);

const dispatch = useAppDispatch();
const seenIt = useCallback(() => dispatch(seenDarkMode()), [dispatch]);
const swapToLight = useCallback(() => dispatch(swapTheme(Theme.Light)), [dispatch]);
const swapToDark = useCallback(() => dispatch(swapTheme(Theme.Dark)), [dispatch]);
const swapToSystem = useCallback(() => dispatch(swapTheme(Theme.System)), [dispatch]);

return showIt ? (
<Notification onClose={seenIt}>
<p>The playground now has a dark mode! Sample the themes here:</p>

<table>
<tr>
<th>
<button className={styles.swapTheme} onClick={swapToSystem}>
System
</button>
</th>
<td>Use your system&apos;s preference</td>
</tr>

<tr>
<th>
<button className={styles.swapTheme} onClick={swapToLight}>
Light
</button>
</th>
<td>The classic playground style</td>
</tr>

<tr>
<th>
<button className={styles.swapTheme} onClick={swapToDark}>
Dark
</button>
</th>
<td>Reduce the number of photons hitting your eyeballs</td>
</tr>
</table>

<p>
You can change the current UI theme (and the editor&apos;s theme) in the configuration menu.
</p>
</Notification>
) : null;
};

const RustSurvey2023Notification: React.FC = () => {
const showIt = useAppSelector(selectors.showRustSurvey2023Selector);

const dispatch = useAppDispatch();
const seenIt = useCallback(() => dispatch(seenRustSurvey2023()), [dispatch]);
const seenIt = useCallback(() => dispatch(seenRustSurvey2024()), [dispatch]);

return showIt ? (
<Notification onClose={seenIt}>
Please help us take a look at who the Rust community is composed of, how the Rust project is
doing, and how we can improve the Rust programming experience by completing the{' '}
<a href={SURVEY_URL}>2023 State of Rust Survey</a>. Whether or not you use Rust today, we want
<a href={SURVEY_URL}>2024 State of Rust Survey</a>. Whether or not you use Rust today, we want
to know your opinions.
</Notification>
) : null;
Expand Down
21 changes: 9 additions & 12 deletions ui/frontend/reducers/notifications.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ interface State {
seenRustSurvey2021: boolean; // expired
seenMonacoEditorAvailable: boolean; // expired
seenRustSurvey2022: boolean; // expired
seenRustSurvey2023: boolean;
seenDarkMode: boolean;
seenRustSurvey2023: boolean; // expired
seenDarkMode: boolean; // expired
seenRustSurvey2024: boolean;
}

const initialState: State = {
Expand All @@ -22,8 +23,9 @@ const initialState: State = {
seenRustSurvey2021: true,
seenMonacoEditorAvailable: true,
seenRustSurvey2022: true,
seenRustSurvey2023: false,
seenDarkMode: false,
seenRustSurvey2023: true,
seenDarkMode: true,
seenRustSurvey2024: false,
};

const slice = createSlice({
Expand All @@ -32,12 +34,8 @@ const slice = createSlice({
reducers: {
notificationSeen: (state, action: PayloadAction<Notification>) => {
switch (action.payload) {
case Notification.DarkMode: {
state.seenDarkMode = true;
break;
}
case Notification.RustSurvey2023: {
state.seenRustSurvey2023 = true;
case Notification.RustSurvey2024: {
state.seenRustSurvey2024 = true;
break;
}
}
Expand All @@ -47,7 +45,6 @@ const slice = createSlice({

const { notificationSeen } = slice.actions;

export const seenDarkMode = () => notificationSeen(Notification.DarkMode);
export const seenRustSurvey2023 = () => notificationSeen(Notification.RustSurvey2023);
export const seenRustSurvey2024 = () => notificationSeen(Notification.RustSurvey2024);

export default slice.reducer;
18 changes: 5 additions & 13 deletions ui/frontend/selectors/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,23 +360,15 @@ const notificationsSelector = (state: State) => state.notifications;

const NOW = new Date();

const DARK_MODE_END = new Date('2024-10-15T00:00:00Z');
const DARK_MODE_OPEN = NOW <= DARK_MODE_END;
export const showDarkModeSelector = createSelector(
const RUST_SURVEY_2024_END = new Date('2024-12-23T00:00:00Z');
const RUST_SURVEY_2024_OPEN = NOW <= RUST_SURVEY_2024_END;
export const showRustSurvey2024Selector = createSelector(
notificationsSelector,
notifications => DARK_MODE_OPEN && !notifications.seenDarkMode,
);

const RUST_SURVEY_2023_END = new Date('2024-01-15T00:00:00Z');
const RUST_SURVEY_2023_OPEN = NOW <= RUST_SURVEY_2023_END;
export const showRustSurvey2023Selector = createSelector(
notificationsSelector,
notifications => RUST_SURVEY_2023_OPEN && !notifications.seenRustSurvey2023,
notifications => RUST_SURVEY_2024_OPEN && !notifications.seenRustSurvey2024,
);

export const anyNotificationsToShowSelector = createSelector(
showDarkModeSelector,
showRustSurvey2023Selector,
showRustSurvey2024Selector,
excessiveExecutionSelector,
(...allNotifications) => allNotifications.some(n => n),
);
Expand Down
3 changes: 1 addition & 2 deletions ui/frontend/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,5 @@ export enum Focus {
}

export enum Notification {
DarkMode = 'dark-mode',
RustSurvey2023 = 'rust-survey-2023',
RustSurvey2024 = 'rust-survey-2024',
}
Loading