├── .eslintrc.json
├── .env.example
├── public
    ├── favicon.ico
    ├── vercel.svg
    └── next.svg
├── jsconfig.json
├── src
    ├── pages
    │   ├── signup.jsx
    │   ├── index.js
    │   ├── api
    │   │   └── hello.js
    │   ├── _document.js
    │   ├── _app.js
    │   ├── people
    │   │   ├── index.jsx
    │   │   ├── create.jsx
    │   │   └── [id]
    │   │   │   ├── index.jsx
    │   │   │   └── edit.jsx
    │   └── dashboard.jsx
    ├── services
    │   ├── deleteCompany.js
    │   ├── getCompanies.js
    │   ├── schema.js
    │   ├── createPerson.js
    │   ├── getPeople.js
    │   ├── securePage.js
    │   └── images.js
    ├── styles
    │   └── globals.css
    └── components
    │   ├── SupaImage.jsx
    │   ├── ImageInput.jsx
    │   ├── Login.jsx
    │   └── PersonForm.jsx
├── next.config.mjs
└── .gitignore


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_SUPABASE_URL=
2 | NEXT_PUBLIC_SUPABASE_ANON_KEY=
3 | 
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gangludev/supabase-nextjs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./src/*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/pages/signup.jsx:
--------------------------------------------------------------------------------
1 | import { Login } from "@/components/Login";
2 | 
3 | export default function SignUp() {
4 |   return <Login />;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/services/deleteCompany.js:
--------------------------------------------------------------------------------
1 | export async function deleteCompany(supabase, id) {
2 |   await supabase.from("companies").delete().eq("id", id);
3 | }
4 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | };
5 | 
6 | export default nextConfig;
7 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import "bootstrap/dist/css/bootstrap.min.css";
2 | 
3 | table,
4 | th,
5 | td {
6 |   border: 1px solid black;
7 |   border-collapse: collapse;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { Login } from "@/components/Login";
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <>
 6 |       <Login />
 7 |     </>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/services/getCompanies.js:
--------------------------------------------------------------------------------
1 | export async function getCompanies(supabase) {
2 |   const { data: companies } = await supabase.from("companies").select("*");
3 |   return companies;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: "John Doe" });
5 | }
6 | 


--------------------------------------------------------------------------------
/src/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document";
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/src/services/schema.js:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const PersonSchema = z.object({
 4 |   name: z.string().min(1, "Name is required"),
 5 |   dob: z.date(),
 6 |   email: z.string().email("Email not correct formatted"),
 7 |   address: z.string().min(1, "Address is required"),
 8 |   phone: z.string().min(1, "Phone is required"),
 9 |   country_id: z.string().min(1, "Country is required"),
10 |   picture: z.string().min(1, "Picture is required"),
11 | });
12 | 


--------------------------------------------------------------------------------
/src/services/createPerson.js:
--------------------------------------------------------------------------------
 1 | export async function createPerson(supabase, personData) {
 2 |   const { data, error } = await supabase
 3 |     .from("people")
 4 |     .insert([personData])
 5 |     .select();
 6 |   return data;
 7 | }
 8 | 
 9 | export async function updatePerson(supabase, id, personData) {
10 |   const { data, error } = await supabase
11 |     .from("people")
12 |     .update(personData)
13 |     .eq("id", id)
14 |     .select();
15 |   return data;
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/components/SupaImage.jsx:
--------------------------------------------------------------------------------
 1 | import { getImageUrl } from "@/services/images";
 2 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 3 | import { useEffect, useState } from "react";
 4 | 
 5 | export function SupaImage({ bucket, fileName }) {
 6 |   const supabase = useSupabaseClient();
 7 |   const [imageUrl, setImageUrl] = useState(null);
 8 | 
 9 |   useEffect(() => {
10 |     getImageUrl(supabase, bucket, fileName).then(setImageUrl);
11 |   }, [supabase, bucket, fileName]);
12 | 
13 |   if (!imageUrl) {
14 |     return null;
15 |   }
16 | 
17 |   return <img src={imageUrl} width={100} />;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/services/getPeople.js:
--------------------------------------------------------------------------------
 1 | export async function getPeople(supabase) {
 2 |   let { data: people, error } = await supabase
 3 |     .from("people")
 4 |     .select("*, countries(*)");
 5 |   return people;
 6 | }
 7 | 
 8 | export async function getCountries(supabase) {
 9 |   let { data: countries, error } = await supabase.from("countries").select("*");
10 |   return countries;
11 | }
12 | 
13 | export async function getPerson(supabase, id) {
14 |   let { data: person, error } = await supabase
15 |     .from("people")
16 |     .select("*, countries(*)")
17 |     .eq("id", id)
18 |     .single();
19 |   return person;
20 | }
21 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/services/securePage.js:
--------------------------------------------------------------------------------
 1 | // src/services/securePage.js
 2 | import { useRouter } from "next/router";
 3 | import { useEffect } from "react";
 4 | import { useSessionContext } from "@supabase/auth-helpers-react";
 5 | 
 6 | export function securePage(Page) {
 7 |   return () => {
 8 |     const { isLoading, session } = useSessionContext();
 9 |     const router = useRouter();
10 | 
11 |     useEffect(() => {
12 |       if (!isLoading && !session) {
13 |         router.replace("/");
14 |       }
15 |     }, [isLoading, session, router]);
16 | 
17 |     if (isLoading) {
18 |       return null;
19 |     }
20 | 
21 |     if (!session) {
22 |       return null;
23 |     }
24 | 
25 |     return <Page />;
26 |   };
27 | }
28 | 


--------------------------------------------------------------------------------
/src/services/images.js:
--------------------------------------------------------------------------------
 1 | export async function getImageUrl(supabase, bucketName, filePath) {
 2 |   const { data, urlError } = await supabase.storage
 3 |     .from(bucketName)
 4 |     .getPublicUrl(filePath);
 5 | 
 6 |   if (urlError) {
 7 |     throw urlError;
 8 |   }
 9 | 
10 |   return data.publicUrl;
11 | }
12 | 
13 | export async function uploadImage(supabase, bucketName, file) {
14 |   if (!file) {
15 |     return;
16 |   }
17 |   const fileExt = file.name.split(".").pop();
18 |   const fileName = `${Math.random()}.${fileExt}`;
19 |   const filePath = fileName;
20 | 
21 |   const { error } = await supabase.storage
22 |     .from(bucketName)
23 |     .upload(filePath, file);
24 | 
25 |   if (error) {
26 |     throw error;
27 |   }
28 |   return filePath;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "@/styles/globals.css";
 2 | import { createPagesBrowserClient } from "@supabase/auth-helpers-nextjs";
 3 | import { SessionContextProvider } from "@supabase/auth-helpers-react";
 4 | import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 5 | import { useEffect, useState } from "react";
 6 | 
 7 | const client = new QueryClient();
 8 | 
 9 | export default function MyApp({ Component, pageProps }) {
10 |   const [supabaseClient] = useState(() => createPagesBrowserClient());
11 | 
12 |   useEffect(() => {
13 |     if (supabaseClient) {
14 |       globalThis.supabase = supabaseClient;
15 |     }
16 |   }, [supabaseClient]);
17 | 
18 |   return (
19 |     <QueryClientProvider client={client}>
20 |       <SessionContextProvider
21 |         supabaseClient={supabaseClient}
22 |         initialSession={pageProps.initialSession}
23 |       >
24 |         <Component {...pageProps} />
25 |       </SessionContextProvider>
26 |     </QueryClientProvider>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/ImageInput.jsx:
--------------------------------------------------------------------------------
 1 | import { getImageUrl, uploadImage } from "@/services/images";
 2 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 3 | import { useEffect, useState } from "react";
 4 | 
 5 | export function ImageInput({ bucket, value, onChange }) {
 6 |   const supabase = useSupabaseClient();
 7 |   const [imageUrl, setImageUrl] = useState(null);
 8 | 
 9 |   useEffect(() => {
10 |     if (value) {
11 |       getImageUrl(supabase, bucket, value).then(setImageUrl);
12 |     }
13 |   }, [value]);
14 | 
15 |   const handleClear = () => {
16 |     onChange(null);
17 |   };
18 | 
19 |   const handleSelectedImage = (event) => {
20 |     uploadImage(supabase, bucket, event.target.files[0]).then(onChange);
21 |   };
22 | 
23 |   if (value) {
24 |     return (
25 |       <div>
26 |         {imageUrl && <img src={imageUrl} width={100} />}
27 |         <button onClick={handleClear}>Clear</button>
28 |       </div>
29 |     );
30 |   }
31 | 
32 |   return <input type="file" onChange={handleSelectedImage} />;
33 | }
34 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/src/pages/people/index.jsx:
--------------------------------------------------------------------------------
 1 | import { SupaImage } from "@/components/SupaImage";
 2 | import { getPeople } from "@/services/getPeople";
 3 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 4 | import { useQuery } from "@tanstack/react-query";
 5 | import Link from "next/link";
 6 | 
 7 | export default function PeoplePage() {
 8 |   const supabase = useSupabaseClient();
 9 | 
10 |   const peopleQuery = useQuery({
11 |     queryKey: ["people"],
12 |     queryFn: () => getPeople(supabase),
13 |     refetchInterval: 1000,
14 |   });
15 | 
16 |   return (
17 |     <div>
18 |       <h1>People</h1>
19 |       <a href="/people/create" className="btn btn-success">
20 |         Add Person
21 |       </a>
22 | 
23 |       {peopleQuery.isLoading && <div>Loading...</div>}
24 |       <table className="table">
25 |         <tbody>
26 |           {peopleQuery.data?.map((person) => (
27 |             <tr key={person.id}>
28 |               <td>
29 |                 <SupaImage bucket="pictures" fileName={person.picture} />
30 |               </td>
31 |               <td>
32 |                 <Link href={`/people/${person.id}`}>{person.name}</Link>
33 |               </td>
34 |               <td>{person.dob}</td>
35 |               <td>{person.address}</td>
36 |               <td>{person.email}</td>
37 |               <td>{person.phone}</td>
38 |               <td>{person.countries?.name}</td>
39 |             </tr>
40 |           ))}
41 |         </tbody>
42 |       </table>
43 |       {peopleQuery.isError && <div>Error fetching data</div>}
44 |     </div>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/src/pages/dashboard.jsx:
--------------------------------------------------------------------------------
 1 | // src/pages/dashboard.jsx
 2 | import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
 3 | import { useRouter } from "next/router";
 4 | import { securePage } from "@/services/securePage";
 5 | import { useEffect, useState } from "react";
 6 | import { getCompanies } from "@/services/getCompanies";
 7 | import { deleteCompany } from "@/services/deleteCompany";
 8 | import { ImageInput } from "@/components/ImageInput";
 9 | 
10 | export default securePage(function Dashboard() {
11 |   const supabase = useSupabaseClient();
12 |   const router = useRouter();
13 |   const user = useUser();
14 |   const [imageUrl, setImageUrl] = useState("0.1466368422093962.jpg");
15 | 
16 |   const [companies, setCompanies] = useState([]);
17 |   useEffect(() => {
18 |     getCompanies(supabase).then(setCompanies);
19 |   }, []);
20 | 
21 |   const handleSignOut = async () => {
22 |     await supabase.auth.signOut();
23 |     router.push("/");
24 |   };
25 | 
26 |   const handlerDelete = (id) => async () => {
27 |     await deleteCompany(supabase, id);
28 |   };
29 | 
30 |   return (
31 |     <div>
32 |       Dashboard for <strong>{user?.email || "Not authenticated"}</strong>
33 |       <button type="button" onClick={handleSignOut}>
34 |         Sign out
35 |       </button>
36 |       <ul>
37 |         {companies.map((company, index) => (
38 |           <li key={company.id}>
39 |             {company.name}{" "}
40 |             <button type="button" onClick={handlerDelete(company.id)}>
41 |               Delete
42 |             </button>
43 |           </li>
44 |         ))}
45 |       </ul>
46 |       <p>
47 |         <b>{imageUrl}</b>
48 |       </p>
49 |       <ImageInput bucket="pictures" value={imageUrl} onChange={setImageUrl} />
50 |     </div>
51 |   );
52 | });
53 | 


--------------------------------------------------------------------------------
/src/pages/people/create.jsx:
--------------------------------------------------------------------------------
 1 | import { PersonSchema } from "@/services/schema";
 2 | import { Controller, useForm } from "react-hook-form";
 3 | import { zodResolver } from "@hookform/resolvers/zod";
 4 | import { createPerson } from "@/services/createPerson";
 5 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 6 | import { useRouter } from "next/router";
 7 | import { useMutation, useQuery } from "@tanstack/react-query";
 8 | import { getCountries } from "@/services/getPeople";
 9 | import { ImageInput } from "@/components/ImageInput";
10 | import { PersonForm } from "@/components/PersonForm";
11 | 
12 | export default function CreatePersonPage() {
13 |   const supabase = useSupabaseClient();
14 |   const router = useRouter();
15 | 
16 |   const countriesQuery = useQuery({
17 |     queryKey: ["countries"],
18 |     queryFn: () => getCountries(supabase),
19 |   });
20 | 
21 |   const form = useForm({
22 |     defaultValues: {
23 |       name: "",
24 |       dob: new Date(),
25 |       email: "",
26 |       address: "",
27 |       phone: "",
28 |     },
29 |     resolver: zodResolver(PersonSchema),
30 |   });
31 | 
32 |   const peopleQuery = useMutation({
33 |     mutationFn: (data) => createPerson(supabase, data),
34 |   });
35 | 
36 |   const handleSaveData = async (data) => {
37 |     peopleQuery.mutate(data, {
38 |       onSuccess: (record) => {
39 |         console.log(record);
40 |         router.push("/people");
41 |       },
42 |       onError: (e) => {
43 |         alert(e.message);
44 |       },
45 |     });
46 |   };
47 | 
48 |   return (
49 |     <div className="container">
50 |       <h2>Create person</h2>
51 |       <PersonForm
52 |         form={form}
53 |         onSaveData={handleSaveData}
54 |         countries={countriesQuery.data}
55 |         isPending={peopleQuery.isPending}
56 |         submitLabel="Add Person"
57 |       />
58 |     </div>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/src/pages/people/[id]/index.jsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from "next/router";
 2 | import { useQuery } from "@tanstack/react-query";
 3 | import { getPerson } from "@/services/getPeople";
 4 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 5 | import { SupaImage } from "@/components/SupaImage";
 6 | import Link from "next/link";
 7 | 
 8 | export default function PersonPage() {
 9 |   const router = useRouter();
10 |   const id = router.query.id;
11 |   const supabase = useSupabaseClient();
12 | 
13 |   const personQuery = useQuery({
14 |     queryKey: ["person", id],
15 |     queryFn: () => getPerson(supabase, id),
16 |   });
17 | 
18 |   return (
19 |     <div>
20 |       <h2>{personQuery.data?.name}</h2>
21 |       <table>
22 |         <tbody>
23 |           <tr>
24 |             <td>Picture</td>
25 |             <td>
26 |               {personQuery.data?.picture && (
27 |                 <SupaImage
28 |                   bucket="pictures"
29 |                   fileName={personQuery.data.picture}
30 |                 />
31 |               )}
32 |             </td>
33 |           </tr>
34 |           <tr>
35 |             <td>Email</td>
36 |             <td>{personQuery.data?.email}</td>
37 |           </tr>
38 | 
39 |           <tr>
40 |             <td>Address</td>
41 |             <td>{personQuery.data?.address}</td>
42 |           </tr>
43 | 
44 |           <tr>
45 |             <td>Phone</td>
46 |             <td>{personQuery.data?.phone}</td>
47 |           </tr>
48 | 
49 |           <tr>
50 |             <td>DOB</td>
51 |             <td>{personQuery.data?.dob}</td>
52 |           </tr>
53 | 
54 |           <tr>
55 |             <td>Country</td>
56 |             <td>{personQuery.data?.countries?.name}</td>
57 |           </tr>
58 |         </tbody>
59 |       </table>
60 |       <Link href={`/people/${id}/edit`} className="btn btn-info">
61 |         Edit
62 |       </Link>
63 | 
64 |       <Link href="/people">All People</Link>
65 |     </div>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/Login.jsx:
--------------------------------------------------------------------------------
 1 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 2 | import { useRouter } from "next/router";
 3 | import { useForm } from "react-hook-form";
 4 | 
 5 | export function Login() {
 6 |   const form = useForm({
 7 |     defaultValues: {
 8 |       email: "",
 9 |       password: "",
10 |     },
11 |   });
12 |   const supabase = useSupabaseClient();
13 |   const router = useRouter();
14 | 
15 |   const handleLogin = async () => {
16 |     const values = form.getValues();
17 |     const { data, error: signInError } = await supabase.auth.signInWithPassword(
18 |       {
19 |         email: values.email,
20 |         password: values.password,
21 |       }
22 |     );
23 | 
24 |     if (signInError) {
25 |       return;
26 |     }
27 | 
28 |     if (!signInError && data && data.session) {
29 |       await supabase.auth.setSession({
30 |         access_token: data.session.access_token,
31 |         refresh_token: data.session.refresh_token,
32 |       });
33 |       router.replace("/dashboard");
34 |     }
35 |   };
36 | 
37 |   const handleSignup = async () => {
38 |     const values = form.getValues();
39 |     const { data, error: signInError } = await supabase.auth.signUp({
40 |       email: values.email,
41 |       password: values.password,
42 |     });
43 | 
44 |     if (signInError) {
45 |       return;
46 |     }
47 | 
48 |     if (!signInError && data && data.session) {
49 |       await supabase.auth.setSession({
50 |         access_token: data.session.access_token,
51 |         refresh_token: data.session.refresh_token,
52 |       });
53 |       router.replace("/dashboard");
54 |     }
55 |   };
56 | 
57 |   return (
58 |     <div>
59 |       <h2>Login/Register</h2>
60 |       <label>Email</label>
61 |       <input type="email" {...form.register("email")} />
62 |       <label>Password</label>
63 |       <input type="password" {...form.register("password")} />
64 |       <button type="button" onClick={handleLogin}>
65 |         Login
66 |       </button>
67 |       <button type="button" onClick={handleSignup}>
68 |         Sign up
69 |       </button>
70 |     </div>
71 |   );
72 | }
73 | 


--------------------------------------------------------------------------------
/src/pages/people/[id]/edit.jsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from "next/router";
 2 | import { useForm } from "react-hook-form";
 3 | import { useQuery, useMutation } from "@tanstack/react-query";
 4 | import { zodResolver } from "@hookform/resolvers/zod";
 5 | import { useSupabaseClient } from "@supabase/auth-helpers-react";
 6 | import { PersonSchema } from "@/services/schema";
 7 | import { updatePerson } from "@/services/createPerson";
 8 | import { PersonForm } from "@/components/PersonForm";
 9 | import { getCountries, getPerson } from "@/services/getPeople";
10 | import { useEffect } from "react";
11 | 
12 | export default function EditPerson() {
13 |   const router = useRouter();
14 |   const id = router.query.id;
15 |   const supabase = useSupabaseClient();
16 | 
17 |   const countriesQuery = useQuery({
18 |     queryKey: ["countries"],
19 |     queryFn: () => getCountries(supabase),
20 |   });
21 | 
22 |   const personQuery = useQuery({
23 |     queryKey: ["person", id],
24 |     queryFn: () => getPerson(supabase, id),
25 |   });
26 | 
27 |   const form = useForm({
28 |     defaultValues: {
29 |       name: "",
30 |       dob: new Date(),
31 |       email: "",
32 |       address: "",
33 |       phone: "",
34 |     },
35 |     resolver: zodResolver(PersonSchema),
36 |   });
37 | 
38 |   useEffect(() => {
39 |     if (personQuery.data) {
40 |       form.reset(personQuery.data);
41 |     }
42 |   }, [personQuery.data, form]);
43 | 
44 |   const peopleQuery = useMutation({
45 |     mutationFn: (data) => updatePerson(supabase, id, data),
46 |   });
47 | 
48 |   const handleSaveData = async (data) => {
49 |     peopleQuery.mutate(data, {
50 |       onSuccess: (record) => {
51 |         console.log(record);
52 |         router.push(`/people/${id}`);
53 |       },
54 |       onError: (e) => {
55 |         alert(e.message);
56 |       },
57 |     });
58 |   };
59 | 
60 |   return (
61 |     <div className="container">
62 |       <h2>Edit person</h2>
63 |       {personQuery.data && (
64 |         <PersonForm
65 |           form={form}
66 |           onSaveData={handleSaveData}
67 |           countries={countriesQuery.data}
68 |           isPending={peopleQuery.isPending}
69 |           submitLabel="Update person"
70 |         />
71 |       )}
72 |     </div>
73 |   );
74 | }
75 | 


--------------------------------------------------------------------------------
/src/components/PersonForm.jsx:
--------------------------------------------------------------------------------
 1 | import { Controller } from "react-hook-form";
 2 | import { ImageInput } from "./ImageInput";
 3 | 
 4 | export function PersonForm({
 5 |   form,
 6 |   onSaveData,
 7 |   countries,
 8 |   isPending,
 9 |   submitLabel,
10 | }) {
11 |   return (
12 |     <form onSubmit={form.handleSubmit(onSaveData)}>
13 |       <label className="form-label">Name</label>
14 |       <input type="text" {...form.register("name")} className="form-control" />
15 |       {form.formState.errors.name && (
16 |         <div className="text-danger">{form.formState.errors.name?.message}</div>
17 |       )}
18 | 
19 |       <label className="form-label">DOB</label>
20 |       <input
21 |         type="date"
22 |         {...form.register("dob", { valueAsDate: true })}
23 |         className="form-control"
24 |       />
25 |       {form.formState.errors.dob && (
26 |         <div className="text-danger">{form.formState.errors.dob?.message}</div>
27 |       )}
28 | 
29 |       <label className="form-label">Email</label>
30 |       <input type="text" {...form.register("email")} className="form-control" />
31 |       {form.formState.errors.email && (
32 |         <div className="text-danger">
33 |           {form.formState.errors.email?.message}
34 |         </div>
35 |       )}
36 | 
37 |       <label className="form-label">Phone</label>
38 |       <input type="text" {...form.register("phone")} className="form-control" />
39 |       {form.formState.errors.phone && (
40 |         <div className="text-danger">
41 |           {form.formState.errors.phone?.message}
42 |         </div>
43 |       )}
44 | 
45 |       <label className="form-label">Address</label>
46 |       <input
47 |         type="text"
48 |         {...form.register("address")}
49 |         className="form-control"
50 |       />
51 |       {form.formState.errors.address && (
52 |         <div className="text-danger">
53 |           {form.formState.errors.address?.message}
54 |         </div>
55 |       )}
56 | 
57 |       <label className="form-label">Country</label>
58 |       <select {...form.register("country_id")} className="form-control">
59 |         <option value="">---</option>
60 |         {countries?.map((country) => (
61 |           <option key={country.id} value={country.id}>
62 |             {country.name}
63 |           </option>
64 |         ))}
65 |       </select>
66 |       {form.formState.errors.country_id && (
67 |         <div className="text-danger">
68 |           {form.formState.errors.country_id?.message}
69 |         </div>
70 |       )}
71 | 
72 |       <label className="form-label">Picture</label>
73 |       <div>
74 |         <Controller
75 |           control={form.control}
76 |           name="picture"
77 |           render={({ field }) => (
78 |             <ImageInput
79 |               bucket="pictures"
80 |               value={field.value}
81 |               onChange={field.onChange}
82 |             />
83 |           )}
84 |         />
85 |         {form.formState.errors.picture && (
86 |           <div className="text-danger">
87 |             {form.formState.errors.picture?.message}
88 |           </div>
89 |         )}
90 |       </div>
91 | 
92 |       <button type="submit" className="btn btn-success" disabled={isPending}>
93 |         {isPending ? "Saving data..." : submitLabel}
94 |       </button>
95 |     </form>
96 |   );
97 | }
98 | 


--------------------------------------------------------------------------------