Feature/Move titles to navigation

locales/en/common.json

@@ -4,7 +4,13 @@
     "mySurveysButton": "My Surveys",
     "settingsButton": "Settings",
     "signOutButton": "Sign out",
-    "signInButton": "Sign in"
+    "signInButton": "Sign in",
+
+    "pageTitles": {
+      "createSurvey": "Create new survey",
+      "editSurvey": "Edit survey",
+      "mySurveys": "My Surveys"
+    }
   },
   "coping": {
     "copyingSucces": "Copied to clipboard",

src/features/application/components/MainSection.tsx

@@ -30,7 +30,9 @@ export default function MainSection({
           reversed ? 'lg:text-right' : 'lg:text-left'
         )}
       >
-        <h2 className="mb-2 text-lg font-semibold">{title}</h2>
+        <h2 className="mb-2 text-lg font-semibold text-secondary-800">
+          {title}
+        </h2>
         <p className="text-md">{description}</p>
       </div>
       <Image

src/features/application/manager.ts

@@ -5,12 +5,14 @@ import { User } from '@prisma/client';
 import data from '@emoji-mart/data/sets/14/apple.json';
 import { init as emojisInit } from 'emoji-mart';
 import { EMOJI_STYLE, customEmojisData } from 'shared/constants/emojisConfig';
+import { Page } from 'features/application/types/Page';
 
 export const useApplicationManager = () => {
   const [loading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
   const [user, setUser] = useState<User>();
   const [isBrowser, setIsBrowser] = useState(false);
+  const [activePage, setActivePage] = useState<Page>();
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -37,6 +39,8 @@ export const useApplicationManager = () => {
     loading,
     error,
     isBrowser,
+    activePage,
+    setActivePage,
   };
 };
 

src/features/application/types/Page.ts

@@ -0,0 +1,7 @@
+export enum Page {
+  HOME = 'HOME',
+  CREATE_SURVEY = 'CREATE_SURVEY',
+  EDIT_SURVEY = 'EDIT_SURVEY',
+  SURVEYS_LIST = 'SURVEYS_LIST',
+  SURVEYS_RESULTS = 'SURVEYS_RESULTS',
+}

src/features/surveys/features/SurveyCreator/SurveyCreator.tsx

@@ -1,8 +1,4 @@
-import useTranslation from 'next-translate/useTranslation';
-
 import React from 'react';
-import Header from 'shared/components/Header/Header';
-import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
 import TitleAndConfigSection from 'features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection';
 import QuestionsSection from 'features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection';
 import ActionButtons from 'features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons';
@@ -11,10 +7,6 @@ import { usePreviewPanelContext } from 'features/surveys/features/SurveyCreator/
 import PreviewPanel from 'features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel';
 
 export default function SurveyCreator() {
-  const { t } = useTranslation('surveyCreate');
-
-  const { isEditMode } = useSurveyCreatorContext();
-
   const { isPanelOpened } = usePreviewPanelContext();
 
   return (
@@ -26,7 +18,6 @@ export default function SurveyCreator() {
         )}
       >
         <div className="mx-auto max-w-[58rem] px-6 xl:px-10">
-          <Header>{isEditMode ? t('editHeading') : t('heading')}</Header>
           <TitleAndConfigSection />
           <QuestionsSection />
           <ActionButtons />

src/features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection.tsx

@@ -33,6 +33,7 @@ export default function TitleAndConfigSection() {
       <div className="flex flex-col gap-x-2 sm:flex-row">
         <div className="w-full">
           <Input
+            className="mt-0"
             name="survey-title"
             placeholder={t('surveyTitlePlaceholder')}
             value={title}
@@ -42,7 +43,7 @@ export default function TitleAndConfigSection() {
           />
         </div>
 
-        <div className="flex gap-2 sm:mt-2">
+        <div className="flex gap-2">
           <Button
             className="h-[42px] flex-grow whitespace-nowrap"
             variant={ButtonVariant.PRIMARY}

src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.test.ts → src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.test.tsx

@@ -2,6 +2,9 @@ import { useCreateSurveyManager } from 'features/surveys/features/SurveyCreator/
 import { v4 } from 'uuid';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { defaultQuestions } from 'shared/constants/surveysConfig';
+import { useApplicationManager } from 'features/application/manager';
+import { ApplicationContext } from 'features/application/context';
+import { PropsWithChildren } from 'react';
 
 jest.mock('next/router', () => require('next-router-mock'));
 
@@ -10,7 +13,19 @@ const NEW_QUESTION_TITLE = 'new question';
 const NEW_SURVEY_TITLE = 'new survey title';
 
 const setUp = () => {
-  const { result } = renderHook(() => useCreateSurveyManager());
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    const manager = useApplicationManager();
+
+    return (
+      <ApplicationContext.Provider value={manager}>
+        {children}
+      </ApplicationContext.Provider>
+    );
+  };
+
+  const { result } = renderHook(() => useCreateSurveyManager(), {
+    wrapper: Wrapper,
+  });
 
   act(() => {
     result.current.addQuestion({

src/features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts

@@ -12,6 +12,8 @@ import { LogicPath } from '@prisma/client';
 import { DropResult } from 'react-beautiful-dnd';
 import { CreateEditSurveyPayload } from 'pages/api/survey';
 import { QuestionWithLogicPath } from 'types/QuestionWithLogicPath';
+import { useApplicationContext } from 'features/application/context';
+import { Page } from 'features/application/types/Page';
 
 export interface DraftQuestion {
   draftId: string;
@@ -32,8 +34,9 @@ export interface SurveyOptions {
 }
 
 export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
-  const [isEditMode] = useState(!!initialData);
+  const { setActivePage } = useApplicationContext();
 
+  const [isEditMode] = useState(!!initialData);
   const [title, setTitle] = useState(initialData?.title ?? 'My survey');
 
   const mapQuestionsWithExpanded = (
@@ -79,15 +82,23 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
   };
 
   useEffect(() => {
+    setActivePage(isEditMode ? Page.EDIT_SURVEY : Page.CREATE_SURVEY);
     const draftSurvey = sessionStorage.getItem(DRAFT_SURVEY_SESSION_STORAGE);
-    if (!draftSurvey) return;
 
-    const { title, questions, surveyOptions } = JSON.parse(draftSurvey);
+    if (draftSurvey) {
+      const { title, questions, surveyOptions } = JSON.parse(draftSurvey);
 
-    setTitle(title);
-    setQuestions(questions);
-    setSurveyOptions(surveyOptions);
-    sessionStorage.removeItem(DRAFT_SURVEY_SESSION_STORAGE);
+      setTitle(title);
+      setQuestions(questions);
+      setSurveyOptions(surveyOptions);
+      sessionStorage.removeItem(DRAFT_SURVEY_SESSION_STORAGE);
+    }
+
+    return () => {
+      console.log('clean');
+      setActivePage(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const updateSurveyOptions = (

src/features/surveys/features/SurveyList/SurveyList.tsx

@@ -5,25 +5,36 @@ import SurveyRow from 'features/surveys/features/SurveyList/components/SurveyRow
 import usePagination from 'features/surveys/hooks/usePagination';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
-import Header from 'shared/components/Header/Header';
 import { formatDateDistance } from 'shared/utilities/convertTime';
 import { getFetch } from '../../../../../lib/axiosConfig';
 import useTranslation from 'next-translate/useTranslation';
 import Image from 'next/image';
 import NoSurveys from '/public/images/no-surveys.svg';
+import { useApplicationContext } from 'features/application/context';
+import { Page } from 'features/application/types/Page';
 
 interface SurveyListProps {
   initialData: Survey[];
 }
 
 export default function SurveyList({ initialData }: SurveyListProps) {
+  const { setActivePage } = useApplicationContext();
   const { t } = useTranslation('surveys');
 
   const [surveysData, setSurveysData] = useState<Survey[]>(initialData);
 
   const { items, canGoNext, canGoPrev, goNext, goPrev, pageIndex } =
     usePagination<Survey>(surveysData ?? [], { size: 7 });
 
+  useEffect(() => {
+    setActivePage(Page.SURVEYS_LIST);
+
+    return () => {
+      setActivePage(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (items.length === 0) {
       goPrev();
@@ -38,8 +49,6 @@ export default function SurveyList({ initialData }: SurveyListProps) {
 
   return (
     <>
-      <Header>{t('heading')}</Header>
-
       <div className="flex flex-col items-center justify-center">
         {initialData &&
           (items?.length > 0 ? (

src/features/surveys/features/SurveyResults/managers/surveyResultsManager.ts

@@ -10,8 +10,12 @@ import { getFetch, patchFetch } from '../../../../../../lib/axiosConfig';
 import { SurveyWithAnswers } from 'types/SurveyWithAnswers';
 import { QuestionType } from '@prisma/client';
 import { MappedAnswers } from 'types/MappedAnswers';
+import { useApplicationContext } from 'features/application/context';
+import { Page } from 'features/application/types/Page';
 
 export const useSurveyResultsManager = (initialData: SurveyWithAnswers) => {
+  const { setActivePage } = useApplicationContext();
+
   const router = useRouter();
   const { surveyId } = router.query as { surveyId: string };
 
@@ -92,13 +96,18 @@ export const useSurveyResultsManager = (initialData: SurveyWithAnswers) => {
   }, [setIsStatusLoading, setSurveyData, surveyData, surveyId, t]);
 
   useEffect(() => {
+    setActivePage(Page.SURVEYS_RESULTS);
+
     if (!surveyId) {
       router.replace('/');
       return;
     }
 
     fillSurveyData(initialData);
 
+    return () => {
+      setActivePage(undefined);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/layout/Navigation/Navigation.tsx

@@ -13,9 +13,10 @@ import useTranslation from 'next-translate/useTranslation';
 import { signOut } from 'next-auth/react';
 import Avatar from 'shared/components/Avatar/Avatar';
 import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
+import { Page } from 'features/application/types/Page';
 
 function Navigation() {
-  const { user, loading } = useApplicationContext();
+  const { user, loading, activePage } = useApplicationContext();
 
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation('common');
@@ -25,16 +26,40 @@ function Navigation() {
     setIsOpen(false);
   };
 
+  const getPageTitle = () => {
+    switch (activePage) {
+      case Page.CREATE_SURVEY:
+        return t('navigation.pageTitles.createSurvey');
+      case Page.EDIT_SURVEY:
+        return t('navigation.pageTitles.editSurvey');
+      case Page.SURVEYS_LIST:
+        return t('navigation.pageTitles.mySurveys');
+      default:
+        return '';
+    }
+  };
+
+  const pageTitle = getPageTitle();
+
   return (
     <nav className="fixed left-0 top-0 z-40 flex h-[var(--navigation-height)] w-full items-center border-b bg-white/70 backdrop-blur-md">
       <GithubCorner />
 
       <div
         className={`flex grow ${
           user ? 'justify-between' : 'justify-center xsm:justify-between'
-        } items-center px-4 xsm:pl-20 md:pr-8`}
+        } items-center px-4 xsm:pl-20 md:pr-6`}
       >
-        <Logo />
+        <div className="flex items-center gap-6 text-secondary-800">
+          <Logo />
+
+          {pageTitle && (
+            <div className="hidden items-center gap-6 sm:flex">
+              <span>/</span>
+              <span className="font-semibold">{pageTitle}</span>
+            </div>
+          )}
+        </div>
         {!loading && user ? (
           <div className="flex md:space-x-4">
             <div className="none hidden space-x-4 lg:flex">
@@ -55,7 +80,7 @@ function Navigation() {
                   title="Expand menu"
                   className="flex w-full items-center justify-center rounded-md px-4 py-1 font-medium hover:bg-zinc-200"
                 >
-                  <p className="ml-2 mr-4 hidden items-center truncate sm:block">
+                  <p className="ml-2 mr-4 hidden items-center truncate text-secondary-800 sm:block">
                     {user.name}
                   </p>
                   <Avatar src={user.image} />

src/pages/index.tsx

@@ -32,11 +32,9 @@ function IndexPage({
         <meta name="description" content={t('content')} />
       </Head>
       <div className="pt-12 sm:pt-16">
-        <h1 className="leading-tighter mb-4 text-3xl font-extrabold tracking-tighter sm:text-4xl md:text-6xl">
+        <h1 className="leading-tighter mb-4 text-3xl font-extrabold tracking-tighter text-secondary-900 sm:text-4xl md:text-6xl">
           {t('firstPartHeading')}&nbsp;
-          <span className="bg-gradient-to-r from-indigo-600 to-indigo-100 bg-clip-text text-transparent">
-            {t('secondPartHeading')}
-          </span>
+          <span className="text-indigo-400">{t('secondPartHeading')}</span>
         </h1>
         <p className="text-md mx-auto mb-6 mt-4 max-w-lg text-zinc-600 sm:text-lg md:text-xl">
           {t('Description')}

src/styles/index.scss

@@ -77,10 +77,10 @@
     @apply text-zinc-900 bg-zinc-100 shadow-zinc-600/50 hover:bg-zinc-50 border;
   }
   .btn-outline {
-    @apply text-indigo-900 bg-zinc-50 border border-zinc-600/50 shadow-zinc-400/50 hover:bg-zinc-50;
+    @apply text-secondary-800 bg-zinc-50 border border-zinc-600/50 shadow-zinc-400/50 hover:bg-zinc-50;
   }
   .btn-outline-primary {
-    @apply text-indigo-900 bg-transparent border border-indigo-900 shadow-indigo-400/50 hover:bg-indigo-50;
+    @apply text-secondary-800 bg-transparent border border-secondary-800 shadow-indigo-400/50 hover:bg-secondary-50;
   }
   .btn-danger {
     @apply text-red-900 bg-red-200 shadow-red-600/50 hover:bg-red-300;
@@ -89,7 +89,7 @@
     @apply text-green-900 bg-green-200 shadow-green-600/50 hover:bg-green-300;
   }
   .btn-flat {
-    @apply text-indigo-900 bg-transparent hover:bg-indigo-100 border-none;
+    @apply text-secondary-800 bg-transparent hover:bg-secondary-100 border-none;
   }
 }
 

tailwind.config.js

@@ -13,6 +13,20 @@ module.exports = {
       screens: {
         xsm: '370px',
       },
+      colors: {
+        secondary: {
+          50: '#f7f7f8',
+          100: '#eeeef0',
+          200: '#dadadd',
+          300: '#b9b9c0',
+          400: '#93949d',
+          500: '#767781',
+          600: '#5f5f6a',
+          700: '#52525b',
+          800: '#434349',
+          900: '#3a3a40',
+        },
+      },
     },
   },
   plugins: [],