Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita3d951a

Browse files
committed
feat: wip ajout templates dans appwrite
1 parent0a91b7b commita3d951a

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+
constAPPWRITE_PROJECT_ID=process.env.APPWRITE_PROJECT_ID!;
6+
constAPPWRITE_DATABASE_ID=process.env.APPWRITE_DATABASE_ID!;
7+
constAPPWRITE_COLLECTION_ID=process.env.APPWRITE_COLLECTION_ID!;
8+
constAPPWRITE_READ_TOKEN=process.env.APPWRITE_READ_TOKEN!;
9+
10+
constclient=newClient()
11+
.setKey(APPWRITE_READ_TOKEN)
12+
.setEndpoint('https://cloud.appwrite.io/v1')
13+
.setProject(APPWRITE_PROJECT_ID);
14+
15+
constdatabases=newDatabases(client);
16+
17+
exportdefaultasyncfunctionfetchTemplates():Promise<
18+
TemplateInformations[]
19+
>{
20+
constpromise=awaitdatabases.listDocuments<
21+
Models.Document&Omit<TemplateInformations,'eventId'>&{show:boolean}
22+
>(APPWRITE_DATABASE_ID,APPWRITE_COLLECTION_ID,[Query.equal('show',true)]);
23+
returnpromise.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+
importfetchTemplatesfrom'../actions/fetchTemplates';
2+
importTemplateFormfrom'../components/templates/TemplateForm';
23

3-
import{useForm}from'react-hook-form';
4-
import{useRouter}from'next/navigation';
5-
import{useEntryStore}from'../hooks/useEntryStore';
6-
importReact,{useEffect,useState}from'react';
7-
import{TemplateName,templatesDictionary}from'../config/templates';
8-
importImagefrom'next/image';
9-
10-
importstylesfrom'../styles/register.module.scss';
11-
importTemplatesListfrom'../components/templates/TeamplateOptions';
12-
13-
exportdefaultfunctionPage(){
14-
constrouter=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-
constonSubmit=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-
<formonSubmit={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-
<labelhtmlFor='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-
<inputtype='submit'className='button'/>
74-
</form>
75-
</>
76-
);
4+
exportdefaultasyncfunctionPage(){
5+
consttemplates=awaitfetchTemplates();
6+
return<TemplateFormtemplates={templates}></TemplateForm>;
777
}
78-

‎components/templates/TeamplateOptions.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
'use client';
2+
3+
importImagefrom'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+
importstylesfrom'../../styles/register.module.scss';
11+
importuseSWRfrom'swr';
12+
importfetchTemplatesfrom'../../actions/fetchTemplates';
13+
14+
exportdefaultfunctionTemplateForm({
15+
templates:newTemplates,
16+
}:{
17+
templates:TemplateInformations[];
18+
}){
19+
const{data:templates=newTemplates}=useSWR(
20+
'templates',
21+
async()=>{
22+
returnawaitfetchTemplates();
23+
},
24+
{
25+
refreshInterval:2000,
26+
}
27+
);
28+
29+
constrouter=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+
constonSubmit=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+
<formonSubmit={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+
<labelhtmlFor='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+
<optionkey={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+
<inputtype='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
exportinterfaceTemplateInformations{
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)
[8]ページ先頭
©2009-2025 Movatter.jp