OPHJOD-1137: Add useSearchParams to various components

Opetushallitus · Dec 16, 2024 · 9ce9725 · 9ce9725
1 parent 27f1898
commit 9ce9725
Show file tree

Hide file tree

Showing 19 changed files with 243 additions and 134 deletions.
diff --git a/src/components/CareerPlanningSummarySection/CareerPlanningSummarySection.tsx b/src/components/CareerPlanningSummarySection/CareerPlanningSummarySection.tsx
@@ -7,6 +7,7 @@ import { useSkillAreaExercises } from '@/hooks/useSkillAreaExercises';
 import { Button } from '..';
 import { ChevronRight } from '@/icons';
 import { useSummaryAccordionStore } from '@/stores/summaryAccordionStore';
+import { useSearchParams } from 'react-router';
 
 export const CareerPlanningSummarySection = ({
   skillArea,
@@ -17,6 +18,7 @@ export const CareerPlanningSummarySection = ({
   score: number | undefined;
   index: number;
 }) => {
+  const [searchParams] = useSearchParams();
   const feedback = score ? skillArea.feedbacks.find((f) => f.minScore <= score && score <= f.maxScore) : undefined;
   const exercises = useSkillAreaExercises({ skillAreaId: skillArea.id });
 
@@ -56,7 +58,11 @@ export const CareerPlanningSummarySection = ({
       ) : (
         <div>
           <p className="mb-4 text-body">{t('components.career-management-summary-section.no-feedback')}</p>
-          <Button variant="soft" icon={<ChevronRight />} to={`../${skillArea.slug}`}>
+          <Button
+            variant="soft"
+            icon={<ChevronRight />}
+            to={{ pathname: `../${skillArea.slug}`, search: searchParams.toString() }}
+          >
             {t('components.career-management-summary-section.to-section', { skillAreaName: skillArea.name })}
           </Button>
         </div>

diff --git a/src/components/MobileSkillAreaSelector/MobileSkillAreaSelector.tsx b/src/components/MobileSkillAreaSelector/MobileSkillAreaSelector.tsx
@@ -4,13 +4,14 @@ import { ChevronDown } from '@/icons';
 import { cx } from 'cva';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
 export const MobileSkillAreaSelector = () => {
   const { t, i18n } = useTranslation();
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const [isOpen, setIsOpen] = useState(false);
+  const [searchParams] = useSearchParams();
 
   const skillAreas = useSkillAreas();
   const currentSkillArea = skillAreas.find((o) => pathname.includes(o.slug));
@@ -42,7 +43,10 @@ export const MobileSkillAreaSelector = () => {
               key={skillArea.id}
               onClick={() => {
                 setIsOpen(false);
-                navigate(`/${i18n.language}/${t('slugs.career-management')}/${skillArea.slug}`);
+                navigate({
+                  pathname: `/${i18n.language}/${t('slugs.career-management')}/${skillArea.slug}`,
+                  search: searchParams.toString(),
+                });
               }}
             >
               <SkillAreaIcon section={skillArea.id} size="xs" />
@@ -56,7 +60,10 @@ export const MobileSkillAreaSelector = () => {
             )}
             onClick={() => {
               setIsOpen(false);
-              navigate(`/${i18n.language}/${t('slugs.career-management')}/${t('slugs.summary')}`);
+              navigate({
+                pathname: `/${i18n.language}/${t('slugs.career-management')}/${t('slugs.summary')}`,
+                search: searchParams.toString(),
+              });
             }}
           >
             <span className="flex h-8 min-w-40 flex-1 items-center px-4 text-left text-heading-5">

diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
@@ -4,7 +4,7 @@ import { Check, Document, Home, Info, Link as LinkIcon, Open } from '@/icons';
 import { useCareerPlanningAnswersStore } from '@/stores/careerPlanningAnswersStore';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 
 export function NavigationBar() {
   const { t, i18n } = useTranslation();
@@ -24,64 +24,78 @@ export function NavigationBar() {
     }, 3000);
   };
 
+  const [searchParams] = useSearchParams();
+  const isFromYksilo = searchParams.has('yksilo');
+
   return (
     <nav className="grid h-[60px] w-full grid-cols-3 items-stretch border-b bg-white px-2 shadow-md">
-      <button onClick={() => setMenuOpen(true)} className="justify-self-start p-2 text-heading-2">
-        ☰
-      </button>
-      <Drawer title={t('common.app-name')} isOpen={menuOpen} close={() => setMenuOpen(false)}>
-        <div className="mt-4 flex flex-col gap-4">
-          <MenuLink to="/" closeMenu={() => setMenuOpen(false)}>
-            <div className="size-6">
-              <Home />
-            </div>
-            <span>{t('nav.home')}</span>
-          </MenuLink>
-          <MenuLink to={t('slugs.exercises')} closeMenu={() => setMenuOpen(false)}>
-            <div className="size-6">
-              <Document className="min-size-6" />
-            </div>
-            <span>{t('nav.all-exercises')}</span>
-          </MenuLink>
-          <MenuLink to={t('slugs.service-info')} closeMenu={() => setMenuOpen(false)}>
-            <div className="size-6">
-              <Info className="min-size-6" />
-            </div>
-            <span>{t('nav.service-info')}</span>
-          </MenuLink>
-          <div className="h-[1px] w-full bg-neutral-1" />
-          <button
-            className="flex items-center gap-2 rounded-xl px-4 py-3 text-left text-heading-4 leading-none hover:bg-primary-muted hover:text-primary hover:underline"
-            onClick={() => {
-              void copyToClipboard();
-            }}
-          >
-            <div className="size-6">{linkCopied ? <Check /> : <LinkIcon />}</div>
-            <span>
-              {linkCopied
-                ? t('career-management-summary.summary-link-card.link-copied')
-                : t('nav.copy-results-to-link')}
-            </span>
+      {!isFromYksilo ? (
+        <>
+          <button onClick={() => setMenuOpen(true)} className="justify-self-start p-2 text-heading-2">
+            ☰
           </button>
-          <a
-            className="flex items-center gap-2 rounded-xl px-4 py-3 text-left text-heading-4 leading-none hover:bg-primary-muted hover:text-primary hover:underline"
-            href="https://www.hyria.fi/urasuunnittelutaitoni-tyokirja"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <div className="size-6">
-              <Open />
+          <Drawer title={t('common.app-name')} isOpen={menuOpen} close={() => setMenuOpen(false)}>
+            <div className="mt-4 flex flex-col gap-4">
+              <MenuLink to="/" closeMenu={() => setMenuOpen(false)}>
+                <div className="size-6">
+                  <Home />
+                </div>
+                <span>{t('nav.home')}</span>
+              </MenuLink>
+              <MenuLink to={t('slugs.exercises')} closeMenu={() => setMenuOpen(false)}>
+                <div className="size-6">
+                  <Document className="min-size-6" />
+                </div>
+                <span>{t('nav.all-exercises')}</span>
+              </MenuLink>
+              <MenuLink to={t('slugs.service-info')} closeMenu={() => setMenuOpen(false)}>
+                <div className="size-6">
+                  <Info className="min-size-6" />
+                </div>
+                <span>{t('nav.service-info')}</span>
+              </MenuLink>
+              <div className="h-[1px] w-full bg-neutral-1" />
+              <button
+                className="flex items-center gap-2 rounded-xl px-4 py-3 text-left text-heading-4 leading-none hover:bg-primary-muted hover:text-primary hover:underline"
+                onClick={() => {
+                  void copyToClipboard();
+                }}
+              >
+                <div className="size-6">{linkCopied ? <Check /> : <LinkIcon />}</div>
+                <span>
+                  {linkCopied
+                    ? t('career-management-summary.summary-link-card.link-copied')
+                    : t('nav.copy-results-to-link')}
+                </span>
+              </button>
+              <a
+                className="flex items-center gap-2 rounded-xl px-4 py-3 text-left text-heading-4 leading-none hover:bg-primary-muted hover:text-primary hover:underline"
+                href="https://www.hyria.fi/urasuunnittelutaitoni-tyokirja"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="size-6">
+                  <Open />
+                </div>
+                <span>{t('nav.get-workbook')}</span>
+              </a>
             </div>
-            <span>{t('nav.get-workbook')}</span>
-          </a>
-        </div>
-      </Drawer>
-      <a href={`/urataidot/${i18n.language}`} className="flex items-center justify-center font-bold">
+          </Drawer>
+        </>
+      ) : (
+        <div></div>
+      )}
+      <Link
+        to={{ pathname: `/${i18n.language}`, search: searchParams.toString() }}
+        className="flex items-center justify-center font-bold"
+      >
         {t('common.app-name')}
-      </a>
-      <div className="grid place-items-center justify-self-end p-2">
-        <LanguageSelector />
-      </div>
+      </Link>
+      {!isFromYksilo && (
+        <div className="grid place-items-center justify-self-end p-2">
+          <LanguageSelector />
+        </div>
+      )}
       <div id="progress-bar" className="absolute -bottom-1 left-0 hidden h-1 w-full sm:block"></div>
     </nav>
   );

diff --git a/src/components/SkillAreaSelector/SkillAreaSelector.tsx b/src/components/SkillAreaSelector/SkillAreaSelector.tsx
@@ -2,12 +2,13 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { SkillAreaIcon } from '../SkillAreaIcon/SkillAreaIcon';
 import { ChevronDown } from '@/icons';
-import { useLocation } from 'react-router';
+import { Link, useLocation, useSearchParams } from 'react-router';
 import useSkillAreas from '@/hooks/useSkillAreas';
 
 export const SkillAreaSelector = () => {
   const { t, i18n } = useTranslation();
   const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
 
   const skillAreas = useSkillAreas();
   const currentSkillArea = skillAreas.find((o) => pathname.includes(o.slug));
@@ -29,22 +30,28 @@ export const SkillAreaSelector = () => {
       >
         {skillAreas.map((skillArea) => (
           <MenuItem
-            as="a"
+            as={Link}
             key={skillArea.id}
             aria-label={skillArea.name}
-            href={`/urataidot/${i18n.language}/${t('slugs.career-management')}/${skillArea.slug}`}
+            to={{
+              pathname: `/${i18n.language}/${t('slugs.career-management')}/${skillArea.slug}`,
+              search: searchParams.toString(),
+            }}
             className={`flex items-center gap-2 rounded-xl border-2 border-transparent px-2 py-1 font-display hover:bg-primary-muted-hover hover:underline focus-visible:border-primary data-[focus]:bg-primary-muted-hover data-[focus]:underline ${currentSkillArea?.id === skillArea.id ? 'bg-primary-light' : ''}`}
           >
             <SkillAreaIcon section={skillArea.id} size="xs" />
             <span className="min-w-40 flex-1 text-left text-heading-5">{skillArea.name}</span>
           </MenuItem>
         ))}
-        <a
-          href={`/urataidot/${i18n.language}/${t('slugs.career-management')}/${t('slugs.summary')}`}
+        <Link
+          to={{
+            pathname: `/${i18n.language}/${t('slugs.career-management')}/${t('slugs.summary')}`,
+            search: searchParams.toString(),
+          }}
           className="flex h-11 items-center rounded-xl border-2 border-transparent px-2 py-1 font-display text-heading-5 hover:bg-primary-muted-hover hover:underline focus-visible:border-primary data-[focus]:bg-primary-muted-hover data-[focus]:underline"
         >
           {t('career-management-summary.title')}
-        </a>
+        </Link>
       </MenuItems>
     </Menu>
   );

diff --git a/src/features/exercises/components/EmojiExercise.tsx b/src/features/exercises/components/EmojiExercise.tsx
@@ -8,7 +8,7 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import EmojiPicker from 'emoji-picker-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { ReadyModal } from './ReadyModal';
 
 const EmojiExercise = ({
@@ -21,6 +21,7 @@ const EmojiExercise = ({
   sectionId: number;
 }) => {
   const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
 
   const [readyModalOpen, setReadyModalOpen] = useState(false);
 
@@ -92,7 +93,10 @@ const EmojiExercise = ({
           {t('exercises.easier-question')}{' '}
           <Link
             className="text-body-bold text-primary hover:underline"
-            to={`../${easierExercise.skillAreaSlug}/${easierExercise.sectionSlug}/${easierExercise.id}`}
+            to={{
+              pathname: `../${easierExercise.skillAreaSlug}/${easierExercise.sectionSlug}/${easierExercise.id}`,
+              search: searchParams.toString(),
+            }}
           >
             {t('exercises.easier-link')}
           </Link>

diff --git a/src/features/exercises/components/ExerciseLinkCard.tsx b/src/features/exercises/components/ExerciseLinkCard.tsx
@@ -1,7 +1,7 @@
 import { Check, ChevronRight } from '@/icons';
 import { ExerciseWithInfo, SkillAreaID } from '@/lib/content-types';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { cx } from 'cva';
 import { useExerciseAnsweredStore } from '@/stores/exerciseAnsweredStore';
 
@@ -28,6 +28,7 @@ export const ExerciseLinkCard = ({
   showTag?: boolean;
 }) => {
   const { t, i18n } = useTranslation();
+  const [searchParams] = useSearchParams();
 
   const exerciseAnswered = useExerciseAnsweredStore((state) =>
     state.getExerciseAnswered({
@@ -47,7 +48,10 @@ export const ExerciseLinkCard = ({
 
   return (
     <Link
-      to={`/${i18n.language}/${t('slugs.exercises')}/${exercise.skillAreaSlug}/${exercise.sectionSlug}/${exercise.id}`}
+      to={{
+        pathname: `/${i18n.language}/${t('slugs.exercises')}/${exercise.skillAreaSlug}/${exercise.sectionSlug}/${exercise.id}`,
+        search: searchParams.toString(),
+      }}
       className={styles}
     >
       <div className="flex w-4/5 flex-col gap-3">

diff --git a/src/features/exercises/components/MediaExercise.tsx b/src/features/exercises/components/MediaExercise.tsx
@@ -6,7 +6,7 @@ import { useExerciseAnsweredStore } from '@/stores/exerciseAnsweredStore';
 import { MediaExerciseAnswer, useExerciseAnswersStore } from '@/stores/exerciseAnswersStore';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { ReadyModal } from './ReadyModal';
 
 const MediaExercise = ({
@@ -19,6 +19,7 @@ const MediaExercise = ({
   sectionId: number;
 }) => {
   const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
 
   const [readyModalOpen, setReadyModalOpen] = useState(false);
 
@@ -74,7 +75,10 @@ const MediaExercise = ({
           {t('exercises.easier-question')}{' '}
           <Link
             className="text-body-sm-bold text-primary hover:underline"
-            to={`../${easierExercise.skillAreaSlug}/${easierExercise.sectionSlug}/${easierExercise.id}`}
+            to={{
+              pathname: `../${easierExercise.skillAreaSlug}/${easierExercise.sectionSlug}/${easierExercise.id}`,
+              search: searchParams.toString(),
+            }}
           >
             {t('exercises.easier-link')}
           </Link>

diff --git a/src/features/exercises/components/ReadyModal.tsx b/src/features/exercises/components/ReadyModal.tsx
@@ -2,7 +2,7 @@ import { Button, Modal } from '@/components';
 import { DownloadPDFButton } from '@/features/pdf/components/DownloadPDFButton';
 import { Exercise } from '@/lib/content-types';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
 export const ReadyModal = ({
   open,
@@ -18,6 +18,7 @@ export const ReadyModal = ({
   const { t } = useTranslation();
   const { key } = useLocation();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   return (
     <Modal title={t('exercises.ready-title')} isOpen={open} close={close}>
@@ -26,7 +27,12 @@ export const ReadyModal = ({
         <DownloadPDFButton filename={exercise.title + '.pdf'} pdfDocument={document}>
           {t('exercises.download-as-pdf')}
         </DownloadPDFButton>
-        <Button variant="simple" onClick={() => (key === 'default' ? navigate('/') : navigate(-1))}>
+        <Button
+          variant="simple"
+          onClick={() =>
+            key === 'default' ? navigate({ pathname: '/', search: searchParams.toString() }) : navigate(-1)
+          }
+        >
           {t('exercises.back-to-summary')}
         </Button>
       </div>