refactor: split in two views, compete link and default

Author: Seboran

app/compete/page.tsx

@@ -0,0 +1,7 @@
+import fetchTemplates from '../../actions/fetchTemplates';
+import StartForm from '../../components/forms/StartForm';
+
+export default async function Page() {
+  const templates = await fetchTemplates();
+  return <StartForm templates={templates}></StartForm>;
+}

app/page.tsx

@@ -1,7 +1,12 @@
-import fetchTemplates from '../actions/fetchTemplates';
-import TemplateForm from '../components/templates/TemplateForm';
+import StartForm from '../components/forms/StartForm';
+import { TemplateInformations, templatesDictionary } from '../config/templates';
 
 export default async function Page() {
-  const templates = await fetchTemplates();
-  return <TemplateForm templates={templates}></TemplateForm>;
+  const templates: TemplateInformations[] = Object.entries(
+    templatesDictionary
+  ).map(([key, value]) => ({
+    ...value,
+    eventName: key,
+  }));
+  return <StartForm templates={templates}></StartForm>;
 }

components/forms/CompetitionStartingForm.tsx

@@ -0,0 +1,14 @@
+import { TemplateInformations } from '../../config/templates';
+
+import { useFetchTemplates } from '../../hooks/useFetchTemplates';
+import StartForm from './StartForm';
+
+export default function CompetitionStartingForm({
+  templates: newTemplates,
+}: {
+  templates: TemplateInformations[];
+}) {
+  const { templates = newTemplates } = useFetchTemplates();
+
+  return <StartForm templates={templates} />;
+}

components/templates/TemplateForm.tsx components/forms/StartForm.tsx

@@ -8,24 +8,12 @@ import { TemplateInformations } from '../../config/templates';
 import { useEntryStore } from '../../hooks/useEntryStore';
 
 import styles from '../../styles/register.module.scss';
-import useSWR from 'swr';
-import fetchTemplates from '../../actions/fetchTemplates';
 
-export default function TemplateForm({
-  templates: newTemplates,
+export default function StartForm({
+  templates,
 }: {
   templates: TemplateInformations[];
 }) {
-  const { data: templates = newTemplates } = useSWR(
-    'templates',
-    async () => {
-      return await fetchTemplates();
-    },
-    {
-      refreshInterval: 2000,
-    }
-  );
-
   const router = useRouter();
   const [selectedTemplateIndex, setSelectedTemplateIndex] = useState<number>(0);
   const { entry, updateFullName, updateId, updateIsLoading, updateTemplate } =

hooks/useFetchTemplates.ts

@@ -0,0 +1,17 @@
+'use client';
+import useSWR from 'swr';
+import fetchTemplates from '../actions/fetchTemplates';
+
+export function useFetchTemplates() {
+  const { data: templates } = useSWR(
+    'templates',
+    async () => {
+      return await fetchTemplates();
+    },
+    {
+      refreshInterval: 2000,
+    }
+  );
+
+  return { templates };
+}