Feat: Settings Menu desktop redesign

src/hooks/useExternalSchoolSearch.ts

@@ -7,12 +7,19 @@ interface UseSchoolSearchArgs {
     skip?: boolean;
 }
 
-const ExternalSchoolSearchQuery = gql(`
+const EXTERNAL_SCHOOL_SEARCH_QUERY = gql(`
     query searchSchools($name: String!) {
-        externalSchoolSearch(
-            filters:  { name: $name },
-            options:  { limit: 20 }
-        )
+        externalSchoolSearch(filters:  { name: $name })
+            {
+            id
+            name
+        }
+    }    
+`);
+
+const EXTERNAL_SCHOOL_DETAIL_QUERY = gql(`
+    query schoolDetails($id: String!) {
+        schoolDetail(schoolId: $id)
             {
             id
             name
@@ -28,7 +35,7 @@ const ExternalSchoolSearchQuery = gql(`
 const useSchoolSearch = ({ name, skip }: UseSchoolSearchArgs) => {
     const debouncedName = useDebounce({ delay: 800, value: name });
     const [isLoading, setIsLoading] = useState(false);
-    const { data, loading: isFetching } = useQuery(ExternalSchoolSearchQuery, {
+    const { data, loading: isFetching } = useQuery(EXTERNAL_SCHOOL_SEARCH_QUERY, {
         variables: { name: debouncedName },
         skip: debouncedName.length < 3 || name.length < 3 || skip,
     });
@@ -39,4 +46,13 @@ const useSchoolSearch = ({ name, skip }: UseSchoolSearchArgs) => {
     return { schools: data?.externalSchoolSearch || [], isLoading: isFetching || isLoading };
 };
 
-export default useSchoolSearch;
+const useSchoolDetails = (id: string) => {
+    const { data, loading } = useQuery(EXTERNAL_SCHOOL_DETAIL_QUERY, {
+        variables: { id },
+        skip: !id,
+    });
+
+    return { school: data?.schoolDetail || null, isLoading: loading };
+};
+
+export { useSchoolDetails, useSchoolSearch };

src/lang/ar.json

@@ -719,7 +719,11 @@
             "error": "عذرا، تعذر إرسال رسالتك"
         },
         "btn": {
-            "reasonDisabled": ["يُرجى اختيار موضوع أطول (5 أحرف على الأقل).", "يُرجى كتابة رسالة أطول (5 أحرف على الأقل).", "يجب أن توافق على سياسة الخصوصية."],
+            "reasonDisabled": [
+                "يُرجى اختيار موضوع أطول (5 أحرف على الأقل).",
+                "يُرجى كتابة رسالة أطول (5 أحرف على الأقل).",
+                "يجب أن توافق على سياسة الخصوصية."
+            ],
             "formsubmit": "إرسال استفسار",
             "readsonDisabledModal": "يجب عليك تأكيد رغبتك في الإبلاغ عن هذه الرسالة."
         },
@@ -1096,7 +1100,8 @@
             "faq": "الأسئلة الشائعة والاتصال",
             "manageSessions": "إدارة الأجهزة",
             "certificates": "الشهادات",
-            "calendarPreferences": "متى يكون لديك وقت؟"
+            "calendarPreferences": "متى يكون لديك وقت؟",
+            "mySettings": "Meine Einstellungen"
         },
         "account": {
             "title": "حساب",
@@ -1217,93 +1222,127 @@
     },
     "helperwizard": {
         "verifizierung": {
-            "buttons": ["إعادة إرسال البريد الإلكتروني"],
+            "buttons": [
+                "إعادة إرسال البريد الإلكتروني"
+            ],
             "subtitle": "التحقق",
             "title": "تحقق من عنوان بريدك الإلكتروني",
             "content": "Lern-Fair \"قبل أن تتمكن من البدء في، يجب عليك أولاً تأكيد عنوان بريدك الإلكتروني. لقد أرسلنا لك بريداً إلكترونياً إلى {{email}} على {{date}}}. ألم تتلق رسالة بريد إلكتروني منا؟\""
         },
         "passwort": {
-            "buttons": ["إعداد كلمة مرور"],
+            "buttons": [
+                "إعداد كلمة مرور"
+            ],
             "subtitle": "شعار",
             "title": "إعداد كلمة مرور",
             "content": "لقد حان الوقت أخيراً، نحن نغير نظام تسجيل الدخول لدينا! Lern-Fair يمكنك الآن تعيين كلمة مرور لحسابك واستخدامها لتسجيل الدخول في المستقبل."
         },
         "willkommen": {
-            "buttons": ["عرض الدورات", "طلب دعم التعلم"],
+            "buttons": [
+                "عرض الدورات",
+                "طلب دعم التعلم"
+            ],
             "title": "مرحباً بك 👋",
             "subtitle": "من الرائع وجودك هنا!",
             "content": "Lern-Fair نتطلع إلى الترحيب بك في ! نقدم دورات تعليمية في مختلف المواد الدراسية مثل اللغة الألمانية والرياضيات واللغة الإنجليزية. إذا كنت بحاجة إلى مساعدة فردية، يمكنك أيضاً الانضمام إلى قائمة الانتظار الخاصة بنا للحصول على الدعم التعليمي",
             "actionDescription": "عرض عرض التعلم"
         },
         "statusSchüler": {
-            "buttons": ["عرض الدورات", "سحب الطلب"],
+            "buttons": [
+                "عرض الدورات",
+                "سحب الطلب"
+            ],
             "title": "أنت على قائمة الانتظار!",
             "subtitle": "قائمة الانتظار",
             "content": "بمجرد أن يحين دورك، سنقوم بإبلاغك عبر البريد الإلكتروني. لقد تم تقديم طلبك على {{date}}}. في غضون ذلك، يمكنك المشاركة في دوراتنا الجماعية."
         },
         "interestconfirmation": {
-            "buttons": ["نعم", "لا"],
+            "buttons": [
+                "نعم",
+                "لا"
+            ],
             "title": "هل ما زلت بحاجة إلى الدعم؟",
             "subtitle": "دعم",
             "content": "Du bist nun oben auf unserer Warteliste und wir können dich bald mit einem:r Lernpartner:in verbinden. Brauchst du immer noch Hilfe in den Fächern {{subjectSchüler}}. Wenn du “Nein” klickst oder dich nicht innerhalb von  <b>14 Tagen </b> bei uns meldest, vergeben wir deinen Platz an andere Schüler:innen."
         },
         "kontaktSchüler": {
-            "buttons": ["عرض شريك التعلم"],
+            "buttons": [
+                "عرض شريك التعلم"
+            ],
             "subtitle": "دعم تعليمي 1:1",
             "title": "شركاء التعلم الجدد",
             "content": "Es ist endlich so weit, wir haben eine:n Lernpartner:in für dich gefunden! {{nameHelfer}} kann dich ab sofort in {{subjectHelfer}} unterstützen. Bitte nehme Kontakt mit {{nameHelfer}} auf und vereinbare ein erstes Treffen. "
         },
         "angeforderteBescheinigung": {
-            "buttons": ["تأكيد التفاصيل"],
+            "buttons": [
+                "تأكيد التفاصيل"
+            ],
             "title": "التأكيد",
             "subtitle": "الدروس الخصوصية مع {{nameHelfer}} ",
             "content": "{{nameHelfer}} طلب منا شهادة لدعم التعلم الخاص بك. فقط إذا قمت بتأكيد ذلك ، سنكون قادرين على تحقيق {{nameHelfer}} هذه الرغبة.",
             "actionDescription": "تأكيد التفاصيل"
         },
         "kennenlernen": {
-            "buttons": ["إحجز موعد"],
+            "buttons": [
+                "إحجز موعد"
+            ],
             "subtitle": "تعرّف علينا",
             "title": "نريد أن نتعرف 👋 عليك!",
             "content": "قبل أن تبدأ معنا ، نود التعرف عليك في مكالمة فيديو جماعية مدتها 15 دقيقة. فقط حدد موعدا معنا."
         },
         "zeugnis": {
-            "buttons": ["معلومات عن شهادة حسن السيرة والسلوك"],
+            "buttons": [
+                "معلومات عن شهادة حسن السيرة والسلوك"
+            ],
             "subtitle": "مهم!",
             "title": "شهادة حسن سيرة وسلوك ممتدة",
             "actionDescription": "كل ما يتعلق بشهادة حسن السيرة والسلوك",
             "content": "نحن نطلب نسخة محدثة من شهادة حسن السيرة والسلوك الممددة كل 3 سنوات على الأكثر من أجل ضمان الحماية الكاملة للطفل. يمكنك التقدم بطلب للحصول على شهادة حسن السيرة والسلوك مجانًا باستخدام نموذج في الموقع أو عبر الإنترنت. يمكنك الاستمرار في دعم تلاميذ . يرجى تقديم شهادة حسن السيرة والسلوك في الوقت المناسب - وإلا سنضطر للأسف إلى إلغاء تنشيط حسابك. الموعد النهائي لتقديم/إلغاء تنشيط حسابك: {{cocDate}}"
         },
         "statusStudent": {
-            "buttons": ["الإبلاغ عن مشكلة"],
+            "buttons": [
+                "الإبلاغ عن مشكلة"
+            ],
             "subtitle": "دعم تعليمي 1:1",
             "title": "نحن نبحث عن شريك تعليمي لك!",
             "content": "Lern-Fair شكراً لرغبتك في دعم طالب في ! سنعثر لك على شخص يطابق المواد أو الدرجات التي حددتها. سنرد عليك عادةً عبر البريد الإلكتروني في غضون أسبوع مع طالب مناسب."
         },
         "statusStudent2": {
-            "buttons": ["تشكيل زوج تعلم آخر", "عرض الدورات الجماعية"],
+            "buttons": [
+                "تشكيل زوج تعلم آخر",
+                "عرض الدورات الجماعية"
+            ],
             "subtitle": "المزيد من فرص المشاركة",
             "title": "هل تريد المزيد؟",
             "content": "هل ترغب في دعم الطلاب الآخرين؟ تقديم دورة جماعية أو شراكات تعليمية إضافية.",
             "actionDescription": "عرض الخيارات الآن"
         },
         "kontaktStudent": {
-            "buttons": ["عرض شريك التعلم"],
+            "buttons": [
+                "عرض شريك التعلم"
+            ],
             "title": "شركاء التعلم الجدد",
             "subtitle": "دعم تعليمي 1:1",
             "content": "Es ist soweit, wir haben eine:n Schüler:in für dich gefunden! {{nameSchüler}} freut sich schon sehr auf deine Unterstützung. Bitte nehme Kontakt mit {{nameSchüler}} auf und vereinbare ein erstes Treffen."
         },
         "homeworkHelpStudent": {
-            "buttons": ["المساعدة في الواجبات المنزلية\n(تسجيل زووم)"],
+            "buttons": [
+                "المساعدة في الواجبات المنزلية\n(تسجيل زووم)"
+            ],
             "title": "الواجبات المنزليه",
             "content": "من خلال المساعدة في الواجبات المنزلية ، يتلقى الطلاب مساعدة لمرة واحدة وعفوية ومباشرة في أسئلة <b>واجباتهم المنزلية</b> . هل تعتقد أن هذا يبدو رائعا؟ ثم نتطلع إلى انضمامك إلينا!<br>ما عليك سوى الحضور إلى الاجتماع التمهيدي <b>من الاثنين إلى الخميس الساعة 3:50</b> مساء ودعم الطلاب في موادك الدراسية بواجباتهم المدرسية لمدة 15 دقيقة تقريبا بين <b>الساعة 4-5 مساء.</b> ألق نظرة ، نتطلع إلى رؤيتك!"
         },
         "homeworkHelpPupil": {
-            "buttons": ["المساعدة في الواجبات المنزلية"],
+            "buttons": [
+                "المساعدة في الواجبات المنزلية"
+            ],
             "title": "المساعدة في أداء واجبك المنزلي",
             "content": "عالق في واجبك المنزلي؟ من خلال المساعدة <b>في الواجبات المنزلية</b> ، سنساعدك بسرعة وسهولة لمدة 10 إلى 15 دقيقة من المساعدة في سؤالك <b>من الاثنين إلى الخميس بين الساعة 4-5 مساء</b> . نحن نتطلع إلى رؤيتك!"
         },
         "pupilScreening": {
-            "buttons": ["إحجز موعد"],
+            "buttons": [
+                "إحجز موعد"
+            ],
             "title": "نريد أن نتعرف عليك!",
             "subtitle": "تعرّف علينا",
             "content": "قبل أن نتمكن من إيجاد شريك تعليمي لك، نود أن نتعرف عليك. يُرجى حجز موعد لهذا الغرض."
@@ -1349,7 +1388,9 @@
             "description": "لكي نتمكن من تعيين الشريك التعليمي المثالي لك، يجب عليك أولاً تقديم طلب على منصتنا. هناك يمكنك بسهولة تحديد الموضوعات التي تهمك والتي يمكننا مساعدتك فيها. نتطلع إلى البدء معك وبدء رحلتك التعليمية معاً!"
         },
         "pupilFirstScreening": {
-            "buttons": ["إحجز موعد"],
+            "buttons": [
+                "إحجز موعد"
+            ],
             "title": "نريد أن نتعرف عليك!",
             "subtitle": "تعرّف علينا",
             "content": "Lern-Fair قبل أن تتمكن من استخدام الخدمات التي نقدمها، نود أن نتعرف عليك. يُرجى حجز موعد لإجراء مكالمة زووم."
@@ -2658,12 +2699,20 @@
     },
     "certificates": {
         "instantCertificate": {
-            "bullets": ["متاح على الفور", "لا يدرج شركاء التعلم الفردي", "يتم سرد نوع الدعم والمدة الإجمالية وعدد الدروس"],
+            "bullets": [
+                "متاح على الفور",
+                "لا يدرج شركاء التعلم الفردي",
+                "يتم سرد نوع الدعم والمدة الإجمالية وعدد الدروس"
+            ],
             "title": "إثبات فوري",
             "request": "طلب شهادة فورية"
         },
         "participationCertificate": {
-            "bullets": ["شريك تعلُّم يجب تأكيده من قبل", "لكل شريك تعلم على حدة", "يمكن أيضاً تأكيد الوقت المستغرق هنا"],
+            "bullets": [
+                "شريك تعلُّم يجب تأكيده من قبل",
+                "لكل شريك تعلم على حدة",
+                "يمكن أيضاً تأكيد الوقت المستغرق هنا"
+            ],
             "title": "الإثبات الفردي"
         },
         "title": "شهاداتي"
@@ -2742,4 +2791,4 @@
         "some": "Etwas",
         "extensive": "Viel"
     }
-}
+}

src/lang/de.json

@@ -1175,6 +1175,7 @@
     "settings": {
         "header": "Einstellungen",
         "general": {
+            "mySettings": "Meine Einstellungen",
             "title": "Allgemein",
             "profile": "Profil",
             "calendarPreferences": "Wann hast du Zeit?",