feat: More UI improvements (TT-1707) (#49)

__tests__/components/BoxRegistrationModal.test.tsx

@@ -16,13 +16,13 @@ test('Box registration has field for box id', () => {
 });
 
 test('Box registration has calendar for start date', () => {
-  expect(screen.getAllByText('1.')).toBeTruthy();
-  expect(screen.getAllByText('2.')).toBeTruthy();
-  expect(screen.getByText('9.')).toBeTruthy();
-  expect(screen.getByText('16.')).toBeTruthy();
-  expect(screen.getByText('21.')).toBeTruthy();
-  expect(screen.getByText('22.')).toBeTruthy();
-  expect(screen.getAllByText('28.')).toBeTruthy();
+  expect(screen.getAllByText('1')).toBeTruthy();
+  expect(screen.getAllByText('2')).toBeTruthy();
+  expect(screen.getByText('9')).toBeTruthy();
+  expect(screen.getByText('16')).toBeTruthy();
+  expect(screen.getByText('21')).toBeTruthy();
+  expect(screen.getByText('22')).toBeTruthy();
+  expect(screen.getAllByText('28')).toBeTruthy();
 });
 
 test('Box registration saves on button press', async () => {

__tests__/setup.ts

@@ -45,6 +45,14 @@ beforeAll(() => {
     postNewIssuesForTitle: vi.fn(),
     deleteIssue: vi.fn()
   }));
+
+  const ResizeObserverMock = vi.fn(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+  window.scrollTo = vi.fn();
 });
 
 afterEach(() => {

package.json

@@ -19,7 +19,6 @@
     "next": "14.2.5",
     "prisma": "^5.17.0",
     "react": "18.2.0",
-    "react-calendar": "^5.0.0",
     "react-dom": "18.2.0",
     "react-icons": "^5.2.1"
   },

src/app/[id]/page.tsx

@@ -3,7 +3,13 @@
 import React, {useEffect, useState} from 'react';
 import {fetchNewspaperTitleFromCatalog} from '@/services/catalog.data';
 import {CatalogTitle} from '@/models/CatalogTitle';
-import {getBoxForTitle, getLocalTitle, putLocalTitle, updateNotesForTitle, updateShelfForTitle} from '@/services/local.data';
+import {
+  getBoxForTitle,
+  getLocalTitle,
+  putLocalTitle,
+  updateNotesForTitle,
+  updateShelfForTitle
+} from '@/services/local.data';
 import {box, title} from '@prisma/client';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {NotFoundError} from '@/models/Errors';
@@ -15,9 +21,12 @@ import EditTextInput from '@/components/EditTextInput';
 import ContactAndReleaseInfo from '@/components/ContactAndReleaseInfo';
 import IssueList from '@/components/IssueList';
 import ErrorModal from '@/components/ErrorModal';
+import WarningLabel from '@/components/WarningLabel';
+import {catalogDateStringToNorwegianDateString} from '@/utils/dateUtils';
 
 export default function Page({params}: { params: { id: string } }) {
   const [titleString, setTitleString] = useState<string>();
+  const [catalogTitle, setCatalogTitle] = useState<CatalogTitle>();
   const [titleFromDb, setTitleFromDb] = useState<title>();
   const [boxFromDb, setBoxFromDb] = useState<box>();
   const [titleFromDbNotFound, setTitleFromDbNotFound] = useState<boolean>(false);
@@ -35,6 +44,7 @@ export default function Page({params}: { params: { id: string } }) {
 
     void fetchNewspaperTitleFromCatalog(params.id)
       .then((data: CatalogTitle) => {
+        setCatalogTitle(data);
         setTitleString(data.name);
         document.title = titleString ?? 'Hugin';
       })
@@ -111,6 +121,12 @@ export default function Page({params}: { params: { id: string } }) {
                   <p className="group-title-style ml-auto"> Katalog ID: </p>
                   <p className="group-content-style ml-2 mr-auto">{params.id}</p>
                 </div>
+                {catalogTitle && catalogTitle.endDate && (
+                  <WarningLabel
+                    className="my-2 w-full"
+                    text={`Denne avisen ble avsluttet ${catalogDateStringToNorwegianDateString(catalogTitle.endDate)}`}
+                  />
+                )}
                 <div className='flex flex-row justify-between items-center mt-4'>
                   <EditTextInput
                     name='Hyllesignatur'
@@ -158,7 +174,7 @@ export default function Page({params}: { params: { id: string } }) {
             </div>
           </div>
 
-          <div className="flex flex-col">
+          <div className="flex flex-col w-96">
             <div className='items-start mt-16 w-72 mb-6'>
               {titleFromDb &&
                   <NotesComponent
@@ -188,7 +204,15 @@ export default function Page({params}: { params: { id: string } }) {
       {titleFromDbNotFound &&
           <>
             {titleString ? (
-              <h1 className="top-title-style">{titleString}</h1>
+              <div className='flex flex-col items-center'>
+                <h1 className="top-title-style">{titleString}</h1>
+                {catalogTitle && catalogTitle.endDate && (
+                  <WarningLabel
+                    className="mt-2"
+                    text={`Denne avisen ble avsluttet ${catalogDateStringToNorwegianDateString(catalogTitle.endDate)}`}
+                  />
+                )}
+              </div>
             ) : (
               <p>Henter tittel ...</p>
             )}

src/app/globals.css

@@ -51,7 +51,7 @@ input[type=number] {
 }
 
 .group-content-style {
-    @apply text-lg text-black;
+    @apply text-lg text-black text-left text-wrap break-all;
 }
 
 .group-subtitle-style {

src/app/layout.tsx

@@ -4,7 +4,7 @@ import {Providers} from '@/app/providers';
 import AppShell from '@/components/AppShell';
 import {Quicksand} from 'next/font/google';
 
-const customFont = Quicksand({ weight: ['500'], subsets: ['latin'] });
+const customFont = Quicksand({ weight: ['400'], subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Hugin'

src/components/BoxRegistrationModal.tsx

@@ -1,19 +1,18 @@
 import React, {FC, useState} from 'react';
-import {Field, Form, Formik, useField} from 'formik';
+import {Field, Form, Formik} from 'formik';
 import {getBoxById, postNewBoxForTitle, updateActiveBoxForTitle} from '@/services/local.data';
-import Calendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css';
 import {FaArrowAltCircleLeft} from 'react-icons/fa';
 import {FiSave} from 'react-icons/fi';
 import {Button} from '@nextui-org/button';
 import ErrorModal from '@/components/ErrorModal';
-import {Spinner} from '@nextui-org/react';
+import {Calendar, Spinner} from '@nextui-org/react';
 import {box} from '@prisma/client';
 import InfoModal from '@/components/InfoModal';
 import {AlreadyExistsError} from '@/models/Errors';
 import Link from 'next/link';
 import {fetchNewspaperTitleFromCatalog} from '@/services/catalog.data';
 import {CatalogTitle} from '@/models/CatalogTitle';
+import {dateToCalendarDate} from '@/utils/dateUtils';
 
 
 interface BoxRegistrationModalProps {
@@ -69,7 +68,7 @@ const BoxRegistrationModal: FC<BoxRegistrationModalProps> = (props: BoxRegistrat
             }}
           >
             {({
-              isSubmitting
+              isSubmitting, values, setFieldValue
             }) => (
               <Form>
                 <label className="block text-gray-700 text-lg font-bold mb-1" htmlFor="boxId">Eske id</label>
@@ -79,7 +78,11 @@ const BoxRegistrationModal: FC<BoxRegistrationModalProps> = (props: BoxRegistrat
                 <br/>
 
                 <label className="block text-gray-700 text-lg font-bold mb-1" htmlFor="startDate">Fra dato</label>
-                <CalendarField fieldName="startDate"/>
+                <Calendar
+                  aria-label='startDate'
+                  value={dateToCalendarDate(values.startDate)}
+                  onChange={val => void setFieldValue('startDate', val.toDate('UTC'))}
+                />
 
                 {isSubmitting ? (
                   <Spinner size='lg' className='py-3'/>
@@ -139,17 +142,3 @@ const BoxRegistrationModal: FC<BoxRegistrationModalProps> = (props: BoxRegistrat
 };
 
 export default BoxRegistrationModal;
-
-const CalendarField = (props: { fieldName: string }) => {
-  const [field, , {setValue}] = useField(props.fieldName);
-  return (
-    <Calendar
-      className="border mb-3 w-full py-2 px-3 text-gray-700 focus:outline-secondary-200"
-      {...field}
-      onChange={val => {
-        void setValue(val);
-      }}
-      locale='no-NB'
-    />
-  );
-};

src/components/IssueList.tsx

@@ -3,12 +3,12 @@ import React, {ChangeEvent, useCallback, useEffect, useState} from 'react';
 import {deleteIssue, getNewspapersForBoxOnTitle, postNewIssuesForTitle, putIssue} from '@/services/local.data';
 import {ErrorMessage, Field, FieldArray, Form, Formik, FormikErrors, FormikValues} from 'formik';
 import {FaSave, FaTrash} from 'react-icons/fa';
-import {Button, CalendarDate, DatePicker, Spinner, Switch, Table, Tooltip} from '@nextui-org/react';
+import {Button, DatePicker, Spinner, Switch, Table, Tooltip} from '@nextui-org/react';
 import {TableBody, TableCell, TableColumn, TableHeader, TableRow} from '@nextui-org/table';
 import ErrorModal from '@/components/ErrorModal';
 import {newNewspapersContainsDuplicateEditions, newspapersContainsEdition} from '@/utils/validationUtils';
-import {parseDate} from '@internationalized/date';
 import ConfirmationModal from '@/components/ConfirmationModal';
+import {dateToCalendarDate} from '@/utils/dateUtils';
 import {FiEdit} from 'react-icons/fi';
 import {ImCross} from 'react-icons/im';
 
@@ -174,11 +174,6 @@ export default function IssueList(props: {title: title; box: box}) {
     }
   }
 
-  function dateToCalendarDate(date: Date | null): CalendarDate {
-    const usedDate = date ? date : new Date();
-    return parseDate(new Date(usedDate).toISOString().split('T')[0]);
-  }
-
   function updateIssue(issue: newspaper) {
     setIssueBeingSaved(true);
     void putIssue(issue)