Skip to content

Commit a3d951a

Browse files
SeboranSeboran
committed
feat: wip ajout templates dans appwrite
1 parent 0a91b7b commit a3d951a

File tree

8 files changed

+2183
-1667
lines changed

8 files changed

+2183
-1667
lines changed

‎actions/fetchTemplates.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use server';
2+
import { Client, Databases, Models, Query } from 'node-appwrite';
3+
import { TemplateInformations } from '../config/templates';
4+
5+
const APPWRITE_PROJECT_ID = process.env.APPWRITE_PROJECT_ID!;
6+
const APPWRITE_DATABASE_ID = process.env.APPWRITE_DATABASE_ID!;
7+
const APPWRITE_COLLECTION_ID = process.env.APPWRITE_COLLECTION_ID!;
8+
const APPWRITE_READ_TOKEN = process.env.APPWRITE_READ_TOKEN!;
9+
10+
const client = new Client()
11+
.setKey(APPWRITE_READ_TOKEN)
12+
.setEndpoint('https://cloud.appwrite.io/v1')
13+
.setProject(APPWRITE_PROJECT_ID);
14+
15+
const databases = new Databases(client);
16+
17+
export default async function fetchTemplates(): Promise<
18+
TemplateInformations[]
19+
> {
20+
const promise = await databases.listDocuments<
21+
Models.Document & Omit<TemplateInformations, 'eventId'> & { show: boolean }
22+
>(APPWRITE_DATABASE_ID, APPWRITE_COLLECTION_ID, [Query.equal('show', true)]);
23+
return promise.documents.map(
24+
({
25+
eventName,
26+
referenceImage,
27+
instructions,
28+
showPreview,
29+
demoMode,
30+
injectCode,
31+
$id,
32+
}) => ({
33+
eventId: $id,
34+
eventName,
35+
referenceImage,
36+
instructions,
37+
showPreview,
38+
demoMode,
39+
injectCode,
40+
})
41+
);
42+
}

‎app/page.tsx‎

Lines changed: 5 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,7 @@
1-
'use client';
1+
import fetchTemplates from '../actions/fetchTemplates';
2+
import TemplateForm from '../components/templates/TemplateForm';
23

3-
import { useForm } from 'react-hook-form';
4-
import { useRouter } from 'next/navigation';
5-
import { useEntryStore } from '../hooks/useEntryStore';
6-
import React, { useEffect, useState } from 'react';
7-
import { TemplateName, templatesDictionary } from '../config/templates';
8-
import Image from 'next/image';
9-
10-
import styles from '../styles/register.module.scss';
11-
import TemplatesList from '../components/templates/TeamplateOptions';
12-
13-
export default function Page() {
14-
const router = useRouter();
15-
const [selectedTemplate, setSelectedTemplate] = useState<TemplateName>(
16-
TemplateName.CITD
17-
);
18-
const { entry, updateFullName, updateId, updateIsLoading, updateTemplate } =
19-
useEntryStore();
20-
const { register, handleSubmit, formState } = useForm({
21-
defaultValues: { fullName: entry?.fullName, templateName: entry?.template },
22-
});
23-
24-
const onSubmit = async (data: { [x: string]: any }) => {
25-
updateIsLoading(true);
26-
updateFullName(data.fullName);
27-
updateTemplate(data.templateName);
28-
29-
// TODO : Create user in DB
30-
31-
updateId(0);
32-
updateIsLoading(false);
33-
34-
router.push('/editor');
35-
};
36-
37-
useEffect(() => {
38-
if (entry?.id) {
39-
router.push('/editor');
40-
}
41-
}, [router, entry?.id]);
42-
43-
return (
44-
<>
45-
<form onSubmit={handleSubmit(onSubmit)} className={styles.registerForm}>
46-
<h1>Welcome!</h1>
47-
<h3>Please state your name 👇🏼</h3>
48-
<input
49-
type='text'
50-
placeholder='Name'
51-
{...register('fullName', { required: true, max: 80, min: 5 })}
52-
className={formState.errors.fullName ? styles.isWizz : ''}
53-
/>
54-
55-
<label htmlFor='templateSelect'>Select a template:</label>
56-
<select
57-
id='templateSelect'
58-
value={selectedTemplate}
59-
{...register('templateName', {
60-
required: true,
61-
onChange: (e) => setSelectedTemplate(e.target.value),
62-
})}
63-
>
64-
<TemplatesList />
65-
</select>
66-
<Image
67-
priority
68-
src={templatesDictionary[selectedTemplate].referenceImage}
69-
alt='Image template reference'
70-
width={200}
71-
height={200}
72-
/>
73-
<input type='submit' className='button' />
74-
</form>
75-
</>
76-
);
4+
export default async function Page() {
5+
const templates = await fetchTemplates();
6+
return <TemplateForm templates={templates}></TemplateForm>;
777
}
78-

‎components/templates/TeamplateOptions.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎components/templates/TemplateForm.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
'use client';
2+
3+
import Image from 'next/image';
4+
import { useRouter } from 'next/navigation';
5+
import { useEffect, useState } from 'react';
6+
import { useForm } from 'react-hook-form';
7+
import { TemplateInformations } from '../../config/templates';
8+
import { useEntryStore } from '../../hooks/useEntryStore';
9+
10+
import styles from '../../styles/register.module.scss';
11+
import useSWR from 'swr';
12+
import fetchTemplates from '../../actions/fetchTemplates';
13+
14+
export default function TemplateForm({
15+
templates: newTemplates,
16+
}: {
17+
templates: TemplateInformations[];
18+
}) {
19+
const { data: templates = newTemplates } = useSWR(
20+
'templates',
21+
async () => {
22+
return await fetchTemplates();
23+
},
24+
{
25+
refreshInterval: 2000,
26+
}
27+
);
28+
29+
const router = useRouter();
30+
const [selectedTemplateIndex, setSelectedTemplateIndex] = useState<number>(0);
31+
const { entry, updateFullName, updateId, updateIsLoading, updateTemplate } =
32+
useEntryStore();
33+
const { register, handleSubmit, formState } = useForm({
34+
defaultValues: { fullName: entry?.fullName, templateName: entry?.template },
35+
});
36+
useEffect(() => {
37+
if (entry?.id) {
38+
router.push('/editor');
39+
}
40+
}, [router, entry?.id]);
41+
42+
const onSubmit = async (data: { [x: string]: any }) => {
43+
updateIsLoading(true);
44+
updateFullName(data.fullName);
45+
updateTemplate(data.templateName);
46+
47+
// TODO : Create user in DB
48+
49+
updateId(0);
50+
updateIsLoading(false);
51+
52+
router.push('/editor');
53+
};
54+
55+
return (
56+
<>
57+
<form onSubmit={handleSubmit(onSubmit)} className={styles.registerForm}>
58+
<h1>Welcome!</h1>
59+
<h3>Please state your name 👇🏼</h3>
60+
<input
61+
type='text'
62+
placeholder='Name'
63+
{...register('fullName', { required: true, max: 80, min: 5 })}
64+
className={formState.errors.fullName ? styles.isWizz : ''}
65+
/>
66+
67+
{templates.length === 0 ? (
68+
<>Please wait...</>
69+
) : (
70+
<>
71+
<label htmlFor='templateSelect'>Select a template:</label>
72+
<select
73+
id='templateSelect'
74+
value={selectedTemplateIndex}
75+
{...register('templateName', {
76+
required: true,
77+
onChange: (e) => setSelectedTemplateIndex(e.target.value),
78+
})}
79+
>
80+
{templates.map((value, index) => (
81+
<option key={value.eventId} value={index}>
82+
{value.eventName}
83+
</option>
84+
))}
85+
</select>
86+
{templates[selectedTemplateIndex] && (
87+
<Image
88+
priority
89+
src={templates[selectedTemplateIndex].referenceImage}
90+
alt='Image template reference'
91+
width={200}
92+
height={200}
93+
/>
94+
)}
95+
<input type='submit' className='button' />
96+
</>
97+
)}
98+
</form>
99+
</>
100+
);
101+
}

‎config/templates.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {CityTemplate} from "./city.template";
1717
import {CitdTemplate} from "./citd.template";
1818

1919
export interface TemplateInformations {
20-
eventId: number;
20+
eventId: number | string;
2121
eventName: string;
2222
referenceImage: string;
2323
instructions: string;

‎hooks/useTemplates.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@
1212
},
1313
"dependencies": {
1414
"ace-builds": "1.32.7",
15+
"appwrite": "14.0.1",
1516
"classnames": "2.5.1",
1617
"framer-motion": "11.0.8",
1718
"next": "14.1.2",
19+
"node-appwrite": "^14.1.0",
1820
"query-string": "7.1.1",
1921
"react": "18.2.0",
2022
"react-ace": "10.1.0",

0 commit comments

Comments
 (0)