app as of 1.5.2022

app/routes/__auth/logout.tsx

@@ -12,13 +12,11 @@ export const loader:LoaderFunction = async ({ request, context }) => {
   return {}
 }
 
-const Logout = () => {
+export const Logout = () => {
   return (
-    <>
-      <Form method="post">
-        <Button>logout</Button>
-      </Form>
-    </>
+    <Form action="/logout" method="post">
+      <Button>logout</Button>
+    </Form>
   )
 }
 

app/routes/app.tsx

@@ -0,0 +1,63 @@
+import type { LoaderFunction } from "@remix-run/cloudflare";
+import { Form, Link, Outlet } from "@remix-run/react";
+import { Typography } from "@supabase/ui";
+import { Users } from "react-feather";
+import { getSession } from "~/auth.server";
+import Logout from "./__auth/logout";
+
+export const loader: LoaderFunction = async ({ request, context }) => {
+  await getSession(context, request);
+  return {};
+};
+
+const Sidebar = () => {
+  return (
+    <div className="flex flex-col w-64 h-screen px-4 py-8 overflow-y-auto border-r" aria-label="Sidebar">
+      <div className="overflow-y-auto py-4 px-3rounded">
+        <h2 className="text-xl font-semibold text-center text-red-500">
+          <Link to="/app">
+            reconfigured
+          </Link>
+        </h2>
+        <div className="flex flex-col justify-between mt-6">
+          <aside>
+            <ul>
+              <li>
+                <Link className="flex items-center px-4 py-2 rounded-md" to="/app/userprofile">
+                  <Typography.Link>User Profile</Typography.Link>
+                </Link>
+              </li>
+              <li>
+                <Link className="flex items-center px-4 py-2 rounded-md" to="/app/teams">
+                  <Typography.Link>Teams</Typography.Link>
+                </Link>
+              </li>
+              <li>
+                <Form action="/logout" method="post">
+                  <button>
+                    <Typography.Link className="flex items-center px-4 py-2 rounded-md">Logout</Typography.Link>
+                  </button>
+                </Form>
+              </li>
+            </ul>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function App() {
+  return (
+    <>
+      <div className="flex">
+        <Sidebar />
+        <div className="w-full h-full p-4 m-8 overflow-y-auto">
+          {/* <div className="flex p-40 border-4 border-dotted"> */}
+            <Outlet />
+          {/* </div> */}
+        </div>
+      </div>
+    </>
+  );
+}

app/routes/app/index.tsx

@@ -0,0 +1,16 @@
+import type { LoaderFunction } from "@remix-run/cloudflare";
+import Title from "@supabase/ui/dist/cjs/components/Typography/Title";
+import { getSession } from "~/auth.server";
+
+export const loader: LoaderFunction = async ({ request, context }) => {
+  await getSession(context, request)
+  return {}
+}
+
+export default function App() {
+  return (
+    <>
+      <Title>This is app</Title>
+    </>
+  )
+}

app/routes/app/teams.tsx

@@ -0,0 +1,40 @@
+import type { ActionFunction, LoaderFunction } from "@remix-run/cloudflare";
+import { Form, useTransition } from "@remix-run/react";
+import { Button, Input } from "@supabase/ui";
+import Title from "@supabase/ui/dist/cjs/components/Typography/Title";
+import { getSession, getSupabase } from "~/auth.server";
+
+export const loader: LoaderFunction = async ({ request, context }) => {
+  await getSession(context, request);
+  return {};
+};
+
+export const action: ActionFunction = async ({ request, context }) => {
+  const session = await getSession(context, request);
+  const supabase = await getSupabase(context, session);
+  const formData = await request.formData();
+  const { error } = await supabase
+    .rpc('create_group', {
+      group_name: (formData.get('name') as string)
+    })
+  if (error) throw error;
+  return {};
+}
+
+export default function Teams() {
+  const { state } = useTransition()
+  return (
+    <>
+      <Title>Teams</Title>
+      <Form method="post">
+        <div className="sbui--col sbui-space-y-3">
+          <Input name="name" label="Create New Team" placeholder="Team name" />
+          <Button htmlType="submit" disabled={state === "submitting"}>
+            {state === "submitting" ? "Creating..." : "Create team"}
+          </Button>
+        </div>
+
+      </Form>
+    </>
+  );
+}

app/routes/userprofile.tsx → app/routes/app/userprofile.tsx

@@ -59,12 +59,12 @@ const Profile = () => {
       <Typography.Title level={1}>User Profile</Typography.Title>
       <Loading active={state === "submitting"}>
         <Form method="post" replace>
-        <div className="sbui-space-col sbui-space-y-3">
+        <div className="sbui--col sbui-space-y-3">
           <Input name="email" label="Email" value={email} disabled />
           <Input
             name="fullname"
             label="Full Name"
-            placeholder="Full Name"
+            placeholder="Fuspacell Name"
             defaultValue={fullName}
           />
           <Input

app/routes/index.tsx

@@ -1,32 +1,17 @@
-import type { LoaderFunction } from "@remix-run/cloudflare";
-import { Link } from "@remix-run/react";
-import { Typography } from "@supabase/ui";
+import type { LoaderFunction} from "@remix-run/cloudflare";
+import { redirect } from "@remix-run/cloudflare";
 import Title from "@supabase/ui/dist/cjs/components/Typography/Title";
 import { getSession } from "~/auth.server";
 
 export const loader: LoaderFunction = async ({ request, context }) => {
   await getSession(context, request);
-  return {};
+  return redirect('/app');
 };
 
 const Index = () => {
   return (
     <>
       <Title>hello</Title>
-      <nav>
-        <ul>
-          <li>
-            <Link to="/userprofile">
-              <Typography.Link>User Profile</Typography.Link>
-            </Link>
-          </li>
-          <li>
-            <Link to="/logout">
-              <Typography.Link>Logout</Typography.Link>
-            </Link>
-          </li>
-        </ul>
-      </nav>
     </>
   );
 };