Skip to content

Commit 6051727

Browse files
xyzqmxyzqm
committed
fix a few hooks + add typing
1 parent cdcf43a commit 6051727

25 files changed

+108
-115
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ typings/
5757
# gatsby files
5858
.cache/
5959
public
60+
src/gatsby-types.d.ts
6061

6162
# Mac files
6263
.DS_Store

‎gatsby-config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -149,4 +149,5 @@ module.exports = {
149149
flags,
150150
siteMetadata,
151151
plugins,
152+
graphqlTypegen: true,
152153
};

‎graphql.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./.cache/typegen/graphql.config.json');

‎src/components/ContactUsSlideover/ContactUsSlideover.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react';
33
import { SECTION_LABELS } from '../../../content/ordering';
44
import MarkdownLayoutContext from '../../context/MarkdownLayoutContext';
55
import { useFirebaseUser } from '../../context/UserDataContext/UserDataContext';
6-
import { getUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
6+
import { useUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
77
import useContactFormAction from '../../hooks/useContactFormAction';
88
import useStickyState from '../../hooks/useStickyState';
99
import { ModuleInfo } from '../../models/module';
@@ -93,7 +93,7 @@ export default function ContactUsSlideover({
9393
const [showErrors, setShowErrors] = useState(false);
9494

9595
const markdownContext = useContext(MarkdownLayoutContext);
96-
const userLang = getUserLangSetting();
96+
const userLang = useUserLangSetting();
9797
const submitForm = useContactFormAction();
9898

9999
React.useEffect(() => {

‎src/components/Dashboard/Activity.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import * as React from 'react';
22
import CalendarHeatmap from 'react-calendar-heatmap';
33
import 'react-calendar-heatmap/dist/styles.css';
44
import {
5-
getUserProgressOnModulesActivity,
6-
getUserProgressOnProblemsActivity,
5+
useUserProgressOnModulesActivity,
6+
useUserProgressOnProblemsActivity,
77
} from '../../context/UserDataContext/properties/userProgress';
88
import './heatmap-styles.css';
99

10-
type ModuleActivity = ReturnType<typeof getUserProgressOnModulesActivity>[0];
11-
type ProblemActivity = ReturnType<typeof getUserProgressOnProblemsActivity>[0];
10+
type ModuleActivity = ReturnType<typeof useUserProgressOnModulesActivity>[0];
11+
type ProblemActivity = ReturnType<typeof useUserProgressOnProblemsActivity>[0];
1212

1313
export type ActivityHeatmapProps = {
1414
moduleActivities: { [key: number]: ModuleActivity[] };
@@ -88,8 +88,8 @@ export function ActivityHeatmap({
8888
}
8989

9090
export default function Activity() {
91-
const userProgressOnModulesActivity = getUserProgressOnModulesActivity();
92-
const userProgressOnProblemsActivity = getUserProgressOnProblemsActivity();
91+
const userProgressOnModulesActivity = useUserProgressOnModulesActivity();
92+
const userProgressOnProblemsActivity = useUserProgressOnProblemsActivity();
9393
const activityCount: { [key: number]: number } = {};
9494
const moduleActivities: { [key: number]: ModuleActivity[] } = {};
9595
const problemActivities: { [key: number]: ProblemActivity[] } = {};

‎src/components/Dashboard/ModuleLink.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import styled, { css } from 'styled-components';
44
import tw from 'twin.macro';
55
import {
66
LANGUAGE_LABELS,
7-
getUserLangSetting,
7+
useUserLangSetting,
88
} from '../../context/UserDataContext/properties/simpleProperties';
9-
import { getUserProgressOnModules } from '../../context/UserDataContext/properties/userProgress';
9+
import { useUserProgressOnModules } from '../../context/UserDataContext/properties/userProgress';
1010
import { ModuleLinkInfo } from '../../models/module';
1111
import { FrequencyLabels } from '../Frequency';
1212
import ModuleFrequencyDots from '../MarkdownLayout/ModuleFrequencyDots';
@@ -161,7 +161,7 @@ function timeAgoString(time: unknown): string {
161161
}
162162

163163
const ModuleLink = ({ link }: { link: ModuleLinkInfo }): JSX.Element => {
164-
const userProgressOnModules = getUserProgressOnModules();
164+
const userProgressOnModules = useUserProgressOnModules();
165165
const progress = userProgressOnModules[link.id] || 'Not Started';
166166

167167
let lineColorStyle = tw`bg-gray-200`;
@@ -195,7 +195,7 @@ const ModuleLink = ({ link }: { link: ModuleLinkInfo }): JSX.Element => {
195195
darkLineColorStyle = tw`bg-gray-800`;
196196
darkDotColorStyle = tw`bg-gray-800`;
197197
}
198-
const userLang = getUserLangSetting();
198+
const userLang = useUserLangSetting();
199199
const maxLangOc = Math.max(link.cppOc, link.javaOc, link.pyOc);
200200
const langToOc = {
201201
cpp: link.cppOc,

‎src/components/Editor/EditorTopNav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { activeFileAtom, saveFileAtom } from '../../atoms/editor';
66
import { useDarkMode } from '../../context/DarkModeContext';
77
import {
88
LANGUAGE_LABELS,
9-
getUserLangSetting,
109
useSetThemeSetting,
1110
useSetUserLangSetting,
11+
useUserLangSetting,
1212
} from '../../context/UserDataContext/properties/simpleProperties';
1313
import LogoSquare from '../LogoSquare';
1414
import { fetchFileContent } from './editorUtils';
@@ -17,7 +17,7 @@ export const EditorTopNav = (): JSX.Element => {
1717
const activeFile = useAtomValue(activeFileAtom);
1818
const saveFile = useSetAtom(saveFileAtom);
1919
const isDarkMode = useDarkMode();
20-
const userLang = getUserLangSetting();
20+
const userLang = useUserLangSetting();
2121
const setUserLang = useSetUserLangSetting();
2222
const setTheme = useSetThemeSetting();
2323

‎src/components/Groups/ProblemPage/ProblemSubmissionInterface.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useDropzone } from 'react-dropzone';
44
import { useFirebaseUser } from '../../../context/UserDataContext/UserDataContext';
55
import {
66
LANGUAGE_LABELS,
7-
getUserLangSetting,
7+
useUserLangSetting,
88
} from '../../../context/UserDataContext/properties/simpleProperties';
99
import { useActiveGroup } from '../../../hooks/groups/useActiveGroup';
1010
import {
@@ -36,7 +36,7 @@ export default function ProblemSubmissionInterface({
3636
problem: GroupProblemData;
3737
}) {
3838
const firebaseUser = useFirebaseUser();
39-
const lang = getUserLangSetting();
39+
const lang = useUserLangSetting();
4040
const emptySubmission: Partial<ProblemSubmissionRequestData> = {
4141
problemID: problem.id,
4242
sourceCode: '',

‎src/components/MarkdownLayout/MarkdownLayout.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ import { ContactUsSlideoverProvider } from '../../context/ContactUsSlideoverCont
1010
import MarkdownLayoutContext from '../../context/MarkdownLayoutContext';
1111
import { ProblemSolutionContext } from '../../context/ProblemSolutionContext';
1212
import { ProblemSuggestionModalProvider } from '../../context/ProblemSuggestionModalContext';
13-
import { getUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
13+
import { useUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
1414
import {
15-
getUserProgressOnModules,
1615
useSetProgressOnModule,
16+
useUserProgressOnModules,
1717
} from '../../context/UserDataContext/properties/userProgress';
1818
import { ModuleInfo } from '../../models/module';
1919
import { SolutionInfo } from '../../models/solution';
@@ -69,9 +69,9 @@ export default function MarkdownLayout({
6969
markdownData: ModuleInfo | SolutionInfo;
7070
children: React.ReactNode;
7171
}) {
72-
const userProgressOnModules = getUserProgressOnModules();
72+
const userProgressOnModules = useUserProgressOnModules();
7373
const setModuleProgress = useSetProgressOnModule();
74-
const lang = getUserLangSetting();
74+
const lang = useUserLangSetting();
7575

7676
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
7777
const moduleProgress =

‎src/components/MarkdownLayout/ModuleHeaders/ModuleHeaders.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ import { useMarkdownProblems } from '../../../context/MarkdownProblemListsContex
1414
import { ProblemSolutionContext } from '../../../context/ProblemSolutionContext';
1515
import {
1616
LANGUAGE_LABELS,
17-
getUserLangSetting,
1817
useSetUserLangSetting,
18+
useUserLangSetting,
1919
} from '../../../context/UserDataContext/properties/simpleProperties';
2020
import { ModuleInfo, ModuleLinkInfo } from '../../../models/module';
21-
import { getProblemsProgressInfo } from '../../../utils/getProgressInfo';
21+
import { useProblemsProgressInfo } from '../../../utils/getProgressInfo';
2222
import { DashboardProgressSmall } from '../../Dashboard/DashboardProgress';
2323
import { Frequency } from '../../Frequency';
2424
import MarkCompleteButton from '../MarkCompleteButton';
@@ -35,7 +35,7 @@ export default function ModuleHeaders({
3535
handleCompletionChange,
3636
} = useContext(MarkdownLayoutContext);
3737

38-
const lang = getUserLangSetting();
38+
const lang = useUserLangSetting();
3939
const setLang = useSetUserLangSetting();
4040
let problemIDs = [] as string[];
4141
// this is for modules
@@ -47,7 +47,7 @@ export default function ModuleHeaders({
4747
} catch (e) {
4848
console.log(e);
4949
}
50-
const problemsProgressInfo = getProblemsProgressInfo(problemIDs);
50+
const problemsProgressInfo = useProblemsProgressInfo(problemIDs);
5151

5252
// this is for solutions
5353
const problemSolutionContext = useContext(ProblemSolutionContext);

‎src/components/MarkdownLayout/SidebarNav/ItemLink.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useContext } from 'react';
44
import styled from 'styled-components';
55
import tw, { TwStyle } from 'twin.macro';
66
import MarkdownLayoutContext from '../../../context/MarkdownLayoutContext';
7-
import { getUserProgressOnModules } from '../../../context/UserDataContext/properties/userProgress';
7+
import { useUserProgressOnModules } from '../../../context/UserDataContext/properties/userProgress';
88
import {
99
MarkdownLayoutSidebarModuleLinkInfo,
1010
ModuleLinkInfo,
@@ -120,7 +120,7 @@ const ItemLink = ({
120120
}
121121
}, [isActive]);
122122

123-
const userProgressOnModules = getUserProgressOnModules();
123+
const userProgressOnModules = useUserProgressOnModules();
124124
const progress = userProgressOnModules[link.id] || 'Not Started';
125125

126126
let lineColorStyle = tw`bg-gray-200`;

‎src/components/ProblemSolutions.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useFirebaseUser } from '../context/UserDataContext/UserDataContext';
88
import { useUserPermissions } from '../context/UserDataContext/UserPermissionsContext';
99
import {
1010
LANGUAGE_LABELS,
11-
getUserLangSetting,
11+
useUserLangSetting,
1212
} from '../context/UserDataContext/properties/simpleProperties';
1313
import useUserProblemSolutionActions from '../hooks/useUserProblemSolutionActions';
1414
import useUserSolutionsForProblem from '../hooks/useUserSolutionsForProblem';
@@ -27,7 +27,7 @@ export default function ProblemSolutions({
2727
const { deleteSolution, upvoteSolution, undoUpvoteSolution, mutateSolution } =
2828
useUserProblemSolutionActions();
2929
const firebaseUser = useFirebaseUser();
30-
const lang = getUserLangSetting();
30+
const lang = useUserLangSetting();
3131
const [isContactUsActive, setIsContactUsActive] = useState(false);
3232
const { signIn } = React.useContext(SignInContext);
3333
const canModerate = useUserPermissions().canModerate;

‎src/components/Settings/Language.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as React from 'react';
22
import {
33
LANGUAGE_LABELS,
4-
getUserLangSetting,
54
useSetUserLangSetting,
5+
useUserLangSetting,
66
} from '../../context/UserDataContext/properties/simpleProperties';
77
import RadioList from '../elements/RadioList';
88

99
export default function Language() {
10-
const lang = getUserLangSetting();
10+
const lang = useUserLangSetting();
1111
const setLang = useSetUserLangSetting();
1212

1313
return (

‎src/components/markdown/LanguageSection.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import * as React from 'react';
22
import {
33
LANGUAGE_LABELS,
44
Language,
5-
getUserLangSetting,
5+
useUserLangSetting,
66
} from '../../context/UserDataContext/properties/simpleProperties';
77
import Danger from './Danger';
88

9-
const sectionFromLang = (sections: { [key in Language]?: React.ReactNode }) => {
10-
const userLang = getUserLangSetting();
9+
const useSectionFromLang = (sections: {
10+
[key in Language]?: React.ReactNode;
11+
}) => {
12+
const userLang = useUserLangSetting();
1113
if (userLang === 'showAll') {
1214
return (
1315
<>
@@ -78,13 +80,13 @@ export const LanguageSection = (props: {
7880
const type = (child as any).type.name as keyof typeof typeToLang;
7981
sections[typeToLang[type]] = child;
8082
});
81-
return sectionFromLang(sections);
83+
return useSectionFromLang(sections);
8284
};
8385

8486
export const CPPOnly = (props: {
8587
children?: React.ReactNode;
8688
}): React.ReactNode => {
87-
return sectionFromLang({
89+
return useSectionFromLang({
8890
cpp: props.children,
8991
java: <></>,
9092
py: <></>,
@@ -93,7 +95,7 @@ export const CPPOnly = (props: {
9395
export const JavaOnly = (props: {
9496
children?: React.ReactNode;
9597
}): React.ReactNode => {
96-
return sectionFromLang({
98+
return useSectionFromLang({
9799
cpp: <></>,
98100
java: props.children,
99101
py: <></>,
@@ -103,7 +105,7 @@ export const JavaOnly = (props: {
103105
export const PyOnly = (props: {
104106
children?: React.ReactNode;
105107
}): React.ReactNode => {
106-
return sectionFromLang({
108+
return useSectionFromLang({
107109
cpp: <></>,
108110
java: <></>,
109111
py: props.children,

‎src/components/markdown/ProblemsList/ProblemStatusCheckbox.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import ConfettiContext from '../../../context/ConfettiContext';
77
import { useDarkMode } from '../../../context/DarkModeContext';
88
import MarkdownLayoutContext from '../../../context/MarkdownLayoutContext';
99
import {
10-
getUserProgressOnModules,
11-
getUserProgressOnProblems,
1210
useSetProgressOnModule,
1311
useSetProgressOnProblem,
12+
useUserProgressOnModules,
13+
useUserProgressOnProblems,
1414
} from '../../../context/UserDataContext/properties/userProgress';
1515
import {
1616
PROBLEM_PROGRESS_OPTIONS,
@@ -146,9 +146,9 @@ export default function ProblemStatusCheckbox({
146146
}): JSX.Element {
147147
const darkMode = useDarkMode();
148148
const markdownLayoutContext = useContext(MarkdownLayoutContext);
149-
const userProgressOnModules = getUserProgressOnModules();
149+
const userProgressOnModules = useUserProgressOnModules();
150150
const setModuleProgress = useSetProgressOnModule();
151-
const userProgressOnProblems = getUserProgressOnProblems();
151+
const userProgressOnProblems = useUserProgressOnProblems();
152152
const setUserProgressOnProblems = useSetProgressOnProblem();
153153
const updateModuleProgressToPracticing = () => {
154154
if (

‎src/components/markdown/ResourceStatusCheckbox.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import ConfettiContext from '../../context/ConfettiContext';
77
import { useDarkMode } from '../../context/DarkModeContext';
88
import MarkdownLayoutContext from '../../context/MarkdownLayoutContext';
99
import {
10-
getUserProgressOnModules,
11-
getUserProgressOnResources,
1210
replaceIllegalFirebaseCharacters,
1311
useSetProgressOnModule,
1412
useSetProgressOnResource,
13+
useUserProgressOnModules,
14+
useUserProgressOnResources,
1515
} from '../../context/UserDataContext/properties/userProgress';
1616
import {
1717
ResourceInfo,
@@ -148,9 +148,9 @@ export default function ResourcestatusCheckbox({
148148
}): JSX.Element {
149149
const darkMode = useDarkMode();
150150
const markdownLayoutContext = useContext(MarkdownLayoutContext);
151-
const userProgressOnModules = getUserProgressOnModules();
151+
const userProgressOnModules = useUserProgressOnModules();
152152
const setModuleProgress = useSetProgressOnModule();
153-
const userProgressOnResources = getUserProgressOnResources();
153+
const userProgressOnResources = useUserProgressOnResources();
154154
const setUserProgressOnResources = useSetProgressOnResource();
155155
const updateResourceProgressToPracticing = () => {
156156
if (

‎src/components/markdown/ResourcesList.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { getUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
2+
import { useUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
33
import { ResourceInfo } from '../../models/resource';
44
import { books } from '../../utils/books';
55
import PGS from './PGS';
@@ -94,7 +94,7 @@ export function Resource({
9494
title?: string;
9595
children?: React.ReactNode;
9696
}): JSX.Element {
97-
const lang = getUserLangSetting();
97+
const lang = useUserLangSetting();
9898
source = source ?? '';
9999
sourceDescription = sourceDescription ?? '';
100100
if (source in books) {

‎src/components/markdown/ResourcesListItem.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
55
import { Instance } from 'tippy.js';
66
import tw from 'twin.macro';
77
import { useDarkMode } from '../../context/DarkModeContext';
8-
import { getUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
8+
import { useUserLangSetting } from '../../context/UserDataContext/properties/simpleProperties';
99
import { ResourceInfo } from '../../models/resource';
1010
import TextTooltip from '../Tooltip/TextTooltip';
1111
import Tooltip from '../Tooltip/Tooltip';
@@ -37,7 +37,7 @@ export default function ResourcesListItem({
3737
}: {
3838
resource: ResourceInfo;
3939
}): JSX.Element {
40-
const userLang = getUserLangSetting();
40+
const userLang = useUserLangSetting();
4141
const darkMode = useDarkMode();
4242
const [isActive, setIsActive] = React.useState(false);
4343
const id = `resource-${encodeURIComponent(resource.url)}`;

‎src/context/UserDataContext/properties/simpleProperties.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const LANGUAGE_LABELS: { [key in Language | 'unknown']: string } = {
6767

6868
// Note: User Lang is synchronized with a URL query parameter
6969
// the logic to handle this synchronization is in UserDataContext.tsx
70-
export const getUserLangSetting = createUserDataGetter(
70+
export const useUserLangSetting = createUserDataGetter(
7171
userData => userData.lang
7272
);
7373
export const useSetUserLangSetting = createSimpleUserDataMutation(

0 commit comments

Comments
 (0)