-
-
Notifications
You must be signed in to change notification settings - Fork 94
/
page.tsx
230 lines (221 loc) · 7.19 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
'use client'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { useRouter } from 'next/navigation'
import { AddSVG } from '@public/svg/shared'
import ProjectCard from '@/components/dashboard/projectCard'
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle
// SheetTrigger
} from '@/components/ui/sheet'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import type { NewProject, ProjectWithoutKeys, Workspace } from '@/types'
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTrigger
} from '@/components/ui/dialog'
import { Projects } from '@/lib/api-functions/projects'
export default function Index(): JSX.Element {
const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
const [projects, setProjects] = useState<ProjectWithoutKeys[] | []>([])
const [newProjectData, setNewProjectData] = useState<NewProject>({
name: '',
description: '',
storePrivateKey: false,
environments: [
{
name: 'Dev',
description: 'Development environment',
isDefault: true
},
{
name: 'Stage',
description: 'Staging environment',
isDefault: false
},
{
name: 'Prod',
description: 'Production environment',
isDefault: false
}
]
})
const router = useRouter()
const currentWorkspace =
typeof localStorage !== 'undefined'
? (JSON.parse(
localStorage.getItem('currentWorkspace') ?? '{}'
) as Workspace)
: (JSON.parse(`{}`) as Workspace)
useEffect(() => {
Projects.getProjectsbyWorkspaceID(currentWorkspace.id)
.then((data: ProjectWithoutKeys[] | [] | undefined) => {
if (data) {
setProjects(data)
}
})
.catch((error) => {
// eslint-disable-next-line no-console -- we need to log the error
console.error(error)
})
}, [currentWorkspace.id])
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<h1 className="text-[1.75rem] font-semibold ">My Projects</h1>
<Dialog>
<DialogTrigger>
<Button>
{' '}
<AddSVG /> Create a new Project
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>Create a new project</DialogHeader>
<DialogDescription>
Fill in the details to create a new project
</DialogDescription>
<div className="flex flex-col gap-y-8">
<div className="flex w-full flex-col gap-y-4">
<div className="flex flex-col items-start gap-4">
<Label className="text-right" htmlFor="name">
Name
</Label>
<Input
className="col-span-3"
id="name"
onChange={(e) => {
setNewProjectData((prev) => ({
...prev,
name: e.target.value
}))
}}
placeholder="Enter the name"
/>
</div>
<div className="flex flex-col items-start gap-4">
<Label className="text-right" htmlFor="name">
Description
</Label>
<Input
className="col-span-3"
id="name"
onChange={(e) => {
setNewProjectData((prev) => ({
...prev,
description: e.target.value
}))
}}
placeholder="Enter the name"
/>
</div>
{/* {isNameEmpty ? (
<span className="ml-[3.5rem] mt-1 text-red-500">
Name cannot be empty
</span>
) : null} */}
</div>
</div>
<div className="flex w-full justify-end">
<Button
onClick={() => {
Projects.createProject(newProjectData, currentWorkspace.id)
.then(() => {
toast.success('New project added successfully')
router.refresh()
})
.catch(() => {
toast.error('Failed to add new project')
})
}}
variant="secondary"
>
Add project
</Button>
</div>
</DialogContent>
</Dialog>
</div>
{projects.length !== 0 ? (
<div className="grid h-[70vh] gap-6 overflow-y-auto scroll-smooth p-2 md:grid-cols-2 2xl:grid-cols-3">
{projects.map((project: ProjectWithoutKeys) => {
return (
<ProjectCard
config={10}
description={project.description ?? ''}
environment={2}
id={project.id}
key={project.id}
secret={5}
setIsSheetOpen={setIsSheetOpen}
title={project.name}
/>
)
})}
</div>
) : (
<div className="mt-[10vh] flex justify-center">
<div>No projects yet? Get started by creating a new project.</div>
</div>
)}
<Sheet
onOpenChange={(open) => {
setIsSheetOpen(open)
}}
open={isSheetOpen}
>
<SheetContent className="border-white/15 bg-[#222425]">
<SheetHeader>
<SheetTitle className="text-white">Edit Project</SheetTitle>
<SheetDescription>
Make changes to the project details
</SheetDescription>
</SheetHeader>
<div className="grid gap-4 py-4">
<div className="flex flex-col items-start gap-4">
<Label className="text-right" htmlFor="name">
Project Name
</Label>
<Input className="col-span-3" id="name" />
</div>
<div className="flex flex-col items-start gap-4">
<Label className="text-right" htmlFor="name">
Project description
</Label>
<Input className="col-span-3" id="name" />
</div>
<div className="flex items-center justify-between">
<Label className="w-[10rem] text-left" htmlFor="name">
Do you want us to store the private key?
</Label>
<div className="flex gap-1 text-sm">
<div>No</div>
<Switch />
<div>Yes</div>
</div>
</div>
</div>
<SheetFooter>
<SheetClose asChild>
<Button type="submit" variant="secondary">
Save changes
</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
</div>
)
}