Made onClose for login modal optionall

client/components/BrowseLayout.tsx

@@ -1,38 +0,0 @@
-import { ArrowLeftIcon } from '@heroicons/react/24/outline';
-
-import Button from './Button';
-import NavBar from './NavBar';
-import SideNavChannel from './SideNavChannel';
-import streamData from '../placeholder/GetStreams';
-import { NextPage } from 'next';
-import Link from 'next/link';
-
-const BrowseLayout: NextPage = ({children}) => {
-  return (
-    <div className="font-inter flex flex-col h-screen text-gray-100">
-      <NavBar />
-      <main className="flex-1 flex flex-row overflow-hidden">
-        <div className="bg-neutral-800 w-60 flex flex-col">
-          <div className="flex flex-row justify-between p-2 items-center">
-            <p className="uppercase font-semibold text-sm">Trending channels</p>
-            <Button variant="subtle" className="p-2">
-              <ArrowLeftIcon className="w-4 h-4" />
-            </Button>
-          </div>
-          <ul className="flex-1 overflow-scrollbar">
-            {streamData.data.map((stream) => (
-              <li key={stream.id}>
-                <Link href={`/${stream.user_login}`} passHref={true}>
-                  <SideNavChannel stream={stream} />
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-        {children}
-      </main>
-    </div>
-  );
-}
-
-export default BrowseLayout;

client/components/NavBar.tsx

@@ -1,65 +0,0 @@
-import { UserIcon } from '@heroicons/react/24/outline';
-import { FC, useState } from 'react';
-
-import Button from './Button';
-import Input from './Input';
-import LoginModal from './LoginModal';
-
-const NavBar: FC = () => {
-  const [showLogin, setShowLogin] = useState(false);
-  const [showTab, setShowTab] = useState(0);
-
-  const showLoginTab = () => {
-    setShowTab(0);
-    setShowLogin(true);
-  };
-
-  const showSignupTab = () => {
-    setShowTab(1);
-    setShowLogin(true);
-  };
-
-  return (
-    <nav className="bg-zinc-800 w-screen font-semibold border-b border-b-black">
-      <div className="flex flex-row justify-between items-center mx-2">
-        <div className="basis-1/4">
-          <ul className="flex flex-row space-x-8 items-center">
-            <li>
-              <img src="./assets/images/logo.png" className="w-8 h-8" alt="logo" />
-            </li>
-            <li>
-              <p className="text-lg">Browse</p>
-            </li>
-          </ul>
-        </div>
-        <div className="basis-2/4">
-          <div className="flex flex-row space-x-3 items-center justify-center">
-            <Input className=" w-72 my-2 p-2" placeholder="Search" />
-          </div>
-        </div>
-        <div className="basis-1/4">
-          <ul className="justify-end flex flex-row space-x-3 items-center">
-            <li>
-              <Button className="text-sm px-3 py-2 bg-neutral-700" onClick={showLoginTab}>
-                Log In
-              </Button>
-            </li>
-            <li>
-              <Button className="text-sm px-3 py-2 bg-violet-500" onClick={showSignupTab}>
-                Sign Up
-              </Button>
-            </li>
-            <li>
-              <Button variant="subtle" className="p-1">
-                <UserIcon className="h-5 w-5 inline-block" />
-              </Button>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <LoginModal isOpen={showLogin} defaultPage={showTab} onClose={() => setShowLogin(false)} />
-    </nav>
-  );
-};
-
-export default NavBar;

client/components/SideNavChannel.tsx

@@ -1,28 +0,0 @@
-import { FC } from 'react';
-
-import { Stream } from '../types';
-import { numFormatter } from '../utils/format';
-
-interface SideNavChannelProps {
-  stream: Stream;
-}
-
-const SideNavChannel: FC<SideNavChannelProps> = ({ stream }) => {
-  return (
-    <div className="flex flex-row px-3 py-2 text-sm leading-4 space-x-2 hover:bg-neutral-700/40 cursor-pointer">
-      <img className="rounded-full w-8 h-8" src={stream.thumbnail_url} alt="avatar" />
-      <div className="flex flex-col flex-1">
-        <div className="flex flex-row justify-between">
-          <div className="font-bold">{stream.user_name}</div>
-          <div className="space-x-1 flex flex-row items-center">
-            <div className="w-2 h-2 bg-red-600 rounded-full inline-block" />
-            <span>{numFormatter.format(stream.viewer_count)}</span>
-          </div>
-        </div>
-        <div className="text-gray-300">{stream.game_name}</div>
-      </div>
-    </div>
-  );
-};
-
-export default SideNavChannel;

client/components/common/Logo.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react"
+
+interface LogoProps {
+  className?: string
+}
+
+const Logo: FC<LogoProps> = ({ className }) => {
+  return <img src="./assets/images/logo.png" className={className} alt="logo" />
+}
+
+export default Logo

client/components/common/form/FormField.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import { forwardRef, ReactNode } from "react"
 
-import Input from "./Input"
+import Input from "../Input"
 
 interface FormFieldProps extends React.ComponentPropsWithoutRef<"input"> {
   label?: string

client/components/layout/BrowseLayout.tsx

@@ -0,0 +1,13 @@
+import NavBar from "../nav/NavBar"
+import { NextPage } from "next"
+
+const BrowseLayout: NextPage = ({ children }) => {
+  return (
+    <div className="font-inter flex flex-col h-screen text-gray-100">
+      <NavBar />
+      <main className="flex-1 flex flex-row overflow-hidden">{children}</main>
+    </div>
+  )
+}
+
+export default BrowseLayout

client/components/login/LoginForm.tsx

@@ -1,30 +1,30 @@
-import { FC } from 'react';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import { FC } from "react"
+import { useForm, SubmitHandler } from "react-hook-form"
 
-import FormField from './FormField';
-import InlineLink from './InlineLink';
-import SubmitButton from './SubmitButton';
+import FormField from "../common/form/FormField"
+import InlineLink from "../common/InlineLink"
+import SubmitButton from "../common/form/SubmitButton"
 
 interface LoginFormValues {
-  username: string;
-  password: string;
+  username: string
+  password: string
 }
 
 const LoginForm: FC = () => {
-  const { register, handleSubmit } = useForm<LoginFormValues>();
-  const onSubmit: SubmitHandler<LoginFormValues> = (data) => console.log(data);
+  const { register, handleSubmit } = useForm<LoginFormValues>()
+  const onSubmit: SubmitHandler<LoginFormValues> = (data) => console.log(data)
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <FormField
         label="Username"
         className="py-2 px-2 outline-2 w-full"
-        {...register('username')}
+        {...register("username")}
       />
       <FormField
         label="Password"
         type="password"
-        {...register('password')}
+        {...register("password")}
         className="py-2 px-2 outline-2 w-full"
         bottomElement={
           <InlineLink to="#" className="block mt-2">
@@ -34,7 +34,7 @@ const LoginForm: FC = () => {
       />
       <SubmitButton className="w-full" value="Log In" />
     </form>
-  );
-};
+  )
+}
 
-export default LoginForm;
+export default LoginForm

client/components/login/LoginModal.tsx

@@ -1,33 +1,42 @@
-import { Dialog, Tab } from '@headlessui/react';
-import { FC, useEffect, useRef } from 'react';
+import { Dialog, Tab } from "@headlessui/react"
+import { FC } from "react"
+import Logo from "../common/Logo"
 
-import LoginForm from './LoginForm';
-import LoginModalTab from './LoginModalTab';
-import SignupForm from './SignupForm';
+import LoginForm from "./LoginForm"
+import LoginModalTab from "./LoginModalTab"
+import SignupForm from "./SignupForm"
 
 export interface LoginModelProps {
-  isOpen: boolean;
-  onClose: () => any;
-  defaultPage?: number;
+  isOpen: boolean
+  onClose?: () => any
+  defaultPage?: number
 }
 
-const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
+const LoginModal: FC<LoginModelProps> = ({
+  defaultPage,
+  isOpen,
+  onClose = (b: boolean) => {},
+}) => {
   return (
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
       <div className="bg-black/80 fixed inset-0 flex items-center justify-center">
         <Dialog.Panel className="bg-zinc-900 text-gray-100 w-[420px] rounded-md py-12 px-6">
           <div className="flex flex-row items-center justify-center">
             <Dialog.Title className="text-xl">
-              <img src="./assets/images/logo.png" className="inline w-12 h-12" alt="logo" /> Log in to twitch-clone
+              <Logo className="inline w-12 h-12" /> Log in to twitch-clone
             </Dialog.Title>
           </div>
           <Tab.Group defaultIndex={defaultPage}>
             <Tab.List className="space-x-4 border-b border-b-neutral-100/40 mt-4">
               <Tab>
-                {({ selected }) => <LoginModalTab selected={selected}>Log In</LoginModalTab>}
+                {({ selected }) => (
+                  <LoginModalTab selected={selected}>Log In</LoginModalTab>
+                )}
               </Tab>
               <Tab>
-                {({ selected }) => <LoginModalTab selected={selected}>Sign Up</LoginModalTab>}
+                {({ selected }) => (
+                  <LoginModalTab selected={selected}>Sign Up</LoginModalTab>
+                )}
               </Tab>
             </Tab.List>
             <Tab.Panels className="mt-4">
@@ -41,7 +50,8 @@ const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
           </Tab.Group>
         </Dialog.Panel>
       </div>
-    </Dialog>)
-};
+    </Dialog>
+  )
+}
 
-export default LoginModal;
+export default LoginModal

client/components/login/SignupForm.tsx

@@ -1,19 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { SelfServiceRegistrationFlow } from "@ory/client"
-import { useRouter } from "next/router"
-import { useMemo } from "react"
-import { FC, useEffect, useState } from "react"
+import { FC } from "react"
 import { SubmitHandler, useForm } from "react-hook-form"
 import { z } from "zod"
-import ory from "../services/ory"
 
-import FormField from "./FormField"
-import InlineLink from "./InlineLink"
-import Input from "./Input"
-import SubmitButton from "./SubmitButton"
-
-const PASSWORD_REGEX =
-  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/
+import FormField from "../common/form/FormField"
+import InlineLink from "../common/InlineLink"
+import Input from "../common/Input"
+import SubmitButton from "../common/form/SubmitButton"
+import { PASSWORD_REGEX } from "../../config"
+import useSignUpFlow from "../../hooks/useSignUpFlow"
 
 const SignupFormSchema = z
   .object({
@@ -48,71 +43,35 @@ const formFields = [
 ]
 
 const SignupForm: FC = () => {
-  const router = useRouter()
-  const [flow, setFlow] = useState<SelfServiceRegistrationFlow>()
-  const { flow: flowId, return_to: returnTo } = router.query
+  const signUpFlow = useSignUpFlow()
   const { register, handleSubmit, formState } = useForm<SignupFormValues>({
     resolver: zodResolver(SignupFormSchema),
   })
 
-  useEffect(() => {
-    const func = async () => {
-      if (!router.isReady || flow) {
-        return
-      }
-
-      let serviceFlow
-      if (flowId) {
-        serviceFlow = await ory.getSelfServiceRegistrationFlow(String(flowId))
-      } else {
-        serviceFlow =
-          await ory.initializeSelfServiceRegistrationFlowForBrowsers(
-            returnTo ? String(returnTo) : undefined,
-          )
-      }
-
-      setFlow(serviceFlow.data)
-    }
-
-    func()
-  }, [flowId, router, router.isReady, returnTo, flow])
-
   const onSubmit: SubmitHandler<SignupFormValues> = async (data) => {
-    await router.push(`/signup?flow=${flow?.id}`, undefined, {
-      shallow: true,
+    await signUpFlow.submitData({
+      csrf_token: data.csrfToken,
+      method: "password",
+      password: data.password,
+      traits: {
+        email: data.email,
+      },
     })
-    try {
-      const resp = await ory.submitSelfServiceRegistrationFlow(
-        String(flow?.id),
-        {
-          csrf_token: data.csrfToken,
-          method: "password",
-          password: data.password,
-          traits: {
-            email: data.email,
-            // username: data.username,
-          },
-        },
-      )
-      console.log(resp)
-    } catch (e) {
-      console.log(e)
-    }
   }
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      {flow && (
-        <Input
-          hidden={true}
-          value={flow.ui.nodes[0].attributes.value}
-          {...register("csrfToken")}
-        />
-      )}
       <p className="text-sm">
         Creating an account allows you to participate in chat, follow your
         favorite channels, and broadcast from your own channel.
       </p>
+      {signUpFlow.flow && (
+        <Input
+          hidden={true}
+          value={signUpFlow.flow.ui.nodes[0].attributes.value}
+          {...register("csrfToken")}
+        />
+      )}
       {formFields.map((field) => (
         <FormField
           key={field.id}
@@ -135,7 +94,11 @@ const SignupForm: FC = () => {
         </InlineLink>
         .
       </p>
-      <SubmitButton className="w-full" value="Sign Up" />
+      <SubmitButton
+        disabled={!signUpFlow.flow}
+        className="w-full"
+        value="Sign Up"
+      />
     </form>
   )
 }

client/components/message/ChatMessage.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC } from "react"
 
-import ChatBadge from './ChatBadge';
+import ChatBadge from "./ChatBadge"
 
 const ChatMessage: FC = () => {
   return (
@@ -19,7 +19,7 @@ const ChatMessage: FC = () => {
         />
       </span>
     </p>
-  );
-};
+  )
+}
 
-export default ChatMessage;
+export default ChatMessage

client/components/nav/NavBar.tsx

@@ -0,0 +1,70 @@
+import { UserIcon } from "@heroicons/react/24/outline"
+import { FC, useState } from "react"
+
+import Button from "../common/Button"
+import Logo from "../common/Logo"
+import LoginModal, { LoginModelProps } from "../login/LoginModal"
+
+const NavBar: FC = () => {
+  const [modalProps, setModalProps] = useState<LoginModelProps>({
+    isOpen: false,
+    defaultPage: 0,
+  })
+
+  const showLoginTab = () =>
+    setModalProps({
+      defaultPage: 0,
+      isOpen: true,
+    })
+
+  const showSignupTab = () =>
+    setModalProps({
+      defaultPage: 1,
+      isOpen: true,
+    })
+
+  return (
+    <nav className="bg-zinc-800 w-screen font-semibold border-b border-b-black">
+      <div className="flex flex-row justify-between items-center h-12 mx-2">
+        <div>
+          <ul className="flex flex-row space-x-8 items-center">
+            <li>
+              <Logo className="w-8 h-8" />
+            </li>
+          </ul>
+        </div>
+        <div>
+          <ul className="justify-end flex flex-row space-x-3 items-center">
+            <li>
+              <Button
+                className="text-sm px-3 py-2 bg-neutral-700"
+                onClick={showLoginTab}
+              >
+                Log In
+              </Button>
+            </li>
+            <li>
+              <Button
+                className="text-sm px-3 py-2 bg-violet-500"
+                onClick={showSignupTab}
+              >
+                Sign Up
+              </Button>
+            </li>
+            <li>
+              <Button variant="subtle" className="p-[0.4rem]">
+                <UserIcon className="h-5 w-5 inline-block" />
+              </Button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <LoginModal
+        {...modalProps}
+        onClose={() => setModalProps((old) => ({ ...old, isOpen: false }))}
+      />
+    </nav>
+  )
+}
+
+export default NavBar

client/config/index.ts

@@ -1 +1,3 @@
 export const KRATOS_URL = "http://127.0.0.1:4433"
+export const PASSWORD_REGEX =
+  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/

client/hooks/useSignUpFlow.ts

@@ -0,0 +1,54 @@
+import {
+  SelfServiceRegistrationFlow,
+  SubmitSelfServiceRegistrationFlowBody,
+} from "@ory/client"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import ory from "../services/ory"
+
+export const useSignUpFlow = () => {
+  const router = useRouter()
+  const [flow, setFlow] = useState<SelfServiceRegistrationFlow>()
+  const { flow: flowId, return_to: returnTo } = router.query
+
+  useEffect(() => {
+    const func = async () => {
+      if (!router.isReady || flow) {
+        return
+      }
+
+      let serviceFlow
+      if (flowId) {
+        serviceFlow = await ory.getSelfServiceRegistrationFlow(String(flowId))
+      } else {
+        serviceFlow =
+          await ory.initializeSelfServiceRegistrationFlowForBrowsers(
+            returnTo ? String(returnTo) : undefined,
+          )
+      }
+
+      setFlow(serviceFlow.data)
+    }
+
+    func()
+  }, [flowId, router, router.isReady, returnTo, flow])
+
+  const submitData = async (data: SubmitSelfServiceRegistrationFlowBody) => {
+    await router.push(`/signup?flow=${flow?.id}`, undefined, {
+      shallow: true,
+    })
+    try {
+      const resp = await ory.submitSelfServiceRegistrationFlow(
+        String(flow?.id),
+        data,
+      )
+      // TODO: handle registration
+    } catch (e) {
+      // TODO: handle errors
+    }
+  }
+
+  return { flow, submitData }
+}
+
+export default useSignUpFlow

client/package.json

@@ -38,7 +38,7 @@
     "cypress": "^9.6.0",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.1",
-    "ory-prettier-styles": "^1.1.2",
+    "ory-prettier-styles": "^1.3.0",
     "postcss": "^8.4.18",
     "prettier": "^2.3.2",
     "tailwindcss": "^3.1.8",

client/pages/[channel]/index.tsx

@@ -1,68 +1,42 @@
-import { ArrowRightIcon, HeartIcon, UserIcon } from '@heroicons/react/24/outline';
-
-import Button from '../../components/Button';
-import ChatMessage from '../../components/ChatMessage';
-import Input from '../../components/Input';
-import { numFormatter } from '../../utils/format';
-import streams from '../../placeholder/GetStreams';
-import { NextPage } from 'next';
-import BrowseLayout from '../../components/BrowseLayout';
+import Button from "../../components/common/Button"
+import ChatMessage from "../../components/message/ChatMessage"
+import Input from "../../components/common/Input"
+import streams from "../../placeholder/GetStreams"
+import { NextPage } from "next"
+import BrowseLayout from "../../components/layout/BrowseLayout"
 
 const ChannelPage: NextPage = () => {
-  const stream = streams.data[1];
+  const stream = streams.data[1]
 
   return (
     <BrowseLayout>
-    <div className="flex-1 flex flex-row">
-      <div className="bg-neutral-900 flex-1">
-        <div className="w-full h-auto aspect-video bg-red-200 " />
-        <div className="flex flex-row p-4 space-x-3">
-          <div className="w-20 h-20 bg-yellow-300 rounded-full" />
-          <div className="flex-1">
-            <div className="flex flex-row justify-between items-center">
-              <div className="font-bold">{stream.user_name}</div>
-              <div>
-                <Button className="h-8 w-10">
-                  <HeartIcon className="text-gray-100 h-5 w-5 mx-auto" />
-                </Button>
-              </div>
-            </div>
-            <div className="flex flex-row justify-between items-center">
-              <div className="space-y-1">
-                <div className="font-bold">{stream.title}</div>
-                <div className="text-violet-400">{stream.game_name}</div>
-              </div>
-              <div className="flex flex-row items-center text-sm space-x-3">
-                <span>
-                  <UserIcon className="h-5 w-5 inline-block" />
-                  <span>{numFormatter.format(stream.viewer_count)}</span>
-                </span>
-                <span>{stream.started_at}</span>
-              </div>
+      <div className="flex-1 flex flex-row">
+        <div className="bg-neutral-900 flex-1 flex flex-col">
+          <div className="w-full bg-red-200 flex-1" />
+          <div className="flex flex-row p-2 items-center justify-between">
+            <div className="flex flex-row items-center space-x-3">
+              <span className="w-8 h-8 bg-yellow-300 rounded-full" />
+              <span className="font-bold">{stream.user_name}</span>
             </div>
+            <div>1:14:32</div>
+          </div>
+        </div>
+        <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
+          <div className="flex flex-row justify-center items-center border-b border-b-zinc-700 p-2 h-12">
+            <p className="uppercase font-semibold text-sm">Stream Chat</p>
+          </div>
+          <div className="flex-1 overflow-scrollbar">
+            {new Array(60).fill(0).map((_, i) => (
+              <ChatMessage key={i} />
+            ))}
+          </div>
+          <div className="m-2">
+            <Input className="w-full p-2" placeholder="Send a message" />
           </div>
         </div>
       </div>
-      <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
-        <div className="flex flex-row justify-between items-center border-b border-b-zinc-700 p-2">
-          <Button variant="subtle" className="p-2">
-            <ArrowRightIcon className="w-4 h-4" />
-          </Button>
-          <p className="uppercase font-semibold text-sm">Stream Chat</p>
-          <div className="w-5" />
-        </div>
-        <div className="flex-1 overflow-scrollbar">
-          {new Array(60).fill(0).map((_, i) => (
-            <ChatMessage key={i} />
-          ))}
-        </div>
-        <div className="m-2">
-          <Input className="w-full p-2" placeholder="Send a message" />
-        </div>
-      </div>
-    </div>
     </BrowseLayout>
-  );
+  )
 }
 
-export default ChannelPage;
+export default ChannelPage

client/pages/category/[categoryName].tsx

@@ -1,7 +1,7 @@
-import { categories } from '../../placeholder/SearchCategories';
+import { categories } from "../../placeholder/SearchCategories"
 
 function ChannelPage() {
-  const category = categories.data[0];
+  const category = categories.data[0]
   return (
     <div className="flex-1 flex flex-row">
       <div className="bg-neutral-900 flex-1 text-gray-100">
@@ -20,7 +20,7 @@ function ChannelPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
-export default ChannelPage;
+export default ChannelPage

client/pages/login.tsx

@@ -1,13 +1,13 @@
-import { NextPage } from 'next';
+import { NextPage } from "next"
 
-import LoginModal from '../components/LoginModal';
+import LoginModal from "../components/login/LoginModal"
 
 const LoginPage: NextPage = () => {
   return (
     <div className="bg-neutral-900 w-screen h-screen">
-      <LoginModal isOpen={true} defaultPage={0} onClose={() => {}} />
+      <LoginModal isOpen={true} defaultPage={0} />
     </div>
-  );
-};
+  )
+}
 
-export default LoginPage;
+export default LoginPage

client/pages/signup.tsx

@@ -1,13 +1,12 @@
-
-import { NextPage } from 'next';
-import LoginModal from '../components/LoginModal';
+import { NextPage } from "next"
+import LoginModal from "../components/login/LoginModal"
 
 const SignupPage: NextPage = () => {
   return (
     <div className="bg-neutral-900 w-screen h-screen">
-      <LoginModal isOpen={true} defaultPage={1} onClose={() => {}} />
+      <LoginModal isOpen={true} defaultPage={1} />
     </div>
-  );
-};
+  )
+}
 
-export default SignupPage;
+export default SignupPage

client/pnpm-lock.yaml

@@ -16,7 +16,7 @@ specifiers:
   eslint: 7.32.0
   eslint-config-next: 12.0.1
   next: 12.1.5
-  ory-prettier-styles: ^1.1.2
+  ory-prettier-styles: ^1.3.0
   postcss: ^8.4.18
   prettier: ^2.3.2
   react: 17.0.2