refactor: use render prop

frouriojs · Jun 21, 2024 · bf4866e · bf4866e
1 parent 1d767ea
commit bf4866e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 42 deletions.
diff --git a/client/components/Auth/AuthLoader.tsx b/client/components/Auth/AuthLoader.tsx
@@ -52,11 +52,8 @@ export const AuthLoader = () => {
       async (data) => {
         switch (data.payload.event) {
           case 'customOAuthState':
-            break;
           case 'signInWithRedirect':
-            break;
           case 'signInWithRedirect_failure':
-            break;
           case 'tokenRefresh':
             break;
           case 'signedOut':

diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
@@ -9,7 +9,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { pagesPath } from 'utils/$path';
 
-export const Layout = (props: { content: (user: UserEntity) => React.ReactNode }) => {
+export const Layout = (props: { render: (user: UserEntity) => React.ReactNode }) => {
   const router = useRouter();
   const { user } = useUser();
   const { loadingElm } = useLoading();
@@ -18,7 +18,7 @@ export const Layout = (props: { content: (user: UserEntity) => React.ReactNode }
 
   if (!user.inited) {
     return <Loading visible />;
-  } else if (!user.data) {
+  } else if (user.data === null) {
     void router.replace(pagesPath.$url());
 
     return <Loading visible />;
@@ -27,7 +27,7 @@ export const Layout = (props: { content: (user: UserEntity) => React.ReactNode }
   return (
     <div>
       <BasicHeader user={user.data} />
-      {props.content(user.data)}
+      {props.render(user.data)}
       {loadingElm}
       {alertElm}
       {confirmElm}

diff --git a/client/pages/console/index.page.tsx b/client/pages/console/index.page.tsx
@@ -1,4 +1,5 @@
 import type { TaskEntity } from 'api/@types/task';
+import type { UserEntity } from 'api/@types/user';
 import { Loading } from 'components/Loading/Loading';
 import { Layout } from 'layouts/Layout';
 import type { FormEvent } from 'react';
@@ -7,7 +8,7 @@ import { apiClient } from 'utils/apiClient';
 import { returnNull } from 'utils/returnNull';
 import styles from './index.module.css';
 
-const Console = () => {
+const Main = (props: { user: UserEntity }) => {
   const [tasks, setTasks] = useState<TaskEntity[]>();
   const [label, setLabel] = useState('');
   const fetchTasks = async () => {
@@ -41,44 +42,44 @@ const Console = () => {
   if (!tasks) return <Loading visible />;
 
   return (
-    <Layout
-      content={(user) => (
-        <div className={styles.container}>
-          <div>Todo list of {user.name}</div>
-          <div className={styles.main}>
-            <div className={styles.card}>
-              <form onSubmit={createTask}>
-                <div className={styles.controls}>
-                  <input
-                    value={label}
-                    className={styles.textInput}
-                    type="text"
-                    placeholder="Todo task"
-                    onChange={(e) => setLabel(e.target.value)}
-                  />
-                  <input className={styles.btn} disabled={label === ''} type="submit" value="ADD" />
-                </div>
-              </form>
+    <div className={styles.container}>
+      <div>Todo list of {props.user.name}</div>
+      <div className={styles.main}>
+        <div className={styles.card}>
+          <form onSubmit={createTask}>
+            <div className={styles.controls}>
+              <input
+                value={label}
+                className={styles.textInput}
+                type="text"
+                placeholder="Todo task"
+                onChange={(e) => setLabel(e.target.value)}
+              />
+              <input className={styles.btn} disabled={label === ''} type="submit" value="ADD" />
             </div>
-            {tasks.map((task) => (
-              <div key={task.id} className={styles.card}>
-                <div className={styles.controls}>
-                  <input type="checkbox" checked={task.done} onChange={() => toggleDone(task)} />
-                  <span>{task.label}</span>
-                  <input
-                    type="button"
-                    value="DELETE"
-                    className={styles.btn}
-                    onClick={() => deleteTask(task)}
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
+          </form>
         </div>
-      )}
-    />
+        {tasks.map((task) => (
+          <div key={task.id} className={styles.card}>
+            <div className={styles.controls}>
+              <input type="checkbox" checked={task.done} onChange={() => toggleDone(task)} />
+              <span>{task.label}</span>
+              <input
+                type="button"
+                value="DELETE"
+                className={styles.btn}
+                onClick={() => deleteTask(task)}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 
+const Console = () => {
+  return <Layout render={(user) => <Main user={user} />} />;
+};
+
 export default Console;