Use typed graphql queries everywhere, clean up dead code

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;

src/pages/registration/PersonalData.tsx

@@ -5,9 +5,9 @@ import TextInput from '../../components/TextInput';
 import PasswordInput from '../../components/PasswordInput';
 import AlertMessage from '../../widgets/AlertMessage';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
-import { gql, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
+import { gql } from '../../gql';
 import { RegistrationContext } from '../Registration';
-import { useNavigate } from 'react-router-dom';
 import isEmail from 'validator/es/lib/isEmail';
 import { Cooperation } from '../../gql/graphql';
 import { InfoCard } from '../../components/InfoCard';
@@ -29,7 +29,6 @@ export default function PersonalData({ cooperation }: { cooperation?: Cooperatio
     } = useContext(RegistrationContext);
 
     const { t } = useTranslation();
-    const navigate = useNavigate();
     const { space } = useTheme();
     const { trackEvent } = useMatomo();
 
@@ -39,11 +38,13 @@ export default function PersonalData({ cooperation }: { cooperation?: Cooperatio
     const [showPasswordLength, setShowPasswordLength] = useState<boolean>(false);
     const [showPasswordConfirmNoMatch, setShowPasswordConfirmNoMatch] = useState<boolean>(false);
 
-    const [isEmailAvailable] = useMutation(gql`
+    const [isEmailAvailable] = useMutation(
+        gql(`
         mutation isEmailAvailable($email: String!) {
             isEmailAvailable(email: $email)
         }
-    `);
+    `)
+    );
 
     const isInputValid = useCallback(() => {
         setShowNameMissing(!firstname || !lastname);

src/pages/student/single-course/ContactParticipants.tsx

@@ -1,8 +1,8 @@
-import { gql, useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { Button, useBreakpointValue, useTheme, useToast } from 'native-base';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Participant } from '../../../gql/graphql';
+import { gql } from '../../../gql';
 import SendParticipantsMessageModal from '../../../modals/SendParticipantsMessageModal';
 import { SelectParticipants } from '../../../widgets/SelectParticipants';
 
@@ -11,7 +11,7 @@ type ContactProps = {
     refresh: () => void;
 };
 
-const ContactParticipants: React.FC<ContactProps> = ({ subcourseId, refresh }) => {
+const ContactParticipants: React.FC<ContactProps> = ({ subcourseId }) => {
     const toast = useToast();
     const { t } = useTranslation();
     const { sizes } = useTheme();
@@ -61,7 +61,7 @@ const ContactParticipants: React.FC<ContactProps> = ({ subcourseId, refresh }) =
                             participants:
                                 selectedParticipants.length > 0
                                     ? selectedParticipants
-                                    : participantsData.subcourse!.participants.map((it: Participant) => it.id),
+                                    : participantsData.subcourse!.participants.map((it: { id: number }) => it.id),
                             fileIDs,
                         },
                     });