chore: migrate remaining settings (#799)

* chore: migrate remaining settings

---------

Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com>

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -0,0 +1,95 @@
+import { ChangeEvent, useRef, useState } from 'react';
+import { Button, Input } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+
+import { uploadProjectFile } from '../../../../common/api/db';
+import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
+import { validateProjectFile } from '../../../../common/utils/uploadUtils';
+import * as Panel from '../PanelUtils';
+
+import ProjectCreateForm from './ProjectCreateForm';
+import ProjectList from './ProjectList';
+
+import style from './ProjectPanel.module.scss';
+
+export default function ManageProjects() {
+  const [isCreatingProject, setIsCreatingProject] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState<'import' | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleToggleCreate = () => {
+    setIsCreatingProject((prev) => !prev);
+  };
+
+  const handleSelectFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target?.files?.[0];
+    if (!selectedFile) {
+      return;
+    }
+
+    setLoading('import');
+
+    try {
+      validateProjectFile(selectedFile);
+      await uploadProjectFile(selectedFile);
+    } catch (error) {
+      const errorMessage = maybeAxiosError(error);
+      setError(`Error uploading file: ${errorMessage}`);
+    } finally {
+      invalidateAllCaches();
+    }
+
+    setLoading(null);
+  };
+
+  const handleCloseForm = () => {
+    setIsCreatingProject(false);
+  };
+  return (
+    <Panel.Section>
+      <Input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type='file'
+        onChange={handleImport}
+        accept='.json'
+        data-testid='file-input'
+      />
+      <Panel.Card>
+        <Panel.SubHeader>
+          Manage projects
+          <div className={style.headerButtons}>
+            <Button
+              variant='ontime-subtle'
+              onClick={handleSelectFile}
+              size='sm'
+              isDisabled={Boolean(loading) || isCreatingProject}
+              isLoading={loading === 'import'}
+            >
+              Import
+            </Button>
+            <Button
+              variant='ontime-subtle'
+              onClick={handleToggleCreate}
+              size='sm'
+              isDisabled={Boolean(loading) || isCreatingProject}
+              rightIcon={<IoAdd />}
+            >
+              Add
+            </Button>
+          </div>
+        </Panel.SubHeader>
+        {error && <Panel.Error>{error}</Panel.Error>}
+        <Panel.Divider />
+        {isCreatingProject && <ProjectCreateForm onClose={handleCloseForm} />}
+        <ProjectList />
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -0,0 +1,155 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Input, Textarea } from '@chakra-ui/react';
+import { type ProjectData } from 'ontime-types';
+
+import { postProjectData } from '../../../../common/api/project';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import useProjectData from '../../../../common/hooks-query/useProjectData';
+import * as Panel from '../PanelUtils';
+
+import style from './ProjectPanel.module.scss';
+
+export default function ProjectData() {
+  const { data, refetch } = useProjectData();
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, isValid, isDirty },
+    setError,
+  } = useForm({
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  // reset form values if data changes
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const onSubmit = async (formData: ProjectData) => {
+    try {
+      await postProjectData(formData);
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('root', { message });
+    } finally {
+      await refetch();
+    }
+  };
+
+  const onReset = () => {
+    reset(data);
+  };
+  return (
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
+      <Panel.Card>
+        <Panel.SubHeader>
+          Project Data
+          <div className={style.headerButtons}>
+            <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
+              Revert to saved
+            </Button>
+            <Button
+              variant='ontime-filled'
+              size='sm'
+              type='submit'
+              isDisabled={!isDirty || !isValid}
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+          </div>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <div className={style.createFormInputField}>
+            <label>
+              Project title
+              <Input
+                variant='ontime-filled'
+                size='sm'
+                maxLength={50}
+                placeholder='Your project name'
+                autoComplete='off'
+                {...register('title')}
+              />
+            </label>
+          </div>
+          <div className={style.createFormInputField}>
+            <label>
+              Project description
+              <Input
+                variant='ontime-filled'
+                size='sm'
+                maxLength={100}
+                placeholder='Euro Love, Malmö 2024'
+                autoComplete='off'
+                {...register('description')}
+              />
+            </label>
+          </div>
+          <div className={style.createFormInputField}>
+            <label>
+              Public info
+              <Textarea
+                variant='ontime-filled'
+                size='sm'
+                maxLength={150}
+                placeholder='Shows always start ontime'
+                autoComplete='off'
+                resize='none'
+                {...register('publicInfo')}
+              />
+            </label>
+          </div>
+          <div className={style.createFormInputField}>
+            <label>
+              Public QR code URL
+              <Input
+                variant='ontime-filled'
+                size='sm'
+                placeholder='www.getontime.no'
+                autoComplete='off'
+                {...register('publicUrl')}
+              />
+            </label>
+          </div>
+          <div className={style.createFormInputField}>
+            <label>
+              Backstage info
+              <Textarea
+                variant='ontime-filled'
+                size='sm'
+                maxLength={150}
+                placeholder='Wi-Fi password: 1234'
+                autoComplete='off'
+                resize='none'
+                {...register('backstageInfo')}
+              />
+            </label>
+          </div>
+          <div className={style.createFormInputField}>
+            <label>
+              Backstage QR code URL
+              <Input
+                variant='ontime-filled'
+                size='sm'
+                placeholder='www.ontime.gitbook.io'
+                autoComplete='off'
+                {...register('backstageUrl')}
+              />
+            </label>
+          </div>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.tsx

@@ -1,98 +1,14 @@
-import { ChangeEvent, useRef, useState } from 'react';
-import { Button, Input } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
-
-import { uploadProjectFile } from '../../../../common/api/db';
-import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
-import { validateProjectFile } from '../../../../common/utils/uploadUtils';
 import * as Panel from '../PanelUtils';
 
-import ProjectCreateForm from './ProjectCreateForm';
-import ProjectList from './ProjectList';
-
-import style from './ProjectPanel.module.scss';
+import ManageProjects from './ManageProjects';
+import ProjectData from './ProjectData';
 
 export default function ProjectPanel() {
-  const [isCreatingProject, setIsCreatingProject] = useState(false);
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState<'import' | null>(null);
-
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleToggleCreate = () => {
-    setIsCreatingProject((prev) => !prev);
-  };
-
-  const handleSelectFile = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target?.files?.[0];
-    if (!selectedFile) {
-      return;
-    }
-
-    setLoading('import');
-
-    try {
-      validateProjectFile(selectedFile);
-      await uploadProjectFile(selectedFile);
-    } catch (error) {
-      const errorMessage = maybeAxiosError(error);
-      setError(`Error uploading file: ${errorMessage}`);
-    } finally {
-      invalidateAllCaches();
-    }
-
-    setLoading(null);
-  };
-
-  const handleCloseForm = () => {
-    setIsCreatingProject(false);
-  };
-
   return (
     <>
       <Panel.Header>Project</Panel.Header>
-      <Input
-        ref={fileInputRef}
-        style={{ display: 'none' }}
-        type='file'
-        onChange={handleImport}
-        accept='.json'
-        data-testid='file-input'
-      />
-      <Panel.Section>
-        <Panel.Card>
-          <Panel.SubHeader>
-            Manage projects
-            <div className={style.headerButtons}>
-              <Button
-                variant='ontime-subtle'
-                onClick={handleSelectFile}
-                size='sm'
-                isDisabled={Boolean(loading) || isCreatingProject}
-                isLoading={loading === 'import'}
-              >
-                Import
-              </Button>
-              <Button
-                variant='ontime-subtle'
-                onClick={handleToggleCreate}
-                size='sm'
-                isDisabled={Boolean(loading) || isCreatingProject}
-                rightIcon={<IoAdd />}
-              >
-                Add
-              </Button>
-            </div>
-          </Panel.SubHeader>
-          {error && <Panel.Error>{error}</Panel.Error>}
-          {isCreatingProject && <ProjectCreateForm onClose={handleCloseForm} />}
-          <ProjectList />
-        </Panel.Card>
-      </Panel.Section>
+      <ProjectData />
+      <ManageProjects />
     </>
   );
 }