From 26afb67bc86e6cbe3ad39edf352d68f98317fb9d Mon Sep 17 00:00:00 2001 From: Fredrik Monsen Date: Fri, 10 Jan 2025 10:09:26 +0100 Subject: [PATCH] Allow zero contact information --- src/app/[id]/page.tsx | 14 ++++------ src/app/globals.css | 2 +- src/components/ContactInformation.tsx | 4 +-- src/components/ContactInformationForm.tsx | 34 ++++------------------- src/components/ReleasePattern.tsx | 2 +- 5 files changed, 14 insertions(+), 42 deletions(-) diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx index d911d1b..de942da 100644 --- 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 index c5ccefa..0341154 100644 --- 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 index 9291afb..192087e 100644 --- a/src/components/ContactInformation.tsx +++ b/src/components/ContactInformation.tsx @@ -28,7 +28,7 @@ const ContactInformation = (props: ContactInformationProps) => { )} - {phoneNumbers && phoneNumbers.length > 0 && ( + {phoneNumbers && phoneNumbers.length > 0 && phoneNumbers[0].contact_value !== '' && (

Telefonnummer

@@ -42,7 +42,7 @@ const ContactInformation = (props: ContactInformationProps) => {

)} - {emails && emails.length > 0 && ( + {emails && emails.length > 0 && emails[0].contact_value !== '' && (

{emails.length > 1 ? 'E-postadresser' : 'E-postadresse'}

diff --git a/src/components/ContactInformationForm.tsx b/src/components/ContactInformationForm.tsx index d421d6d..56af839 100644 --- 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 = ({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 (

Kontaktinformasjon

@@ -82,10 +62,8 @@ const ContactInformationForm: FC = ({values, handleChan type="button" className="row-action-button-style" onClick={() => handleRemove(values, index)} - disabled={phoneRemoveButtonShouldBeDisabled()} > - +
@@ -97,7 +75,7 @@ const ContactInformationForm: FC = ({values, handleChan className='row-action-button-style text-gray-700' onClick={() => handleAdd(values, 'phone')} > - Legg til telefon + + Legg til telefon )} @@ -125,10 +103,8 @@ const ContactInformationForm: FC = ({values, handleChan type="button" className="row-action-button-style" onClick={() => handleRemove(values, index)} - disabled={emailRemoveButtonShouldBeDisabled()} > - + @@ -140,7 +116,7 @@ const ContactInformationForm: FC = ({values, handleChan className='row-action-button-style text-gray-700' onClick={() => handleAdd(values, 'email')} > - Legg til e-post + + Legg til e-post )} diff --git a/src/components/ReleasePattern.tsx b/src/components/ReleasePattern.tsx index 60bc07a..9ba4458 100644 --- 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 ( -
+

Utgivelsesmønster: