Allow zero contact information

NationalLibraryOfNorway · Jan 10, 2025 · 26afb67 · 26afb67
1 parent c9646b3
commit 26afb67
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 42 deletions.
diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {fetchNewspaperTitleFromCatalog, getLinkToNewspaperInCatalog} from '@/services/catalog.data';
 import {CatalogTitle} from '@/models/CatalogTitle';
 import {
@@ -112,9 +112,11 @@ export default function Page({params}: { params: { id: string } }) {
       });
   }, [params.id]);
 
+  const fetchTitleAndContactInformationRef = useRef(fetchTitleAndContactInformation);
+
   useEffect(() => {
-    fetchTitleAndContactInformation();
-  }, [params]);
+    fetchTitleAndContactInformationRef.current();
+  }, []);
 
   useEffect(() => {
     void getLinkToNewspaperInCatalog(params.id)
@@ -161,12 +163,7 @@ export default function Page({params}: { params: { id: string } }) {
     }
   };
 
-  useEffect(() => {
-    console.log('titleContact changed:', titleContact);
-  }, [titleContact]);
-
   const handleRemoveContact = (values: TitleContactInfo, index: number) => {
-    console.log('Removing contact', values);
     const newContacts = values?.contactInfo.filter((_, i) => i !== index);
     setTitleContact({
       ...values,
@@ -180,7 +177,6 @@ export default function Page({params}: { params: { id: string } }) {
   };
 
   const handleAddContact = (values: TitleContactInfo, type: 'email' | 'phone') => {
-    console.log('Adding contact', values);
     setTitleContact({
       ...values,
       contactInfo: [

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -21,7 +21,7 @@ input[type=number] {
 
 .row-action-button-style {
     @apply ml-2 hover:cursor-pointer;
-    @apply disabled:cursor-default disabled:border-gray-500;
+    @apply text-blue-500 font-bold;
 }
 
 .edit-button-style {

diff --git a/src/components/ContactInformation.tsx b/src/components/ContactInformation.tsx
@@ -28,7 +28,7 @@ const ContactInformation = (props: ContactInformationProps) => {
         </div>
       )}
 
-      {phoneNumbers && phoneNumbers.length > 0 && (
+      {phoneNumbers && phoneNumbers.length > 0 && phoneNumbers[0].contact_value !== '' && (
         <div className="self-start flex flex-row">
           <p className="group-subtitle-style">Telefonnummer</p>
           <p className="group-content-style ml-3">
@@ -42,7 +42,7 @@ const ContactInformation = (props: ContactInformationProps) => {
         </div>
       )}
 
-      {emails && emails.length > 0 && (
+      {emails && emails.length > 0 && emails[0].contact_value !== '' && (
         <div className="self-start flex flex-row">
           <p className="group-subtitle-style">{emails.length > 1 ? 'E-postadresser' : 'E-postadresse'}</p>
           <p className="group-content-style ml-3">

diff --git a/src/components/ContactInformationForm.tsx b/src/components/ContactInformationForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, {ChangeEvent, FC, useEffect} from 'react';
+import React, {ChangeEvent, FC} from 'react';
 import {Field, FieldArray} from 'formik';
 import {TitleContactInfo} from '@/models/TitleContactInfo';
 import {FaCircleMinus} from 'react-icons/fa6';
@@ -15,26 +15,6 @@ interface ContactInformationProps {
 
 const ContactInformationForm: FC<ContactInformationProps> = ({values, handleChange, handleBlur, handleAdd, handleRemove, className}) => {
 
-  useEffect(() => {
-    const hasEmail = values.contactInfo.some(contact => contact.contact_type === 'email');
-    const hasPhone = values.contactInfo.some(contact => contact.contact_type === 'phone');
-    if (!hasEmail) {
-      values.contactInfo.push({ id: '', title_id: values.title.id, contact_type: 'email', contact_value: '' });
-    }
-    if (!hasPhone) {
-      values.contactInfo.push({ id: '', title_id: values.title.id, contact_type: 'phone', contact_value: '' });
-    }
-
-  }, [values]);
-
-  const emailRemoveButtonShouldBeDisabled = (): boolean => {
-    return values.contactInfo.filter(c => c.contact_type === 'email').length <= 1;
-  };
-
-  const phoneRemoveButtonShouldBeDisabled = (): boolean => {
-    return values.contactInfo.filter(c => c.contact_type === 'phone').length <= 1;
-  };
-
   return (
     <div className={className}>
       <p className='group-title-style mb-2 text-left'>Kontaktinformasjon</p>
@@ -82,10 +62,8 @@ const ContactInformationForm: FC<ContactInformationProps> = ({values, handleChan
                         type="button"
                         className="row-action-button-style"
                         onClick={() => handleRemove(values, index)}
-                        disabled={phoneRemoveButtonShouldBeDisabled()}
                       >
-                        <FaCircleMinus size={24}
-                          className={phoneRemoveButtonShouldBeDisabled() ? 'text-gray-500' : 'text-blue-500'}/>
+                        <FaCircleMinus size={24} className='text-blue-500'/>
                       </button>
                     </div>
                   </div>
@@ -97,7 +75,7 @@ const ContactInformationForm: FC<ContactInformationProps> = ({values, handleChan
               className='row-action-button-style text-gray-700'
               onClick={() => handleAdd(values, 'phone')}
             >
-              Legg til telefon
+              + Legg til telefon
             </button>
           </>
         )}
@@ -125,10 +103,8 @@ const ContactInformationForm: FC<ContactInformationProps> = ({values, handleChan
                         type="button"
                         className="row-action-button-style"
                         onClick={() => handleRemove(values, index)}
-                        disabled={emailRemoveButtonShouldBeDisabled()}
                       >
-                        <FaCircleMinus size={24}
-                          className={emailRemoveButtonShouldBeDisabled() ? 'text-gray-500' : 'text-blue-500'}/>
+                        <FaCircleMinus size={24} className='text-blue-500'/>
                       </button>
                     </div>
                   </div>
@@ -140,7 +116,7 @@ const ContactInformationForm: FC<ContactInformationProps> = ({values, handleChan
               className='row-action-button-style text-gray-700'
               onClick={() => handleAdd(values, 'email')}
             >
-              Legg til e-post
+              + Legg til e-post
             </button>
           </>
         )}

diff --git a/src/components/ReleasePattern.tsx b/src/components/ReleasePattern.tsx
@@ -9,7 +9,7 @@ const ReleasePattern = (props: ReleasePatternProps) => {
   const daysOfWeek = ['Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag', 'Søndag'];
 
   return (
-    <div className="self-start mt-12">
+    <div className="self-start mt-5">
       <h2 className="group-title-style mb-2">Utgivelsesmønster:</h2>
       <table className="table-fixed">
         <tbody className="text-left">