refactor: moves template options in custom hook and template option

Author: Seboran

app/page.tsx

@@ -4,10 +4,11 @@ import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
 import { useEntryStore } from '../hooks/useEntryStore';
 import React, { useEffect, useState } from 'react';
-import { TemplateName, templatesDictionary } from "../config/templates";
+import { TemplateName, templatesDictionary } from '../config/templates';
 import Image from 'next/image';
 
 import styles from '../styles/register.module.scss';
+import TemplatesList from '../components/templates/TeamplateOptions';
 
 export default function Page() {
   const router = useRouter();
@@ -60,14 +61,7 @@ export default function Page() {
             onChange: (e) => setSelectedTemplate(e.target.value),
           })}
         >
-          {Object.keys(TemplateName).map((template) => (
-            <option
-              key={template}
-              value={TemplateName[template as keyof typeof TemplateName]}
-            >
-              {template}
-            </option>
-          ))}
+          <TemplatesList />
         </select>
         <Image
           priority
@@ -81,3 +75,4 @@ export default function Page() {
     </>
   );
 }
+

components/templates/TeamplateOptions.tsx

@@ -0,0 +1,14 @@
+import useTemplates from '../../hooks/useTemplates';
+
+export default function TemplatesList(): React.ReactNode {
+  const { templates } = useTemplates();
+  return (
+    <>
+      {templates.map(({ name, value }) => (
+        <option key={name} value={value}>
+          {name}
+        </option>
+      ))}
+    </>
+  );
+}

hooks/useTemplates.ts

@@ -0,0 +1,17 @@
+import { TemplateName } from '../config/templates';
+
+interface UseTemplateList {
+  templates: {
+    name: string;
+    value: TemplateName;
+  }[];
+}
+
+export default function useTemplates(): UseTemplateList {
+  return {
+    templates: Object.entries(TemplateName).map(([template, value]) => ({
+      name: template,
+      value,
+    })),
+  };
+}