konnosDashboard
BuildingState.tsx182 lines · main
1import { useParams } from 'common'
2import { ArrowRight, Loader2 } from 'lucide-react'
3import Link from 'next/link'
4import { useEffect } from 'react'
5import { Badge, Button } from 'ui'
6
7import { ClientLibrary } from '@/components/interfaces/Home/ClientLibrary'
8import { ExampleProject } from '@/components/interfaces/Home/ExampleProject'
9import { EXAMPLE_PROJECTS } from '@/components/interfaces/Home/Home.constants'
10import { APIKeys } from '@/components/interfaces/Home/NewProjectPanel/APIKeys'
11import { SupportLink } from '@/components/interfaces/Support/SupportLink'
12import { useInvalidateProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
13import { useInvalidateProjectDetailsQuery } from '@/data/projects/project-detail-query'
14import { useProjectStatusQuery } from '@/data/projects/project-status-query'
15import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
16import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
17import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
18import { DOCS_URL, PROJECT_STATUS } from '@/lib/constants'
19
20const BuildingState = () => {
21 const { ref } = useParams()
22 const { data: project } = useSelectedProjectQuery()
23
24 const { invalidateProjectsQuery } = useInvalidateProjectsInfiniteQuery()
25 const { invalidateProjectDetailsQuery } = useInvalidateProjectDetailsQuery()
26
27 const showExamples = useIsFeatureEnabled('project_homepage:show_examples')
28
29 const { projectHomepageClientLibraries: clientLibraries } = useCustomContent([
30 'project_homepage:client_libraries',
31 ])
32
33 const { data: projectStatusData, isSuccess: isProjectStatusSuccess } = useProjectStatusQuery(
34 { projectRef: ref },
35 {
36 enabled: project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY,
37 refetchInterval: (query) => {
38 const data = query.state.data
39 return data?.status === PROJECT_STATUS.ACTIVE_HEALTHY ? false : 4000
40 },
41 }
42 )
43
44 useEffect(() => {
45 if (!isProjectStatusSuccess) return
46 if (projectStatusData?.status === PROJECT_STATUS.ACTIVE_HEALTHY) {
47 if (ref) {
48 invalidateProjectDetailsQuery(ref)
49 }
50 invalidateProjectsQuery()
51 }
52 }, [
53 isProjectStatusSuccess,
54 projectStatusData,
55 ref,
56 invalidateProjectDetailsQuery,
57 invalidateProjectsQuery,
58 ])
59
60 if (project === undefined) return null
61
62 return (
63 <div className="mx-auto my-8 md:my-16 w-full md:max-w-7xl items-center justify-center">
64 <div className="px-4 md:px-6 flex flex-col space-y-16">
65 <div className="w-full flex flex-col gap-4">
66 <div className="w-full flex flex-col md:flex-row items-start md:items-center gap-3">
67 <h1 className="text-3xl">{project?.name}</h1>
68 <Badge>
69 <div className="flex items-center gap-2">
70 <Loader2 className="animate-spin" size={12} />
71 <span>
72 {project.status === PROJECT_STATUS.UNKNOWN
73 ? 'Initiating project set up'
74 : 'Setting up project'}
75 </span>
76 </div>
77 </Badge>
78 </div>
79 <div>
80 <p className="text-sm text-foreground-light">
81 {' '}
82 We are provisioning your database and API endpoints
83 </p>
84 <p className="text-sm text-foreground-light"> This may take a few minutes</p>
85 </div>
86 </div>
87 <div>
88 <div className="w-full grid grid-cols-12 gap-12">
89 <div className="w-full col-span-12 space-y-12 lg:col-span-4">
90 <div>
91 <h4 className="text-base text-foreground">While you wait</h4>
92
93 <ChecklistItem
94 description={
95 <p className="text-sm text-foreground-light">
96 Browse the Briven{' '}
97 <Link
98 href={`${DOCS_URL}`}
99 className="mb-0 text-brand transition-colors hover:text-brand-600"
100 target="_blank"
101 rel="noreferrer"
102 >
103 documentation
104 </Link>
105 .
106 </p>
107 }
108 />
109 </div>
110 <div>
111 <h4 className="text-base text-foreground">Not working?</h4>
112 <ChecklistItem
113 description={
114 <p className="text-sm text-foreground-light">
115 Try refreshing after a couple of minutes.
116 </p>
117 }
118 />
119 <ul>
120 <ChecklistItem
121 description={
122 <>
123 <p className="mb-4 text-sm text-foreground-light">
124 If your dashboard hasn't connected within 2 minutes, you can open a
125 support ticket.
126 </p>
127 <Button asChild type="default">
128 <SupportLink>Contact support team</SupportLink>
129 </Button>
130 </>
131 }
132 />
133 </ul>
134 </div>
135 </div>
136 <div className="col-span-12 lg:col-span-8 flex flex-col gap-8">
137 <APIKeys />
138 </div>
139 </div>
140 </div>
141 </div>
142 {project.status === PROJECT_STATUS.COMING_UP && (
143 <div className="mx-auto my-16 w-full max-w-7xl space-y-16">
144 <div className="space-y-8">
145 <div className="mx-6">
146 <h4 className="text-lg">Client libraries</h4>
147 </div>
148 <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:gap-12 mx-6 mb-12 md:grid-cols-3">
149 {clientLibraries!.map((library) => (
150 <ClientLibrary key={library.language} {...library} />
151 ))}
152 </div>
153 </div>
154 {showExamples && (
155 <div className="space-y-8">
156 <div className="mx-6">
157 <h5>Example projects</h5>
158 </div>
159 <div className="mx-6 grid gap-2 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
160 {EXAMPLE_PROJECTS.map((project) => (
161 <ExampleProject key={project.url} {...project} />
162 ))}
163 </div>
164 </div>
165 )}
166 </div>
167 )}
168 </div>
169 )
170}
171export default BuildingState
172
173const ChecklistItem = ({ description }: any) => {
174 return (
175 <li className="my-3 flex flex-wrap space-x-3">
176 <div className="mt-0.5">
177 <ArrowRight className="text-foreground-lighter" size={14} />
178 </div>
179 <div className="flex-1">{description}</div>
180 </li>
181 )
182}