feat:add home auth

cycleccc · Apr 30, 2024 · 714636f · 714636f
1 parent 3ae2017
commit 714636f
Show file tree

Hide file tree

Showing 16 changed files with 1,306 additions and 201 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@repo/types": "workspace:^",
     "@repo/typescript-config": "workspace:^",
@@ -27,6 +29,7 @@
     "next-auth": "4.23.1",
     "postcss": "8.4.29",
     "react-hot-toast": "2.3.0",
+    "react-textarea-autosize": "8.3.4",
     "sass": "1.54.4",
     "swr": "1.3.0",
     "tailwind-merge": "^2.3.0",

diff --git a/apps/web/src/app/LeftSidebar.tsx b/apps/web/src/app/LeftSidebar.tsx
diff --git a/apps/web/src/app/home/layout.tsx b/apps/web/src/app/home/layout.tsx
@@ -0,0 +1,14 @@
+import type { JSXElementConstructor } from 'react'
+import { MainLayout } from '@/components/layout/main-layout'
+
+export default function HomeLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactElement<any, string | JSXElementConstructor<any>> | React.ReactElement<any, string | JSXElementConstructor<any>>[]
+}) {
+  return (
+    <MainLayout>
+      { children }
+    </MainLayout>
+  )
+}
diff --git a/apps/web/src/app/home/page.tsx b/apps/web/src/app/home/page.tsx
@@ -18,7 +18,7 @@
 import { AnimatePresence } from 'framer-motion'
 // import { orderBy, where } from 'firebase/firestore'
 import { useWindow } from '@lib/context/window-context'
-import { useInfiniteScroll } from '@lib/hooks/useInfiniteScroll'
+// import { useInfiniteScroll } from '@lib/hooks/useInfiniteScroll'
 // import { tweetsCollection } from '@lib/firebase/collections'
 import { HomeLayout, ProtectedLayout } from '@components/layout/common-layout'
 import { MainLayout } from '@components/layout/main-layout'
@@ -33,53 +33,48 @@ import { Error } from '@components/ui/error'
 import type { ReactElement, ReactNode } from 'react'
 
 export default function Home(): JSX.Element {
-  const { isMobile } = useWindow()
-
-  const { data, loading, LoadMore } = useInfiniteScroll(
-    tweetsCollection,
-    [where('parent', '==', null), orderBy('createdAt', 'desc')],
-    { includeUser: true, allowNull: true, preserve: true },
-  )
+//   const { isMobile } = useWindow()
 
+  //   console.log('isMobile', isMobile)
+  //   const { data, loading, LoadMore } = useInfiniteScroll(
+  //     tweetsCollection,
+  //     [where('parent', '==', null), orderBy('createdAt', 'desc')],
+  //     { includeUser: true, allowNull: true, preserve: true },
+  //   )
+  const data: any = []
+  const loading = false
   return (
-    <MainContainer>
-      <SEO title="Home / Twitter" />
-      <MainHeader
-        useMobileSidebar
-        title="Home"
-        className="flex items-center justify-between"
-      >
-        <UpdateUsername />
-      </MainHeader>
-      {!isMobile && <Input />}
-      <section className="mt-0.5 xs:mt-0">
-        {loading
-          ? (
-            <Loading className="mt-5" />
-            )
-          : !data
-              ? (
-                <Error message="Something went wrong" />
-                )
-              : (
-                <>
-                  <AnimatePresence mode="popLayout">
-                    {data.map(tweet => (
-                      <Tweet {...tweet} key={tweet.id} />
-                    ))}
-                  </AnimatePresence>
-                  <LoadMore />
-                </>
-                )}
-      </section>
-    </MainContainer>
+    // <MainContainer>
+    //   <SEO title="Home / Twitter" />
+    //   <MainHeader
+    //     useMobileSidebar
+    //     title="Home"
+    //     className="flex items-center justify-between"
+    //   >
+    //     <UpdateUsername />
+    //   </MainHeader>
+    //   {!isMobile && <Input />}
+    //   <section className="mt-0.5 xs:mt-0">
+    //     {loading
+    //       ? (
+    //         <Loading className="mt-5" />
+    //         )
+    //       : !data
+    //           ? (
+    //             <Error message="Something went wrong" />
+    //             )
+    //           : (
+    //             <>
+    //               <AnimatePresence mode="popLayout">
+    //                 {/* {data.map(tweet => (
+    //                   <Tweet {...tweet} key={tweet.id} />
+    //                 ))} */}
+    //               </AnimatePresence>
+    //               {/* <LoadMore /> */}
+    //             </>
+    //             )}
+    //   </section>
+    // </MainContainer>
+    <div>1</div>
   )
 }
-
-Home.getLayout = (page: ReactElement): ReactNode => (
-  <ProtectedLayout>
-    <MainLayout>
-      <HomeLayout>{page}</HomeLayout>
-    </MainLayout>
-  </ProtectedLayout>
-)
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,13 +1,12 @@
 'use client'
-
 import { type ReactElement, type ReactNode, useEffect } from 'react'
 import { redirect, usePathname } from 'next/navigation'
 import { SEO } from '@components/common/seo'
 import { LoginMain } from '@components/login/login-main'
 import { LoginFooter } from '@components/login/login-footer'
 import { AuthLayout } from '@components/layout/auth-layout'
 import { getServerSession } from 'next-auth'
-// redirect('/home')
+
 export default function Login(): JSX.Element {
   return (
     <div className="grid min-h-screen grid-rows-[1fr,auto]">

diff --git a/apps/web/src/components/home/update-username.tsx b/apps/web/src/components/home/update-username.tsx
@@ -1,9 +1,9 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 
 import { useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
-import { checkUsernameAvailability, updateUsername } from '@lib/firebase/utils'
-import { useAuth } from '@lib/context/auth-context'
+// import { checkUsernameAvailability, updateUsername } from '@lib/firebase/utils'
+// import { useAuth } from '@lib/context/auth-context'
 import { useModal } from '@lib/hooks/useModal'
 import { isValidUsername } from '@lib/validation'
 import { sleep } from '@lib/utils'
@@ -24,15 +24,15 @@ export function UpdateUsername(): JSX.Element {
   const [inputValue, setInputValue] = useState('')
   const [errorMessage, setErrorMessage] = useState('')
 
-  const { user } = useAuth()
+  //   const { user } = useAuth()
   const { open, openModal, closeModal } = useModal()
 
   useEffect(() => {
     const checkAvailability = async (value: string): Promise<void> => {
       setSearching(true)
 
-      const empty = await checkUsernameAvailability(value)
-
+      //   const empty = await checkUsernameAvailability(value)
+      const empty = true
       if (empty) { setAvailable(true) }
       else {
         setAvailable(false)