Skip to content

Commit

Permalink
Merge pull request #1128 from rust-lang/survey-2024
Browse files Browse the repository at this point in the history
Add a notification for the Rust 2023 survey
  • Loading branch information
shepmaster authored Dec 5, 2024
2 parents 0a6700b + c53f7a7 commit 647eaae
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 86 deletions.
66 changes: 7 additions & 59 deletions ui/frontend/Notifications.tsx
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
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
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
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',
}

0 comments on commit 647eaae

Please sign in to comment.