Merge pull request #36 from joshxfi/dev

release: v1.0.5 - beta
joshxfi · Mar 6, 2022 · 92d7a5e · 92d7a5e · vercel · Mar 6, 2022
2 parents be6798e + 0894f52
commit 92d7a5e
Show file tree

Hide file tree

Showing 38 changed files with 646 additions and 349 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -5,6 +5,10 @@ on:
     branches:
       - main
       - dev
+  pull_request:
+    branches:
+      - main
+      - dev
 
 jobs:
   lint:
@@ -21,7 +25,7 @@ jobs:
           node-version: 16
 
       - name: Install dependencies
-        run: yarn install
+        run: yarn
 
       - name: Lint files
         run: yarn lint

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "track-as-one",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -43,6 +43,8 @@
     "husky": "^7.0.0",
     "lint-staged": "^12.3.2",
     "postcss": "^8.4.4",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.1",
     "typescript": "4.4.3"
   },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -8,7 +8,7 @@ import NProgress from 'nprogress';
 import { DefaultSeo } from 'next-seo';
 import { Toaster } from 'react-hot-toast';
 import { AppPropsWithLayout } from '@/types/page';
-import { AuthProvider } from '@/context/AuthContext';
+import { AuthProvider } from '@/contexts/AuthContext';
 
 import SEO from '../next-seo-config';
 
@@ -22,7 +22,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   return (
     <AuthProvider>
       <DefaultSeo {...SEO} />
-      <Toaster />
+      <Toaster position='bottom-center' />
       {getLayout(<Component {...pageProps} />)}
     </AuthProvider>
   );

diff --git a/pages/create.tsx b/pages/create.tsx
@@ -8,37 +8,36 @@ import { doc, setDoc, serverTimestamp } from 'firebase/firestore';
 
 import { db } from '@/config/firebase';
 import { useCreatedRooms } from '@/services';
-import { Button } from '@/components/Button';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/contexts/AuthContext';
+import { Layout, RoomInput } from '@/components';
 import { NextPageWithLayout } from '@/types/page';
-import { Header, Input, Layout } from '@/components';
 
 const Create: NextPageWithLayout = () => {
   const [roomName, setRoomName] = useState<string>('');
 
   const { push } = useRouter();
   const {
-    data: { id },
+    data: { userTag },
   } = useAuth();
 
-  const [roomsCreated] = useCreatedRooms(id);
+  const [roomsCreated] = useCreatedRooms(userTag);
 
   const createRoom = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const roomId = nanoid(5);
 
     const payload: IRoom = {
       name: roomName,
-      creator: id!,
+      creator: userTag,
       admin: [],
       members: [],
       dateAdded: serverTimestamp(),
       requests: [],
     };
 
     setRoomName('');
-    if (roomsCreated && roomsCreated.length >= 3) {
-      toast.error('max rooms reached (3)');
+    if (roomsCreated && roomsCreated.length >= 5) {
+      toast.error('max rooms reached (5)');
     } else if (roomName) {
       toast.promise(setDoc(doc(db, 'rooms', roomId), payload), {
         loading: 'Creating Room...',
@@ -51,31 +50,17 @@ const Create: NextPageWithLayout = () => {
   };
 
   return (
-    <>
-      <Header title='Create a Room' />
-      <form
-        onSubmit={createRoom}
-        className='w-full flex justify-center flex-col items-center'
-      >
-        <Input
-          onChange={(e) => setRoomName(e.target.value)}
-          value={roomName}
-          placeholder='enter room name'
-          minLength={5}
-          maxLength={15}
-        />
-
-        <div className='inline-block mx-auto mt-2'>
-          <Button
-            name='create room'
-            type='submit'
-            className='btn btn-effect'
-            iconStyles='text-secondary text-xl'
-            Icon={BiDoorOpen}
-          />
-        </div>
-      </form>
-    </>
+    <RoomInput
+      title='Create a Room'
+      btnLabel='create room'
+      Icon={BiDoorOpen}
+      onSubmit={createRoom}
+      onChange={(e) => setRoomName(e.target.value)}
+      value={roomName}
+      placeholder='enter room name'
+      minLength={3}
+      maxLength={25}
+    />
   );
 };
 

diff --git a/pages/home.tsx b/pages/home.tsx
@@ -14,28 +14,37 @@ import { MyRooms } from '@/components/Home';
 import { defaultPic } from '@/utils/constants';
 import { Button } from '@/components/Button';
 import { useCreatedRooms } from '@/services';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/contexts/AuthContext';
 
 const Homepage: React.FC = () => {
   const { push } = useRouter();
   const {
-    data: { id, username, photoURL },
+    data: { username, photoURL, userTag },
   } = useAuth();
 
-  const [createdRooms, crLoading] = useCreatedRooms(id);
+  const [createdRooms, crLoading] = useCreatedRooms(userTag);
   const [joinedRooms, jrLoading] = useCol<IRoom>(
-    query(collection(db, 'rooms'), where('members', 'array-contains', id ?? ''))
+    query(
+      collection(db, 'rooms'),
+      where('members', 'array-contains', userTag ?? '')
+    )
+  );
+  const [joinedRoomsAsAdmin, jraLoading] = useCol<IRoom>(
+    query(
+      collection(db, 'rooms'),
+      where('admin', 'array-contains', userTag ?? '')
+    )
   );
 
   const copyTag = () => {
-    navigator.clipboard.writeText(id ?? '');
+    navigator.clipboard.writeText(userTag ?? '');
     toast.success('copied to clipboard');
   };
 
   return (
-    <Layout loaders={[crLoading, jrLoading]} className='mb-16'>
-      <div className='flex flex-col items-center mt-8 w-full space-y-4'>
-        <div className='h-[100px] w-[100px] rounded-full p-2 primary-gradient'>
+    <Layout loaders={[crLoading, jrLoading, jraLoading]} className='mb-16'>
+      <div className='mt-8 flex w-full flex-col items-center space-y-4'>
+        <div className='primary-gradient h-[100px] w-[100px] rounded-full p-2'>
           <Image
             src={photoURL ?? defaultPic}
             height={100}
@@ -49,12 +58,12 @@ const Homepage: React.FC = () => {
         <div className='text-center'>
           <div>
             <h1 className='text-2xl font-bold'>{username}</h1>
-            <p>{id}</p>
+            <p>{userTag}</p>
           </div>
         </div>
       </div>
 
-      <div className='primary-gradient h-[2px] my-4 w-full' />
+      <div className='primary-gradient my-4 h-[2px] w-full' />
 
       <div className='flex-between space-x-2'>
         <Button
@@ -74,7 +83,10 @@ const Homepage: React.FC = () => {
         />
       </div>
 
-      <MyRooms createdRooms={createdRooms} joinedRooms={joinedRooms} />
+      <MyRooms
+        createdRooms={createdRooms}
+        joinedRooms={[...(joinedRooms ?? []), ...(joinedRoomsAsAdmin ?? [])]}
+      />
     </Layout>
   );
 };

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,7 +7,7 @@ import { FaSignInAlt } from 'react-icons/fa';
 import { Layout } from '@/components';
 import avatar from '@/assets/avatar.svg';
 import { Button } from '@/components/Button';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/contexts/AuthContext';
 import { landingPage } from '@/utils/constants';
 import { NextPageWithLayout } from '@/types/page';
 
@@ -17,16 +17,16 @@ const Index: NextPageWithLayout = () => {
 
   return (
     <>
-      <section className='flex flex-col items-center mx-auto max-w-screen-xl lg:items-start lg:mt-20 lg:flex-row lg:justify-between'>
-        <div className='pt-8 lg:flex lg:justify-between lg:flex-col lg:items-start text-center'>
-          <h1 className='text-5xl font-bold md:text-7xl xl:text-8xl lg:mb-2'>
+      <section className='mx-auto flex max-w-screen-xl flex-col items-center lg:mt-20 lg:flex-row lg:items-start lg:justify-between'>
+        <div className='pt-8 text-center lg:flex lg:flex-col lg:items-start lg:justify-between'>
+          <h1 className='text-5xl font-bold md:text-7xl lg:mb-2 xl:text-8xl'>
             trackAs
             <span className='gradient-text'>One</span>
           </h1>
 
-          <div className='flex flex-col items-center lg:items-start max-w-screen-xl lg:pl-2'>
+          <div className='flex max-w-screen-xl flex-col items-center lg:items-start lg:pl-2'>
             <div className='text-center lg:text-left'>
-              <div className='my-8 w-[300px] mx-auto lg:hidden'>
+              <div className='my-8 mx-auto w-[300px] lg:hidden'>
                 <Image
                   priority
                   src={avatar}
@@ -35,11 +35,11 @@ const Index: NextPageWithLayout = () => {
                 />
               </div>
 
-              <h1 className='text-2xl font-semibold xl:text-3xl xl:w-auto font-serif'>
+              <h1 className='font-serif text-2xl font-semibold xl:w-auto xl:text-3xl'>
                 A collaborative task tracker.
               </h1>
 
-              <p className='mt-2 text-md sm:text-lg lg:w-[540px] xl:w-[650px] xl:text-xl'>
+              <p className='text-md mt-2 sm:text-lg lg:w-[540px] xl:w-[650px] xl:text-xl'>
                 {landingPage.body1}
               </p>
             </div>
@@ -53,13 +53,13 @@ const Index: NextPageWithLayout = () => {
           </div>
         </div>
 
-        <div className='w-[400px] hidden lg:block pt-12'>
+        <div className='hidden w-[400px] pt-12 lg:block'>
           <Image src={avatar} objectFit='contain' alt='trackAsOne avatar' />
         </div>
       </section>
 
-      <section className='md:my-40 my-20 border-y-2 border-primary md:py-12 py-5'>
-        <ul className='text-md sm:text-2xl md:text-3xl xl:text-5xl text-primary flex justify-between text-opacity-90'>
+      <section className='my-20 border-y-2 border-primary py-5 md:my-40 md:py-12'>
+        <ul className='text-md flex justify-between text-primary text-opacity-90 sm:text-2xl md:text-3xl xl:text-5xl'>
           {['User-Friendly', 'Collaborative', 'Open-Source'].map((i) => (
             <li key={i}>
               <p className='font-serif font-semibold'>{i}</p>
@@ -68,7 +68,7 @@ const Index: NextPageWithLayout = () => {
         </ul>
       </section>
 
-      <section className='mx-auto max-w-screen-xl pb-40 md:space-y-40 space-y-24'>
+      <section className='mx-auto max-w-screen-xl space-y-24 pb-40 md:space-y-40'>
         <Info
           title='Built by a student for students.'
           body={landingPage.body2}
@@ -96,10 +96,10 @@ interface InfoProps {
 const Info = ({ title, body }: InfoProps) => {
   return (
     <div className='flex flex-col items-center'>
-      <h1 className='text-xl sm:text-2xl lg:text-4xl font-semibold font-serif'>
+      <h1 className='font-serif text-xl font-semibold sm:text-2xl lg:text-4xl'>
         {title}
       </h1>
-      <p className='text-md mt-2 sm:text-lg lg:w-[490px] xl:w-[670px] xl:text-xl text-center'>
+      <p className='text-md mt-2 text-center sm:text-lg lg:w-[490px] xl:w-[670px] xl:text-xl'>
         {body}
       </p>
     </div>

diff --git a/pages/invites.tsx b/pages/invites.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useUser } from '@/services';
 import { Invitation } from '@/components/Home';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/contexts/AuthContext';
 import { Layout, Header, EmptyMsg } from '@/components';
 
 const Invites: React.FC = () => {
@@ -12,7 +12,7 @@ const Invites: React.FC = () => {
     <Layout loaders={[loading]}>
       <Header title='Invitation' />
       {!user?.invites?.length && <EmptyMsg empty='invites' />}
-      <div className='w-full mb-4'>
+      <div className='mb-4 w-full space-y-2'>
         {user?.invites?.map((roomId) => (
           <Invitation user={user} key={roomId} roomId={roomId} />
         ))}