purinx · purinx · Jun 7, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,11 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": ["signin", "sobabase", "supabase"],
-  "commentTranslate.source": "Google"
-}
+  "cSpell.words": [
+    "pico",
+    "signin",
+    "sobabase",
+    "supabase"
+  ],
+  "commentTranslate.source": "Google",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+    serverActions: true,
+  },
+};
diff --git a/package.json b/package.json
@@ -20,20 +20,22 @@
     "next": "^13.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.9",
     "react-hook-form": "^7.44.3",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",
     "@types/node": "^18.11.9",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
     "dotenv": "^16.0.3",
     "eslint": "^8.26.0",
+    "eslint-config-next": "13.4.4",
     "generate-password": "^1.7.0",
     "prettier": "^2.7.1",
     "ts-loader": "^9.4.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^5.1.3"
   }
 }
diff --git a/src/styles/theme.css → src/app/global.css b/src/styles/theme.css → src/app/global.css
@@ -3,15 +3,15 @@
 :root {
   --background-color: #11191f;
   --color: #ffffff;
-  --h1-color: #00b478;
-  --h2-color: #00b478;
-  --h3-color: #00b478;
-  --h4-color: #00b478;
-  --h5-color: #00b478;
-  --h6-color: #00b478;
+  --h1-color: #00f064;
+  --h2-color: #00f064;
+  --h3-color: #00f064;
+  --h4-color: #00f064;
+  --h5-color: #00f064;
+  --h6-color: #00f064;
   --muted-color: hsl(205, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: var(--pico-primary);
+  --primary: #00c864;
   --primary-hover: var(--pico-primary-hover);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
@@ -51,10 +51,10 @@
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --pico-text-selection-color: rgba(0, 180, 120, 0.1875);
-  --pico-primary: #00b478;
+  --pico-primary: #00be00;
   --pico-primary-background: #007a50;
   --pico-primary-underline: rgba(0, 180, 120, 0.5);
-  --pico-primary-hover: #00cc88;
+  --pico-primary-hover: #00ce80;
   --pico-primary-hover-background: #00895a;
   --pico-primary-focus: rgba(0, 180, 120, 0.25);
   --pico-primary-inverse: #fff;
@@ -115,4 +115,4 @@ dd {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-}
+}
diff --git a/src/pages/home.tsx → src/app/home/page.tsx b/src/pages/home.tsx → src/app/home/page.tsx
@@ -1,16 +1,14 @@
+'use server';
 import Head from 'next/head';
 import Home from 'src/features/home';
-import { UserProvider } from 'src/hooks/useUser';
 
-const HomePage = () => {
+export default async function HomePage() {
   return (
-    <UserProvider>
+    <>
       <Head>
         <title>Sobabase | Home</title>
       </Head>
       <Home />
-    </UserProvider>
+    </>
   );
-};
-
-export default HomePage;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,41 @@
+import { PropsWithChildren } from 'react';
+import Script from 'next/script';
+import './global.css';
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="en" data-theme="dark">
+      <head>
+        <Script async src="https://www.googletagmanager.com/gtag/js?id=G-9G211QMFKT" />
+        <Script id="ga">{`
+          window.dataLayer = window.dataLayer || [];
+          function gtag() {
+            dataLayer.push(arguments);
+          }
+          gtag('js', new Date());
+          gtag('config', 'G-9G211QMFKT');
+        `}</Script>
+        <link
+          rel="stylesheet"
+          href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
+        />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:image" content="http://sobabase.vercel.app/image.jpg" />
+        <meta name="twitter:title" content="Sobabase" />
+        <meta name="twitter:description" content="My Supabase Sandbox" />
+        <meta property="og:image" content="https://sobabase.vercel.app/favicon.ico" />
+        <meta property="og:title" content="Sobabase" />
+        <meta property="og:description" content="My Supabase Sandbox" />
+      </head>
+      <body className="container">
+        <main>{children}</main>
+        <footer>
+          <small>
+            Built with <a href="https://picocss.com">Pico.css</a> •
+            <a href="https://github.com/caburchin/sobabase">Source code</a>
+          </small>
+        </footer>
+      </body>
+    </html>
+  );
+}
diff --git a/src/pages/index.tsx → src/app/page.tsx b/src/pages/index.tsx → src/app/page.tsx
diff --git a/src/pages/questionnaire.tsx → src/app/questionnaire/page.tsx b/src/pages/questionnaire.tsx → src/app/questionnaire/page.tsx
@@ -1,19 +1,25 @@
-import { QueryClientProvider } from '@tanstack/react-query';
+import { redirect } from 'next/navigation';
 import Head from 'next/head';
 import { QuestionnaireForm } from 'src/features/questonnaire';
-import { UserProvider } from 'src/hooks/useUser';
+import { getUser } from 'src/resources/user';
+
+const QuestionnairePage = async () => {
+  const user = await getUser();
+
+  if (!user) {
+    redirect('/');
+  }
 
-const QuestionnairePage = () => {
   return (
-    <UserProvider>
+    <>
       <Head>
         <title>Sobabase | Questionnaire</title>
       </Head>
       <div className="container">
         <h1>Questionnaire</h1>
-        <QuestionnaireForm />
+        <QuestionnaireForm user={user} />
       </div>
-    </UserProvider>
+    </>
   );
 };
 

diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx
@@ -1,9 +1,16 @@
-import { useUser } from 'src/hooks/useUser';
-import { useQuestionnaires } from 'src/resources/useQuestionaires';
+'use server';
+import { redirect } from 'next/navigation';
+import { getQuestionnaires } from 'src/resources/useQuestionaires';
+import { getUser } from 'src/resources/user';
+
+export default async function Home() {
+  const user = await getUser();
+  const profiles = await getQuestionnaires(user?.id);
+
+  if (!user) {
+    redirect('/');
+  }
 
-const Home = () => {
-  const user = useUser();
-  const profiles = useQuestionnaires(user?.id);
   return (
     <>
       <h1>Hello {user.user_metadata.name}</h1>
@@ -26,6 +33,4 @@ const Home = () => {
       </section>
     </>
   );
-};
-
-export default Home;
+}
diff --git a/src/features/questonnaire/index.tsx b/src/features/questonnaire/index.tsx
@@ -1,8 +1,8 @@
+'use client';
 import { useForm } from 'react-hook-form';
-import Head from 'next/head';
 import { Questionnaire } from './types';
-import { useUser } from 'src/hooks/useUser';
 import { usePostQuestionnaire } from './usePostQuestionnaire';
+import { User } from '@supabase/supabase-js';
 
 const defaultValues: Questionnaire = {
   name: '',
@@ -12,12 +12,16 @@ const defaultValues: Questionnaire = {
   uid: '',
 };
 
-export const QuestionnaireForm = () => {
-  const user = useUser();
+type Props = {
+  user: User;
+};
+
+export const QuestionnaireForm = ({ user }: Props) => {
   const { register, handleSubmit } = useForm({
     defaultValues: { ...defaultValues, uid: user?.id },
   });
-  const { postQuestionnaire, isLoading, isSuccess, isError, error } = usePostQuestionnaire();
+  const { postQuestionnaire, isLoading, isSuccess, isError, error } =
+    usePostQuestionnaire();
   const onSubmit = (data: Questionnaire) => {
     postQuestionnaire(data);
   };

diff --git a/src/features/signin.component.tsx b/src/features/signin.component.tsx
@@ -1,4 +1,5 @@
-import Head from 'next/head';
+'use client';
+
 import { useSignIn } from 'src/hooks/useSignIn';
 
 export const SignInPage = () => {

diff --git a/src/hooks/useSignIn.ts b/src/hooks/useSignIn.ts
@@ -1,6 +1,6 @@
-import { useRouter } from 'next/router';
 import { ComponentProps, useState } from 'react';
 import { supabase } from '../supabase';
+import { useRouter } from 'next/navigation';
 
 export const useSignIn = () => {
   const [loading, setLoading] = useState(false);

diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
diff --git a/src/resources/useQuestionaires.ts b/src/resources/useQuestionaires.ts
@@ -1,18 +1,13 @@
 import { QuestionnaireSchema } from 'src/features/questonnaire/types';
-import { useSuspense } from 'src/hooks/useSuspense';
 import { supabase } from 'src/supabase';
 import z from 'zod';
 import ck from 'camelcase-keys';
 
-const ref = {};
-
-export const useQuestionnaires = (uid?: string) => {
-  return useSuspense(async () => {
-    if (!uid) return [];
-    const { data, error } = await supabase.from('questionnaires').select().eq('uid', uid);
-    if (error) throw error;
-    const result = z.array(QuestionnaireSchema).safeParse(ck(data, { deep: true }));
-    if (!result.success) throw result.error;
-    return result.data;
-  }, ref);
+export const getQuestionnaires = async (uid?: string) => {
+  if (!uid) return [];
+  const { data, error } = await supabase.from('questionnaires').select().eq('uid', uid);
+  if (error) throw error;
+  const result = z.array(QuestionnaireSchema).safeParse(ck(data, { deep: true }));
+  if (!result.success) throw result.error;
+  return result.data;
 };
diff --git a/src/resources/user/index.ts b/src/resources/user/index.ts
@@ -0,0 +1,10 @@
+'use server';
+import { supabase } from 'src/supabase';
+
+export const getUser = async () => {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return user;
+};