Merge pull request #78 from joshxfi/dev

release: v1.1.0 beta

.husky/pre-push

@@ -0,0 +1,11 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run build ||
+  (
+    echo '❌ Build failed. Make the required changes listed above, add changes and try to commit again.'
+    false
+  )
+
+echo '✅ All checks passed.'
+echo '✏ Pushin your changes.'

README.md

@@ -6,7 +6,7 @@
 [trackAsOne](https://trackasone.me) is a collaborative platform for tracking school activities or homework along with your friends or classmates. You can create up to 5 rooms and invite your friends! Add due dates, URLs, and images to your tasks for your convenience. You can also assign room admins to help you manage your room.
 
 ## Installation
-You can use this application using your browser, visit [trackasone.me](https://trackasone.me). This project is a Progressive Web App (**PWA**) and you can install it as a mobile or desktop app. [Installation Guide](https://support.google.com/chrome/answer/9658361) (optional)
+You can use this application using your browser, visit [trackasone.me](https://trackasone.me) or [dev.trackasone.me](https://dev.trackasone.me) (pre-release). This project is a Progressive Web App (**PWA**) and you can install it as a mobile or desktop app. [Installation Guide](https://support.google.com/chrome/answer/9658361) (optional)
 
 ## Contributing
 If you want to contribute, make sure to review our [CODE OF CONDUCT](https://github.com/joshxfi/trackAsOne/blob/main/CODE_OF_CONDUCT.md). For bugs and feature requests, feel free to [open an issue](https://github.com/joshxfi/trackAsOne/issues).
@@ -45,6 +45,8 @@ $ yarn dev
 ```sh
 $ git add .
 $ git commit -m "chore: some changes"
+
+# Make sure to stop the dev server before pushing
 $ git push origin HEAD
 ```
 6. Submit a pull request on the `dev` branch. (resolve conflicts if present)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "track-as-one",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/create.tsx

@@ -37,8 +37,8 @@ const Create: NextPageWithLayout = () => {
       };
 
       setRoomName('');
-      if (roomsCreated && roomsCreated.length >= 5) {
-        toast.error('Max rooms reached (5)');
+      if (roomsCreated && roomsCreated.length >= 6) {
+        toast.error('Max rooms reached (6)');
       } else if (roomName) {
         await setDoc(doc(db, 'rooms', roomId), payload);
         toast.success('Room Created');

pages/home.tsx

@@ -1,24 +1,17 @@
 import React from 'react';
 import { collection, query, where } from 'firebase/firestore';
-import { AiOutlineIdcard } from 'react-icons/ai';
-import { useRouter } from 'next/router';
-import { BsEye } from 'react-icons/bs';
-import toast from 'react-hot-toast';
-import Image from 'next/image';
 
 import { useCol } from '@/hooks';
 import { db } from '@/config/firebase';
-import { MyRooms } from '@/components/Home';
-import { Button } from '@/components/Button';
 import { useCreatedRooms } from '@/services';
-import { Badges, Layout } from '@/components';
 import { defaultPic } from '@/utils/constants';
 import { useAuth } from '@/contexts/AuthContext';
+import { MyRooms, UserMenu } from '@/components/Home';
+import { Badges, ImageFill, Indicator, Layout } from '@/components';
 
 const Homepage: React.FC = () => {
-  const { push } = useRouter();
   const {
-    data: { username, photoURL, userTag, roles },
+    data: { username, photoURL, userTag, roles, invites },
   } = useAuth();
   const [createdRooms, crLoading] = useCreatedRooms(userTag);
   const [joinedRooms, jrLoading] = useCol<IRoom>(
@@ -34,58 +27,41 @@ const Homepage: React.FC = () => {
     )
   );
 
-  const copyTag = () => {
-    navigator.clipboard.writeText(userTag ?? '');
-    toast.success('copied to clipboard');
-  };
-
   return (
-    <Layout loaders={[crLoading, jrLoading, jraLoading]} className='mb-16'>
-      <div className='mt-8 flex w-full flex-col items-center space-y-4'>
-        <Image
-          src={photoURL ?? defaultPic}
-          height={100}
-          width={100}
-          objectFit='cover'
-          className='rounded-full'
-          alt='profile picture'
-        />
+    <Layout wide loaders={[crLoading, jrLoading, jraLoading]}>
+      <section className='flex flex-col justify-between pt-10 pb-20 md:py-16 lg:flex-row lg:space-x-40'>
+        <div className='flex flex-col items-center space-y-4'>
+          <ImageFill
+            src={photoURL || defaultPic}
+            className='h-[150px] w-[150px] rounded-full'
+            alt='profile picture'
+          />
+
+          <div className='relative inline-block'>
+            <h1 className='text-2xl font-semibold'>{username}</h1>
+            <Badges roles={roles} />
+          </div>
 
-        <div className='text-center'>
-          <div>
+          <div className='border-btn-parent group w-[180px]'>
             <div className='relative'>
-              <h1 className='text-2xl font-bold'>{username}</h1>
-              <Badges roles={roles} />
+              <UserMenu />
+              {invites?.length > 0 && (
+                <Indicator className=' absolute -top-[3px] right-0 rounded-full bg-red-500 p-[3px]' />
+              )}
             </div>
-            <p>{userTag}</p>
           </div>
         </div>
-      </div>
-
-      <div className='primary-gradient my-4 h-[2px] w-full' />
 
-      <div className='flex-between space-x-2'>
-        <Button
-          name='copy tag'
-          onClick={copyTag}
-          className='sq-btn'
-          iconStyles='text-secondary text-xl'
-          Icon={AiOutlineIdcard}
-        />
-
-        <Button
-          name='view invites'
-          onClick={() => push('/invites')}
-          className='sq-btn'
-          iconStyles='text-secondary text-xl'
-          Icon={BsEye}
-        />
-      </div>
-
-      <MyRooms
-        createdRooms={createdRooms}
-        joinedRooms={[...(joinedRooms ?? []), ...(joinedRoomsAsAdmin ?? [])]}
-      />
+        <div className='mt-12 w-full lg:mt-0'>
+          <MyRooms
+            createdRooms={createdRooms}
+            joinedRooms={[
+              ...(joinedRooms ?? []),
+              ...(joinedRoomsAsAdmin ?? []),
+            ]}
+          />
+        </div>
+      </section>
     </Layout>
   );
 };

pages/index.tsx

@@ -1,107 +1,107 @@
 import React, { ReactElement } from 'react';
-
-import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { FaSignInAlt } from 'react-icons/fa';
 
 import { Layout } from '@/components';
-import avatar from '@/assets/avatar.svg';
 import { Button } from '@/components/Button';
-import { useAuth } from '@/contexts/AuthContext';
-import { landingPage } from '@/utils/constants';
 import { NextPageWithLayout } from 'types/page';
+import { useAuth } from '@/contexts/AuthContext';
 
 const Index: NextPageWithLayout = () => {
   const { user, signIn } = useAuth();
   const { push } = useRouter();
 
   return (
     <>
-      <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 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 mx-auto w-[300px] lg:hidden'>
-                <Image
-                  priority
-                  src={avatar}
-                  objectFit='contain'
-                  alt='trackAsOne avatar'
-                />
-              </div>
+      <section className='mt-20 flex flex-col items-center text-center'>
+        <div className='text-[10vw] font-semibold leading-none sm:text-6xl lg:text-7xl'>
+          <h1 className='mb-2 font-serif'>A Collaborative</h1>
+          <h1 className='font-serif'>Task Tracker</h1>
+        </div>
 
-              <h1 className='font-serif text-2xl font-semibold xl:w-auto xl:text-3xl'>
-                A collaborative task tracker.
-              </h1>
+        <p className='my-8 max-w-[700px] md:text-lg'>
+          A free and open-source to-do list for you and your classmates! Create
+          multiple rooms and invite your friends!
+        </p>
 
-              <p className='text-md mt-2 sm:text-lg lg:w-[540px] xl:w-[650px] xl:text-xl'>
-                {landingPage.body1}
-              </p>
-            </div>
+        <div className='flex space-x-4'>
+          <div className='border-btn-parent group'>
+            <a href='#info' className='border-btn'>
+              Learn more
+            </a>
+          </div>
 
+          <div className='border-btn-parent group'>
             <Button
               onClick={user ? () => push('/home') : signIn}
-              className='welcome-btn'
-              name='get started'
+              className='border-btn'
+              name='Get started'
               Icon={FaSignInAlt}
             />
           </div>
         </div>
-
-        <div className='hidden w-[400px] pt-12 lg:block'>
-          <Image src={avatar} objectFit='contain' alt='trackAsOne avatar' />
-        </div>
-      </section>
-
-      <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>
-            </li>
-          ))}
-        </ul>
       </section>
 
-      <section className='mx-auto max-w-screen-xl space-y-24 pb-40 md:space-y-40'>
+      <section
+        id='info'
+        className='mx-auto mt-24 max-w-screen-xl scroll-mt-32 space-y-24 pb-40 md:mt-32 md:space-y-40'
+      >
         <Info
           title='Built by a student for students.'
-          body={landingPage.body2}
+          body={
+            <>
+              Hello! I am{' '}
+              <a
+                href='https://github.com/joshxfi'
+                target='_blank'
+                rel='noreferrer noopener'
+                className='hover:underline'
+              >
+                @joshxfi
+              </a>
+              , the creator and maintainer of this open-source project. I
+              created trackAsOne to help me and my classmates keep track of our
+              school activities.
+            </>
+          }
         />
 
-        <Info title='Why use this task tracker?' body={landingPage.body3} />
+        <Info
+          title='Why use this task tracker?'
+          body='With trackAsOne, you can have a single to-do list where all of your invited friends or classmates would see and collaborate. When you add a task, you can attach photos, a due date, and a URL!'
+        />
       </section>
     </>
   );
 };
 
 Index.getLayout = (page: ReactElement) => {
   return (
-    <Layout wide allowAll className='pt-20'>
+    <Layout wide allowAll className='pt-20 md:pt-28'>
       {page}
     </Layout>
   );
 };
 
 interface InfoProps {
   title: string;
-  body: string;
+  body: React.ReactNode;
 }
 
 const Info = ({ title, body }: InfoProps) => {
   return (
-    <div className='flex flex-col items-center'>
-      <h1 className='font-serif text-xl font-semibold sm:text-2xl lg:text-4xl'>
-        {title}
-      </h1>
-      <p className='text-md mt-2 text-center sm:text-lg lg:w-[490px] xl:w-[670px] xl:text-xl'>
-        {body}
-      </p>
+    <div className='mx-auto rounded border-[3px] border-b-[6px] border-primary bg-whiteish md:w-[700px]'>
+      <div className='flex h-12 items-center space-x-2 border-b-[3px] border-primary bg-primary pl-4'>
+        {['bg-red-500', 'bg-amber-500', 'bg-green-500'].map((color) => (
+          <i key={color} className={`${color} rounded-full p-[6px]`} />
+        ))}
+      </div>
+      <div className='p-8 text-center md:py-16 md:px-12'>
+        <h1 className='mb-4 font-serif text-2xl font-medium md:text-4xl'>
+          {title}
+        </h1>
+        <div className='mt-2 text-center md:text-lg'>{body}</div>
+      </div>
     </div>
   );
 };

pages/room.tsx

@@ -54,9 +54,12 @@ const Room: NextPageWithLayout = () => {
   const sortedTasks = useMemo(() => {
     return tasks
       ?.filter((task) => {
+        const completedByUser = task.completedBy.includes(userTag);
         if (filterBy === 'Completed') return task.completedBy.includes(userTag);
-        if (filterBy === 'Almost Due') return isNearDeadline(task.dueDate);
-        if (filterBy === 'Past Due') return isPastDeadline(task.dueDate);
+        if (filterBy === 'Almost Due')
+          return isNearDeadline(task.dueDate) && !completedByUser;
+        if (filterBy === 'Past Due')
+          return isPastDeadline(task.dueDate) && !completedByUser;
 
         return true;
       })
@@ -88,8 +91,8 @@ const Room: NextPageWithLayout = () => {
   const addTask = async () => {
     try {
       if (url && !urlRegExp.test(url)) toast.error('Invalid URL');
-      else if (tasks && tasks.length >= 20)
-        toast.error('Task limit reached (20)');
+      else if (tasks && tasks.length >= 100)
+        toast.error('Task limit reached (100)');
       else if (!description) toast.error('Task description is required');
       else {
         setAddTaskModal(false);