feat: wip ajout templates dans appwrite

actions/fetchTemplates.ts

@@ -0,0 +1,42 @@
+'use server';
+import { Client, Databases, Models, Query } from 'node-appwrite';
+import { TemplateInformations } from '../config/templates';
+
+const APPWRITE_PROJECT_ID = process.env.APPWRITE_PROJECT_ID!;
+const APPWRITE_DATABASE_ID = process.env.APPWRITE_DATABASE_ID!;
+const APPWRITE_COLLECTION_ID = process.env.APPWRITE_COLLECTION_ID!;
+const APPWRITE_READ_TOKEN = process.env.APPWRITE_READ_TOKEN!;
+
+const client = new Client()
+  .setKey(APPWRITE_READ_TOKEN)
+  .setEndpoint('https://cloud.appwrite.io/v1')
+  .setProject(APPWRITE_PROJECT_ID);
+
+const databases = new Databases(client);
+
+export default async function fetchTemplates(): Promise<
+  TemplateInformations[]
+> {
+  const promise = await databases.listDocuments<
+    Models.Document & Omit<TemplateInformations, 'eventId'> & { show: boolean }
+  >(APPWRITE_DATABASE_ID, APPWRITE_COLLECTION_ID, [Query.equal('show', true)]);
+  return promise.documents.map(
+    ({
+      eventName,
+      referenceImage,
+      instructions,
+      showPreview,
+      demoMode,
+      injectCode,
+      $id,
+    }) => ({
+      eventId: $id,
+      eventName,
+      referenceImage,
+      instructions,
+      showPreview,
+      demoMode,
+      injectCode,
+    })
+  );
+}

app/page.tsx

@@ -1,78 +1,7 @@
-'use client';
+import fetchTemplates from '../actions/fetchTemplates';
+import TemplateForm from '../components/templates/TemplateForm';
 
-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 Image from 'next/image';
-
-import styles from '../styles/register.module.scss';
-import TemplatesList from '../components/templates/TeamplateOptions';
-
-export default function Page() {
-  const router = useRouter();
-  const [selectedTemplate, setSelectedTemplate] = useState<TemplateName>(
-    TemplateName.CITD
-  );
-  const { entry, updateFullName, updateId, updateIsLoading, updateTemplate } =
-    useEntryStore();
-  const { register, handleSubmit, formState } = useForm({
-    defaultValues: { fullName: entry?.fullName, templateName: entry?.template },
-  });
-
-  const onSubmit = async (data: { [x: string]: any }) => {
-    updateIsLoading(true);
-    updateFullName(data.fullName);
-    updateTemplate(data.templateName);
-
-    // TODO : Create user in DB
-
-    updateId(0);
-    updateIsLoading(false);
-
-    router.push('/editor');
-  };
-
-  useEffect(() => {
-    if (entry?.id) {
-      router.push('/editor');
-    }
-  }, [router, entry?.id]);
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)} className={styles.registerForm}>
-        <h1>Welcome!</h1>
-        <h3>Please state your name 👇🏼</h3>
-        <input
-          type='text'
-          placeholder='Name'
-          {...register('fullName', { required: true, max: 80, min: 5 })}
-          className={formState.errors.fullName ? styles.isWizz : ''}
-        />
-
-        <label htmlFor='templateSelect'>Select a template:</label>
-        <select
-          id='templateSelect'
-          value={selectedTemplate}
-          {...register('templateName', {
-            required: true,
-            onChange: (e) => setSelectedTemplate(e.target.value),
-          })}
-        >
-          <TemplatesList />
-        </select>
-        <Image
-          priority
-          src={templatesDictionary[selectedTemplate].referenceImage}
-          alt='Image template reference'
-          width={200}
-          height={200}
-        />
-        <input type='submit' className='button' />
-      </form>
-    </>
-  );
+export default async function Page() {
+  const templates = await fetchTemplates();
+  return <TemplateForm templates={templates}></TemplateForm>;
 }
-

components/templates/TemplateForm.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+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,
+}: {
+  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 } =
+    useEntryStore();
+  const { register, handleSubmit, formState } = useForm({
+    defaultValues: { fullName: entry?.fullName, templateName: entry?.template },
+  });
+  useEffect(() => {
+    if (entry?.id) {
+      router.push('/editor');
+    }
+  }, [router, entry?.id]);
+
+  const onSubmit = async (data: { [x: string]: any }) => {
+    updateIsLoading(true);
+    updateFullName(data.fullName);
+    updateTemplate(data.templateName);
+
+    // TODO : Create user in DB
+
+    updateId(0);
+    updateIsLoading(false);
+
+    router.push('/editor');
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.registerForm}>
+        <h1>Welcome!</h1>
+        <h3>Please state your name 👇🏼</h3>
+        <input
+          type='text'
+          placeholder='Name'
+          {...register('fullName', { required: true, max: 80, min: 5 })}
+          className={formState.errors.fullName ? styles.isWizz : ''}
+        />
+
+        {templates.length === 0 ? (
+          <>Please wait...</>
+        ) : (
+          <>
+            <label htmlFor='templateSelect'>Select a template:</label>
+            <select
+              id='templateSelect'
+              value={selectedTemplateIndex}
+              {...register('templateName', {
+                required: true,
+                onChange: (e) => setSelectedTemplateIndex(e.target.value),
+              })}
+            >
+              {templates.map((value, index) => (
+                <option key={value.eventId} value={index}>
+                  {value.eventName}
+                </option>
+              ))}
+            </select>
+            {templates[selectedTemplateIndex] && (
+              <Image
+                priority
+                src={templates[selectedTemplateIndex].referenceImage}
+                alt='Image template reference'
+                width={200}
+                height={200}
+              />
+            )}
+            <input type='submit' className='button' />
+          </>
+        )}
+      </form>
+    </>
+  );
+}

components/templates/TemplateOptions.tsx

@@ -0,0 +1,15 @@
+'use server';
+import fetchTemplates from '../../actions/fetchTemplates';
+
+export default async function TemplateOptions() {
+  const templates = await fetchTemplates();
+  return (
+    <>
+      {templates.map(({ name, value }) => (
+        <option key={name} value={value}>
+          {name}
+        </option>
+      ))}
+    </>
+  );
+}

config/templates.ts

@@ -17,7 +17,7 @@ import {CityTemplate} from "./city.template";
 import {CitdTemplate} from "./citd.template";
 
 export interface TemplateInformations {
-  eventId: number;
+  eventId: number | string;
   eventName: string;
   referenceImage: string;
   instructions: string;

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "ace-builds": "1.32.7",
+    "appwrite": "14.0.1",
     "classnames": "2.5.1",
     "framer-motion": "11.0.8",
     "next": "14.1.2",
+    "node-appwrite": "^14.1.0",
     "query-string": "7.1.1",
     "react": "18.2.0",
     "react-ace": "10.1.0",