OPHJOD-1062: Create useEnvironment hook and hide todo parts

Opetushallitus · Nov 22, 2024 · cbd23be · cbd23be
1 parent 235e8e5
commit cbd23be
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 105 deletions.
diff --git a/src/components/MegaMenu/MegaMenu.tsx b/src/components/MegaMenu/MegaMenu.tsx
@@ -1,6 +1,7 @@
 import { LanguageButton, LanguageMenu, RoutesNavigationList, SimpleNavigationList, UserButton } from '@/components';
 import { NavigationBarProps } from '@/components/NavigationBar/NavigationBar';
 import { useAppRoutes } from '@/hooks/useAppRoutes';
+import { useEnvironment } from '@/hooks/useEnvironment';
 import { useMediaQueries } from '@jod/design-system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,7 @@ export const MegaMenu = ({ loggedIn, onClose, onLanguageClick, user, logout }: M
   const { sm } = useMediaQueries();
   const { t } = useTranslation();
   const [megaMenuState, setMegaMenuState] = React.useState<'main' | 'lang'>('main');
+  const { isDev } = useEnvironment();
 
   const onLanguageButtonClick = () => {
     setMegaMenuState('lang');
@@ -90,7 +92,7 @@ export const MegaMenu = ({ loggedIn, onClose, onLanguageClick, user, logout }: M
             </>
           )}
         </div>
-        {sm && (
+        {isDev && sm && (
           <div className="flex items-center font-arial sticky bottom-0 bg-[#F5F5F5] h-[100px] px-9 py-6 text-secondary-gray text-body-sm text-todo">
             Lorem ipsum dolor sit amet, soleat iracundia eos ea, est in modo vivendo moderatius. Ex duo hinc graeco
             evertitur, nisl affert vel cu. Ne ius quis repudiare. Ne modo eius corpora mea. Ipsum congue definitiones

diff --git a/src/components/OpportunityCard/OpportunityCard.tsx b/src/components/OpportunityCard/OpportunityCard.tsx
@@ -1,5 +1,6 @@
 import { components } from '@/api/schema';
 import { ActionButton, FavoriteToggle, LoginModal } from '@/components';
+import { useEnvironment } from '@/hooks/useEnvironment';
 import { MahdollisuusTyyppi } from '@/routes/types';
 import { cx, PopupList, PopupListItem } from '@jod/design-system';
 import React from 'react';
@@ -129,6 +130,7 @@ export const OpportunityCard = ({
 }: OpportunityCardProps) => {
   const { t } = useTranslation();
   const [loginModalOpen, setLoginModalOpen] = React.useState(false);
+  const { isDev } = useEnvironment();
 
   const onToggleFavorite = () => {
     if (!isLoggedIn) {
@@ -159,40 +161,42 @@ export const OpportunityCard = ({
             {name}
           </NavLink>
           <p className="font-arial text-body-md-mobile sm:text-body-md">{description}</p>
-          <div className="flex flex-wrap mt-5">
-            <BottomBox title={t('opportunity-card.trend')} className="bg-todo">
-              {trend === 'NOUSEVA' ? (
-                <MdOutlineTrendingUp size={24} className="text-accent" aria-label={t(`opportunity-card.trend-up`)} />
-              ) : (
-                <MdOutlineTrendingDown
-                  size={24}
-                  className="text-accent"
-                  aria-label={t(`opportunity-card.trend-down`)}
-                />
-              )}
-            </BottomBox>
-            <BottomBox title={t('opportunity-card.employment-outlook')} className="bg-todo">
-              <OutlookDots
-                outlook={employmentOutlook}
-                ariaLabel={t('opportunity-card.outlook-value', { outlook: employmentOutlook })}
-              />
-            </BottomBox>
-            {hasRestrictions && (
-              <BottomBox title={t('opportunity-card.maybe-has-restrictions')} className="bg-todo">
-                <MdBlock className="text-accent" size={20} role="presentation" />
-              </BottomBox>
-            )}
-            {industryName && (
-              <BottomBox title={`${t('opportunity-card.industry-name')}:`} className="bg-todo">
-                <span className="font-bold">{industryName}</span>
+          {isDev && (
+            <div className="flex flex-wrap mt-5">
+              <BottomBox title={t('opportunity-card.trend')} className="bg-todo">
+                {trend === 'NOUSEVA' ? (
+                  <MdOutlineTrendingUp size={24} className="text-accent" aria-label={t(`opportunity-card.trend-up`)} />
+                ) : (
+                  <MdOutlineTrendingDown
+                    size={24}
+                    className="text-accent"
+                    aria-label={t(`opportunity-card.trend-down`)}
+                  />
+                )}
               </BottomBox>
-            )}
-            {mostCommonEducationBackground && (
-              <BottomBox title={`${t('opportunity-card.common-educational-background')}:`} className="bg-todo">
-                <span className="font-bold">{mostCommonEducationBackground}</span>
+              <BottomBox title={t('opportunity-card.employment-outlook')} className="bg-todo">
+                <OutlookDots
+                  outlook={employmentOutlook}
+                  ariaLabel={t('opportunity-card.outlook-value', { outlook: employmentOutlook })}
+                />
               </BottomBox>
-            )}
-          </div>
+              {hasRestrictions && (
+                <BottomBox title={t('opportunity-card.maybe-has-restrictions')} className="bg-todo">
+                  <MdBlock className="text-accent" size={20} role="presentation" />
+                </BottomBox>
+              )}
+              {industryName && (
+                <BottomBox title={`${t('opportunity-card.industry-name')}:`} className="bg-todo">
+                  <span className="font-bold">{industryName}</span>
+                </BottomBox>
+              )}
+              {mostCommonEducationBackground && (
+                <BottomBox title={`${t('opportunity-card.common-educational-background')}:`} className="bg-todo">
+                  <span className="font-bold">{mostCommonEducationBackground}</span>
+                </BottomBox>
+              )}
+            </div>
+          )}
         </div>
         <div
           className={`flex flex-wrap-reverse items-center gap-x-7 gap-y-5 mb-4 order-1 ${typeof matchValue === 'number' && matchLabel ? 'justify-between' : 'justify-end'}`}

diff --git a/src/hooks/useEnvironment/index.ts b/src/hooks/useEnvironment/index.ts
@@ -0,0 +1,9 @@
+export const useEnvironment = () => {
+  const hostname = window.location.hostname;
+
+  return {
+    isDev: ['localhost', 'jodkehitys'].some((str) => hostname.includes(str)),
+    isTst: hostname.includes('jodtestaus'),
+    isPrd: !['localhost', 'jodkehitys', 'jodtestaus'].some((str) => hostname.includes(str)),
+  };
+};
diff --git a/src/routes/JobOpportunity/JobOpportunity.tsx b/src/routes/JobOpportunity/JobOpportunity.tsx
@@ -9,6 +9,7 @@ import {
   Title,
 } from '@/components';
 import { CompareCompetencesTable } from '@/components/CompareTable/CompareCompetencesTable';
+import { useEnvironment } from '@/hooks/useEnvironment';
 import { useToolStore } from '@/stores/useToolStore';
 import { getLocalizedText } from '@/utils';
 import { tidyClasses as tc } from '@jod/design-system';
@@ -36,6 +37,7 @@ const JobOpportunity = () => {
   const { t } = useTranslation();
   const { tyomahdollisuus, ammatit, osaamiset, isLoggedIn } = useLoaderData() as LoaderData;
   const toolStore = useToolStore();
+  const { isDev } = useEnvironment();
   const title = getLocalizedText(tyomahdollisuus?.otsikko);
   const [loginModalOpen, setLoginModalOpen] = React.useState(false);
   const omatOsaamisetUris = React.useMemo(
@@ -47,7 +49,7 @@ const JobOpportunity = () => {
     [osaamiset, omatOsaamisetUris],
   );
   const clusterSize = tyomahdollisuus?.jakaumat?.ammatti?.maara;
-  const routes: RoutesNavigationListProps['routes'] = [
+  const readyRoutes: RoutesNavigationListProps['routes'] = [
     {
       active: false,
       name: t('job-opportunity.description'),
@@ -60,6 +62,16 @@ const JobOpportunity = () => {
       path: `#${t('job-opportunity.most-common-job-tasks.title')}`,
       replace: true,
     },
+
+    {
+      active: false,
+      name: t('job-opportunity.competences.title'),
+      path: `#${t('job-opportunity.competences.title')}`,
+      replace: true,
+    },
+  ];
+
+  const todoRoutes: RoutesNavigationListProps['routes'] = [
     {
       active: false,
       name: t('job-opportunity.key-figures.title'),
@@ -78,12 +90,6 @@ const JobOpportunity = () => {
       path: `#${t('job-opportunity.salary-trends.title')}`,
       replace: true,
     },
-    {
-      active: false,
-      name: t('job-opportunity.competences.title'),
-      path: `#${t('job-opportunity.competences.title')}`,
-      replace: true,
-    },
     {
       active: false,
       name: t('job-opportunity.employment-trends.title'),
@@ -98,6 +104,9 @@ const JobOpportunity = () => {
     },
   ];
 
+  // Remember to put the routes in the correct order once they're done
+  const routes = isDev ? [...readyRoutes, ...todoRoutes] : readyRoutes;
+
   const [isFavorite, setIsFavorite] = React.useState(false);
 
   React.useEffect(() => {
@@ -130,24 +139,30 @@ const JobOpportunity = () => {
       <h1 className="mb-5 text-heading-2 sm:text-heading-1">{title}</h1>
       <div className="flex flex-row flex-wrap gap-x-7 gap-y-5 my-8 print:hidden">
         <FavoriteToggle isFavorite={isFavorite} onToggleFavorite={() => void onToggleFavorite()} />
-        <ActionButton
-          label={t('compare')}
-          icon={<MdCompareArrows size={24} className="text-accent" />}
-          onClick={notImplemented}
-          className="bg-todo"
-        />
-        <ActionButton
-          label={t('create-path')}
-          icon={<MdOutlineRoute size={24} className="text-accent transform rotate-90 -scale-x-100" />}
-          onClick={notImplemented}
-          className="bg-todo"
-        />
-        <ActionButton
-          label={t('share')}
-          icon={<MdOutlineShare size={24} className="text-accent" />}
-          onClick={notImplemented}
-          className="bg-todo"
-        />
+        {isDev && (
+          <ActionButton
+            label={t('compare')}
+            icon={<MdCompareArrows size={24} className="text-accent" />}
+            onClick={notImplemented}
+            className="bg-todo"
+          />
+        )}
+        {isDev && (
+          <ActionButton
+            label={t('create-path')}
+            icon={<MdOutlineRoute size={24} className="text-accent transform rotate-90 -scale-x-100" />}
+            onClick={notImplemented}
+            className="bg-todo"
+          />
+        )}
+        {isDev && (
+          <ActionButton
+            label={t('share')}
+            icon={<MdOutlineShare size={24} className="text-accent" />}
+            onClick={notImplemented}
+            className="bg-todo"
+          />
+        )}
         <ActionButton
           label={t('print')}
           icon={<MdOutlinePrint size={24} className="text-accent" />}
@@ -178,25 +193,33 @@ const JobOpportunity = () => {
             ))}
           </ol>
         </div>
-        <div>
-          <ScrollHeading title={t('job-opportunity.key-figures.title')} heading="h2" className="text-heading-2" />
-          <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.key-figures.description')}</p>
-          <div className="bg-todo h-[380px]" />
-        </div>
-        <div>
-          <ScrollHeading
-            title={t('job-opportunity.labour-market-picture.title')}
-            heading="h2"
-            className="text-heading-2"
-          />
-          <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.labour-market-picture.description')}</p>
-          <div className="bg-todo h-[380px]" />
-        </div>
-        <div>
-          <ScrollHeading title={t('job-opportunity.salary-trends.title')} heading="h2" className="text-heading-2" />
-          <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.salary-trends.description')}</p>
-          <div className="bg-todo h-[380px]" />
-        </div>
+        {isDev && (
+          <div>
+            <ScrollHeading title={t('job-opportunity.key-figures.title')} heading="h2" className="text-heading-2" />
+            <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.key-figures.description')}</p>
+            <div className="bg-todo h-[380px]" />
+          </div>
+        )}
+        {isDev && (
+          <div>
+            <ScrollHeading
+              title={t('job-opportunity.labour-market-picture.title')}
+              heading="h2"
+              className="text-heading-2"
+            />
+            <p className="text-body-md font-arial mb-6 mt-4">
+              {t('job-opportunity.labour-market-picture.description')}
+            </p>
+            <div className="bg-todo h-[380px]" />
+          </div>
+        )}
+        {isDev && (
+          <div>
+            <ScrollHeading title={t('job-opportunity.salary-trends.title')} heading="h2" className="text-heading-2" />
+            <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.salary-trends.description')}</p>
+            <div className="bg-todo h-[380px]" />
+          </div>
+        )}
         <div>
           <ScrollHeading title={t('job-opportunity.competences.title')} heading="h2" className="text-heading-2" />
           <CompareCompetencesTable
@@ -205,16 +228,24 @@ const JobOpportunity = () => {
             className="mt-4"
           />
         </div>
-        <div>
-          <ScrollHeading title={t('job-opportunity.employment-trends.title')} heading="h2" className="text-heading-2" />
-          <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.employment-trends.description')}</p>
-          <div className="bg-todo h-[380px]" />
-        </div>
-        <div>
-          <ScrollHeading title={t('job-opportunity.related-jobs.title')} heading="h2" className="text-heading-2" />
-          <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.related-jobs.description')}</p>
-          <div className="bg-todo h-[380px] mb-8" />
-        </div>
+        {isDev && (
+          <div>
+            <ScrollHeading
+              title={t('job-opportunity.employment-trends.title')}
+              heading="h2"
+              className="text-heading-2"
+            />
+            <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.employment-trends.description')}</p>
+            <div className="bg-todo h-[380px]" />
+          </div>
+        )}
+        {isDev && (
+          <div>
+            <ScrollHeading title={t('job-opportunity.related-jobs.title')} heading="h2" className="text-heading-2" />
+            <p className="text-body-md font-arial mb-6 mt-4">{t('job-opportunity.related-jobs.description')}</p>
+            <div className="bg-todo h-[380px] mb-8" />
+          </div>
+        )}
       </div>
     </MainLayout>
   );

diff --git a/src/routes/Profile/Favorites/Favorites.tsx b/src/routes/Profile/Favorites/Favorites.tsx
@@ -119,7 +119,6 @@ const Favorites = () => {
           </SimpleNavigationList>
           <SimpleNavigationList title={t('content')} backgroundClassName="bg-bg-gray-2" collapsible>
             <div className="flex flex-col gap-4 hyphens-auto">
-              <div className="text-todo">TODO</div>
               <Checkbox
                 ariaLabel={jobFilterText}
                 checked={isFilterChecked('TYOMAHDOLLISUUS')}

diff --git a/src/routes/Tool/Interests.tsx b/src/routes/Tool/Interests.tsx
@@ -8,6 +8,7 @@ import {
   OsaamisSuosittelija,
 } from '@/components';
 import { OsaaminenLahdeTyyppi } from '@/components/OsaamisSuosittelija/OsaamisSuosittelija';
+import { useEnvironment } from '@/hooks/useEnvironment';
 import { useToolStore } from '@/stores/useToolStore';
 import { removeDuplicates } from '@/utils';
 import { Accordion, Button, ConfirmDialog } from '@jod/design-system';
@@ -25,6 +26,7 @@ const Interests = () => {
     t,
     i18n: { language },
   } = useTranslation();
+  const { isDev } = useEnvironment();
   const toolStore = useToolStore();
   const { isLoggedIn } = useOutletContext<ToolLoaderData>();
   const data = useRouteLoaderData('root') as components['schemas']['YksiloCsrfDto'] | null;
@@ -113,18 +115,22 @@ const Interests = () => {
             icon={<MdOutlineInterests size={24} color="#006DB3" />}
             title={t('profile.interests.title')}
           />
-          <HelpingToolLinkItem
-            icon={<MdOutlineQuiz size={24} color="#006DB3" />}
-            title={t('tool.my-own-data.interests.riasec-test')}
-            /* eslint-disable-next-line sonarjs/no-unstable-nested-components */
-            component={({ children }) => <div className="bg-todo">{children}</div>}
-          />
-          <HelpingToolLinkItem
-            icon={<MdOutlineInterests size={24} color="#AD4298" />}
-            title={t('tool.my-own-data.interests.interest-barometer')}
-            /* eslint-disable-next-line sonarjs/no-unstable-nested-components */
-            component={({ children }) => <div className="bg-todo">{children}</div>}
-          />
+          {isDev && (
+            <HelpingToolLinkItem
+              icon={<MdOutlineQuiz size={24} color="#006DB3" />}
+              title={t('tool.my-own-data.interests.riasec-test')}
+              /* eslint-disable-next-line sonarjs/no-unstable-nested-components */
+              component={({ children }) => <div className="bg-todo">{children}</div>}
+            />
+          )}
+          {isDev && (
+            <HelpingToolLinkItem
+              icon={<MdOutlineInterests size={24} color="#AD4298" />}
+              title={t('tool.my-own-data.interests.interest-barometer')}
+              /* eslint-disable-next-line sonarjs/no-unstable-nested-components */
+              component={({ children }) => <div className="bg-todo">{children}</div>}
+            />
+          )}
         </HelpingToolsContent>
       </Accordion>
     </>