Use typed graphql queries everywhere, clean up dead code

.eslintrc

@@ -13,7 +13,7 @@
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn",
       "no-unused-expressions": "off",
-      "lernfair-app-linter/typed-gql": "warn",
+      "lernfair-app-linter/typed-gql": "error",
       "unused-imports/no-unused-imports": "warn"
     }
   }

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "devDependencies": {
         "@apollo/client": "^3.6.9",
-        "@babel/core": "^7.16.0",
+        "@babel/core": "7.24.3",
         "@datadog/browser-rum": "https://gitpkg.vercel.app/corona-school/browser-sdk/packages/rum?v4.49-lern-fair-packages",
         "@datadog/datadog-ci": "^2.18.0",
         "@graphql-codegen/cli": "2.15.0",
@@ -33,7 +33,7 @@
         "babel-plugin-named-asset-import": "^0.3.8",
         "babel-preset-react-app": "^10.0.1",
         "bfj": "^7.0.2",
-        "browserslist": "^4.18.1",
+        "browserslist": "^4.23.0",
         "camelcase": "^6.2.1",
         "case-sensitive-paths-webpack-plugin": "^2.4.0",
         "concurrently": "^7.6.0",

src/components/ZoomMeeting.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line lernfair-app-linter/typed-gql
-import { gql } from '../../src/gql';
+import { gql } from '../gql';
 import { ZoomMtg } from '@zoomus/websdk';
 import { useParams } from 'react-router-dom';
 import CenterLoadingSpinner from './CenterLoadingSpinner';

src/hooks/useLastTimeCheckedNotifications.ts

@@ -1,18 +1,19 @@
-import { gql, useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { useEffect, useState } from 'react';
+import { gql } from '../gql';
 
-const getLastTimeCheckedQuery = gql`
+const getLastTimeCheckedQuery = gql(`
     query GetLastTimeCheckedNotifications {
         me {
             lastTimeCheckedNotifications
         }
     }
-`;
-const meLastTimeCheckedNotifications = gql`
+`);
+const meLastTimeCheckedNotifications = gql(`
     mutation updateMeLastTime($lastTimeCheckedNotifications: DateTime) {
         meUpdate(update: { lastTimeCheckedNotifications: $lastTimeCheckedNotifications })
     }
-`;
+`);
 
 export const useLastTimeCheckedNotifications = () => {
     const [lastTimeCheckedNotifications, setLastTimeCheckedNotifications] = useState('');

src/hooks/useNotificationPreferences.ts

@@ -1,20 +1,21 @@
-import { gql, useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { useEffect, useState } from 'react';
 import { NotificationPreferences } from '../types/lernfair/NotificationPreferences';
+import { gql } from '../gql';
 
-const notificationPreferencesQuery = gql`
+const notificationPreferencesQuery = gql(`
     query GetNotificationPreferences {
         me {
             notificationPreferences
         }
     }
-`;
+`);
 
-const notificationPreferencesMutation = gql`
+const notificationPreferencesMutation = gql(`
     mutation changeMeNotificationPref($preferences: PreferencesInput!) {
         meUpdate(update: { notificationPreferences: $preferences })
     }
-`;
+`);
 
 const useUserPreferences = () => {
     const [userPreferences, setUserPreferencesPrivate] = useState<NotificationPreferences>({});

src/pages/change-setting/ChangeSettingLanguage.tsx

@@ -1,4 +1,5 @@
-import { gql, useMutation, useQuery } from '@apollo/client';
+import { gql } from '../../gql';
+import { useMutation, useQuery } from '@apollo/client';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import { Button, Text, Heading, useTheme, VStack, Row, Column, useBreakpointValue } from 'native-base';
 import { useEffect, useState } from 'react';
@@ -13,35 +14,31 @@ import AlertMessage from '../../widgets/AlertMessage';
 import IconTagList from '../../widgets/IconTagList';
 import ProfileSettingItem from '../../widgets/ProfileSettingItem';
 import ProfileSettingRow from '../../widgets/ProfileSettingRow';
+import { StudentLanguage } from '../../gql/graphql';
 
-const queryStudent = gql`
+const query = gql(`
     query GetStudentLanguages {
         me {
             student {
                 languages
             }
-        }
-    }
-`;
-const queryPupil = gql`
-    query GetPupilLanguages {
-        me {
             pupil {
                 languages
             }
         }
     }
-`;
-const mutStudent = gql`
+`);
+
+const mutStudent = gql(`
     mutation updateLanguageStudent($languages: [StudentLanguage!]) {
         meUpdate(update: { student: { languages: $languages } })
     }
-`;
-const mutPupil = gql`
+`);
+const mutPupil = gql(`
     mutation updateLanguagePupil($languages: [Language!]) {
         meUpdate(update: { pupil: { languages: $languages } })
     }
-`;
+`);
 
 type Props = {};
 
@@ -52,19 +49,19 @@ const ChangeSettingLanguage: React.FC<Props> = () => {
     const [selections, setSelections] = useState<string[]>([]);
 
     const [showError, setShowError] = useState<boolean>();
-    const userType = useUserType();
+    const userType = useUserType() as 'pupil' | 'student';
 
     const navigate = useNavigate();
 
-    const { data, loading } = useQuery(userType === 'student' ? queryStudent : queryPupil, {
+    const { data, loading } = useQuery(query, {
         fetchPolicy: 'no-cache',
     });
 
     const [updateLanguage, _updateLanguage] = useMutation(userType === 'student' ? mutStudent : mutPupil);
 
     useEffect(() => {
-        if (data?.me[userType || 'pupil'] && data?.me[userType || 'pupil'].languages) {
-            setSelections(data?.me[userType || 'pupil'].languages);
+        if (data?.me[userType || 'pupil'] && data?.me[userType || 'pupil']?.languages) {
+            setSelections(data?.me[userType || 'pupil']?.languages ?? []);
         }
     }, [data?.me, userType]);
 
@@ -164,7 +161,7 @@ const ChangeSettingLanguage: React.FC<Props> = () => {
                     width={ButtonContainer}
                     onPress={() => {
                         //language keys are lowercase in frontend; on backend the first letter is capitalized
-                        updateLanguage({ variables: { languages: selections } });
+                        updateLanguage({ variables: { languages: selections as StudentLanguage[] } });
                     }}
                 >
                     {t('saveSelection')}

src/pages/change-setting/ChangeSettingSchoolClass.tsx

@@ -1,9 +1,10 @@
-import { gql, useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
+import { gql } from '../../gql';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import { Button, Heading, useTheme, VStack, Row, Column, useBreakpointValue } from 'native-base';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import CenterLoadingSpinner from '../../components/CenterLoadingSpinner';
 import NotificationAlert from '../../components/notifications/NotificationAlert';
 
@@ -17,18 +18,12 @@ type Props = {};
 
 const ChangeSettingSchoolClass: React.FC<Props> = () => {
     const { space, sizes } = useTheme();
-
     const { t } = useTranslation();
-
-    const location = useLocation();
-    const { state } = location as { state: { userType: string } };
-
     const [showError, setShowError] = useState<boolean>();
-
     const navigate = useNavigate();
 
     const { data, loading } = useQuery(
-        gql`
+        gql(`
             query GetPupilSchool {
                 me {
                     pupil {
@@ -37,32 +32,22 @@ const ChangeSettingSchoolClass: React.FC<Props> = () => {
                     }
                 }
             }
-        `,
+        `),
         {
             fetchPolicy: 'no-cache',
         }
     );
 
-    const [updateSchoolGrade, _updateSchoolGrade] = useMutation(gql`
+    const [updateSchoolGrade, _updateSchoolGrade] = useMutation(
+        gql(`
         mutation updateSchoolGradePupil($grade: Int!) {
             meUpdate(update: { pupil: { gradeAsInt: $grade } })
         }
-    `);
+    `)
+    );
 
     const schoolGrades = useMemo(() => {
         return new Array(13).fill(0).map((_, i) => i + 1);
-
-        // if (!data?.me?.pupil?.schooltype) {
-        //   return new Array(8).fill(0).map((_, i) => i + 5)
-        // }
-
-        // if (data?.me?.pupil?.schooltype === 'grundschule') {
-        //   return new Array(4).fill(0).map((_, i) => i + 1)
-        // } else if (data?.me?.pupil?.schooltype === 'gymnasium') {
-        //   return new Array(8).fill(0).map((_, i) => i + 5)
-        // } else {
-        //   return new Array(6).fill(0).map((_, i) => i + 5)
-        // }
     }, []);
 
     const [selectedGrade, setSelectedGrade] = useState<number>(1);
@@ -75,7 +60,6 @@ const ChangeSettingSchoolClass: React.FC<Props> = () => {
 
     useEffect(() => {
         if (_updateSchoolGrade.data && !_updateSchoolGrade.error) {
-            // setUserSettingChanged(true)
             navigate('/profile', { state: { showSuccessfulChangeAlert: true } });
         }
     }, [_updateSchoolGrade.data, _updateSchoolGrade.error, navigate]);
@@ -145,49 +129,11 @@ const ChangeSettingSchoolClass: React.FC<Props> = () => {
                                         )
                                 )}
                             </Row>
-                            {/* {selections.includes('Andere') && (
-                <Row>
-                  <FormControl>
-                    <Stack>
-                      <FormControl.Label>
-                        <Text bold>
-                          {t('profile.SchoolClass.single.optional.label')}
-                        </Text>
-                      </FormControl.Label>
-                      <Input
-                        type="text"
-                        multiline
-                        numberOfLines={3}
-                        h={70}
-                        placeholder={t(
-                          'profile.SchoolClass.single.optional.placeholder'
-                        )}
-                      />
-                    </Stack>
-                  </FormControl>
-                </Row>
-              )} */}
                         </VStack>
                     </ProfileSettingItem>
                 </ProfileSettingRow>
             </VStack>
             <VStack paddingX={space['1.5']} paddingBottom={space['1.5']} marginX="auto" width="100%" maxWidth={ContainerWidth}>
-                {/* {userSettingChanged && (
-          <Alert marginY={3} colorScheme="success" status="success">
-            <VStack space={2} flexShrink={1} w="100%">
-              <HStack
-                flexShrink={1}
-                space={2}
-                alignItems="center"
-                justifyContent="space-between">
-                <HStack space={2} flexShrink={1} alignItems="center">
-                  <Alert.Icon />
-                  <Text>{t('profile.successmessage')}</Text>
-                </HStack>
-              </HStack>
-            </VStack>
-          </Alert>
-        )} */}
                 {showError && <AlertMessage content={t('profile.errormessage')} />}
                 <Button width={ButtonContainer} onPress={() => updateSchoolGrade({ variables: { grade: selectedGrade } })}>
                     {t('saveSelection')}

src/pages/notification/NotficationControlPanel.tsx

@@ -8,7 +8,7 @@ import { useUserPreferences } from '../../hooks/useNotificationPreferences';
 import { createContext } from 'react';
 import NotificationAlert from '../../components/notifications/NotificationAlert';
 import { useQuery } from '@apollo/client';
-import { gql } from '../../gql/gql';
+import { gql } from '../../gql';
 import HelpNavigation from '../../components/HelpNavigation';
 
 const channels = ['email'];

src/pages/pupil/matching/UpdateData.tsx

@@ -1,10 +1,12 @@
-import { gql, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
+import { gql } from '../../../gql';
 import { DocumentNode } from 'graphql';
 import { Text, VStack, useTheme, Heading, Row, Column, Modal, useToast } from 'native-base';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CSSWrapper from '../../../components/CSSWrapper';
 import { schooltypes } from '../../../types/lernfair/SchoolType';
+import { SchoolType, State } from '../../../gql/graphql';
 import { states } from '../../../types/lernfair/State';
 import IconTagList from '../../../widgets/IconTagList';
 import { NextPrevButtons } from '../../../widgets/NextPrevButtons';
@@ -31,27 +33,27 @@ const UpdateData: React.FC<Props> = ({ schooltype, gradeAsInt, state, refetchQue
     const [modalSelection, setModalSelection] = useState<string>();
 
     const [meUpdateSchooltype] = useMutation(
-        gql`
+        gql(`
             mutation changeSchooltypeData($data: SchoolType!) {
                 meUpdate(update: { pupil: { schooltype: $data } })
             }
-        `,
+        `),
         { refetchQueries: [refetchQuery] }
     );
     const [meUpdateSchoolClass] = useMutation(
-        gql`
+        gql(`
             mutation changeSchoolClassData($data: Int!) {
                 meUpdate(update: { pupil: { gradeAsInt: $data } })
             }
-        `,
+        `),
         { refetchQueries: [refetchQuery] }
     );
     const [meUpdateState] = useMutation(
-        gql`
+        gql(`
             mutation changePupilStateData($data: State!) {
                 meUpdate(update: { pupil: { state: $data } })
             }
-        `,
+        `),
         { refetchQueries: [refetchQuery] }
     );
 
@@ -97,7 +99,7 @@ const UpdateData: React.FC<Props> = ({ schooltype, gradeAsInt, state, refetchQue
             switch (modalType) {
                 case 'schooltypes':
                     await meUpdateSchooltype({
-                        variables: { data: modalSelection },
+                        variables: { data: modalSelection as SchoolType },
                     });
                     break;
                 case 'schoolclass':
@@ -106,7 +108,7 @@ const UpdateData: React.FC<Props> = ({ schooltype, gradeAsInt, state, refetchQue
                     });
                     break;
                 case 'states':
-                    await meUpdateState({ variables: { data: modalSelection } });
+                    await meUpdateState({ variables: { data: modalSelection as State } });
                     break;
                 default:
                     break;