Merge pull request #20 from joshxfi/dev

release: v1.0.2 - beta
joshxfi · Feb 1, 2022 · cd97797 · cd97797 · vercel · Feb 1, 2022
2 parents 2f461f9 + 8ff99b6
commit cd97797
Show file tree

Hide file tree

Showing 17 changed files with 271 additions and 284 deletions.
diff --git a/README.md b/README.md
@@ -3,12 +3,28 @@
 </div>
 
 ## What is it?
+
 [trackAsOne](https://github.com/joshxfi/trackAsOne) is a platform that enables students to track homework, activities, and more together with their friends or classmates. With this platform, you can create rooms, invite your friends, and track tasks collaboratively!
 
 ## Contributing
-This project is currently not accepting any pull requests or code contributions.
-- [Submit bugs and feature requests.](https://github.com/joshxfi/trackAsOne/issues)
-- [Suggest changes/improvements to the UI/UX or design.](https://github.com/joshxfi/trackAsOne/issues)
+
+If you like the project, please consider giving this [repository](https://github.com/joshxfi/trackAsOne) a star!
+
+- See [CODE_OF_CONDUCT.md](https://github.com/joshxfi/trackAsOne/blob/main/CODE_OF_CONDUCT.md)
+- [Submit bugs or feature requests.](https://github.com/joshxfi/trackAsOne/issues)
+- Fork the repo and submit a pull request on the `dev` branch.
+- Make sure to pull and resolve conflicts (if there are any) before submitting a PR.
+
+To run locally:
+
+```sh
+# NOTE: use yarn when installing dependencies
+
+$ cd <your_cloned_fork>
+$ yarn # install dependencies
+$ yarn dev
+```
 
 ## License
+
 Licensed under [MIT](https://github.com/joshxfi/trackAsOne/blob/main/LICENSE)
diff --git a/next-seo-config.js b/next-seo-config.js
@@ -1,31 +1,34 @@
 const description =
   'A platform that enables students to track homework, activities, etc. together with their friends or classmates. With this platform, you can create rooms, invite your friends, and track tasks collaboratively!';
 
+const imgUrl =
+  'https://firebasestorage.googleapis.com/v0/b/trackas1.appspot.com/o/seo%2FtrackAsOne.jpg?alt=media&token=df1d098a-a581-4670-96c3-f1c85f128947';
+
 export default {
-  title: 'trackAsOne',
+  title: 'trackAsOne | Task Tracker',
   description,
   openGraph: {
     type: 'website',
     url: 'https://trackasone.me',
-    title: 'trackAsOne',
+    title: 'trackAsOne | Task Tracker',
     description,
     images: [
       {
-        url: 'https://firebasestorage.googleapis.com/v0/b/trackas1.appspot.com/o/seo%2Ftrack-as-one.png?alt=media&token=2e0f0e71-dde8-444d-b5d4-60626ea0a058',
+        url: imgUrl,
         width: 800,
         height: 600,
         alt: 'trackAsOne',
         type: 'image/jpeg',
       },
       {
-        url: 'https://firebasestorage.googleapis.com/v0/b/trackas1.appspot.com/o/seo%2Ftrack-as-one.png?alt=media&token=2e0f0e71-dde8-444d-b5d4-60626ea0a058',
+        url: imgUrl,
         width: 900,
         height: 800,
         alt: 'trackAsOne Alt',
         type: 'image/jpeg',
       },
       {
-        url: 'https://firebasestorage.googleapis.com/v0/b/trackas1.appspot.com/o/seo%2Ftrack-as-one.png?alt=media&token=2e0f0e71-dde8-444d-b5d4-60626ea0a058',
+        url: imgUrl,
       },
     ],
     site_name: 'trackAsOne',

diff --git a/package.json b/package.json
@@ -15,8 +15,6 @@
   "dependencies": {
     "@headlessui/react": "^1.4.3",
     "firebase": "^9.5.0",
-    "framer-motion": "^4.1.17",
-    "lint-staged": "^11.2.6",
     "nanoid": "^3.1.25",
     "next": "^12.0.8",
     "next-seo": "^4.28.1",
@@ -42,6 +40,7 @@
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "1.7.0",
     "husky": "^7.0.0",
+    "lint-staged": "^12.3.2",
     "postcss": "^8.4.4",
     "tailwindcss": "^3.0.1",
     "typescript": "4.4.3"

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { Error, Layout } from '@/components';
+import { NextPageWithLayout } from '@/types/page';
 
-const Error404 = () => {
-  return (
-    <Layout>
-      <Error code='404' info='page not found' />
-    </Layout>
-  );
-};
+const Error404: NextPageWithLayout = () => (
+  <Error code='404' info='page not found' />
+);
+
+Error404.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;
 
 export default Error404;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
+
 import '../styles/global.css';
 import '../styles/tailwind.css';
 import 'nprogress/nprogress.css';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 import { DefaultSeo } from 'next-seo';
-import type { AppProps } from 'next/app';
 import { Toaster } from 'react-hot-toast';
-import { AnimatePresence } from 'framer-motion';
+import { AppPropsWithLayout } from '@/types/page';
 import { AuthProvider } from '@/context/AuthContext';
 
 import SEO from '../next-seo-config';
@@ -16,14 +16,14 @@ Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());
 Router.events.on('routeChangeError', () => NProgress.done());
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const getLayout = Component.getLayout ?? ((page) => page);
+
   return (
     <AuthProvider>
       <DefaultSeo {...SEO} />
       <Toaster />
-      <AnimatePresence initial={false} exitBeforeEnter>
-        <Component {...pageProps} />
-      </AnimatePresence>
+      {getLayout(<Component {...pageProps} />)}
     </AuthProvider>
   );
 }

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import Link from 'next/link';
+import React, { ReactElement } from 'react';
+
 import { Layout } from '@/components';
 import { aboutPage } from '@/utils/constants';
+import { NextPageWithLayout } from '@/types/page';
 
-const About = () => {
+const About: NextPageWithLayout = () => {
   const version = process.env.NEXT_PUBLIC_VERSION;
 
   return (
-    <Layout className='py-14' xl allowAll>
+    <>
       <div className='flex space-x-2'>
         <h2>{version}</h2>
         <a
@@ -25,34 +26,18 @@ const About = () => {
       <section className='space-y-12'>
         <div>
           <h1 className='about-h1'>Why Build This?</h1>
-          <p>{aboutPage.reason}</p>
+          <p>{aboutPage.body1}</p>
         </div>
 
         <div>
           <h1 className='about-h1'>Future Updates</h1>
           <ul>
-            {aboutPage.futures.map((update) => (
+            {aboutPage.body2.map((update) => (
               <li key={update}>▸ {update}</li>
             ))}
           </ul>
         </div>
 
-        <div>
-          <h1 className='about-h1'>Contribute</h1>
-          <ul>
-            <li>
-              <Link href='/contact'>
-                <a className='text-blue-500'>▸ Report Bugs</a>
-              </Link>
-            </li>
-            <li>
-              <Link href='/contact'>
-                <a className='text-blue-500'>▸ Request Feature</a>
-              </Link>
-            </li>
-          </ul>
-        </div>
-
         <div>
           <h1 className='about-h1'>License</h1>
           <p>
@@ -68,8 +53,14 @@ const About = () => {
           </p>
         </div>
       </section>
-    </Layout>
+    </>
   );
 };
 
+About.getLayout = (page: ReactElement) => (
+  <Layout className='py-14' wide allowAll>
+    {page}
+  </Layout>
+);
+
 export default About;
diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
 import { Layout } from '@/components';
+import { NextPageWithLayout } from '@/types/page';
 
-const About = () => {
+const Contact: NextPageWithLayout = () => {
   return (
-    <Layout className='py-14' xl allowAll>
+    <>
       <h2>Want to contribute in the project?</h2>
 
       <hr className='my-6' />
@@ -39,14 +41,28 @@ const About = () => {
         </div>
 
         <div>
-          <h1 className='about-h1'>Contribute Code</h1>
-          <ul>
-            <li>▸ Coming Soon!</li>
-          </ul>
+          <h1 className='about-h1'>Contributing</h1>
+          <div>
+            ▸ More info on the{' '}
+            <a
+              className='text-blue-500'
+              href='https://github.com/joshxfi/trackAsOne#contributing'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              repository &rarr;
+            </a>
+          </div>
         </div>
       </section>
-    </Layout>
+    </>
   );
 };
 
-export default About;
+Contact.getLayout = (page: ReactElement) => (
+  <Layout className='py-14' wide allowAll>
+    {page}
+  </Layout>
+);
+
+export default Contact;
diff --git a/pages/create.tsx b/pages/create.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 
 import { nanoid } from 'nanoid';
 import toast from 'react-hot-toast';
@@ -10,9 +10,10 @@ import { db } from '@/config/firebase';
 import { useCreatedRooms } from '@/services';
 import { Button } from '@/components/Button';
 import { useAuth } from '@/context/AuthContext';
+import { NextPageWithLayout } from '@/types/page';
 import { Header, Input, Layout } from '@/components';
 
-const Create = () => {
+const Create: NextPageWithLayout = () => {
   const [roomName, setRoomName] = useState<string>('');
 
   const { push } = useRouter();
@@ -50,7 +51,7 @@ const Create = () => {
   };
 
   return (
-    <Layout>
+    <>
       <Header title='Create a Room' />
       <form
         onSubmit={createRoom}
@@ -74,8 +75,10 @@ const Create = () => {
           />
         </div>
       </form>
-    </Layout>
+    </>
   );
 };
 
+Create.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;
+
 export default Create;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { FaSignInAlt } from 'react-icons/fa';
@@ -7,21 +8,15 @@ import { Layout } from '@/components';
 import avatar from '@/assets/avatar.svg';
 import { Button } from '@/components/Button';
 import { useAuth } from '@/context/AuthContext';
+import { landingPage } from '@/utils/constants';
+import { NextPageWithLayout } from '@/types/page';
 
-const Index = () => {
+const Index: NextPageWithLayout = () => {
   const { user, signIn } = useAuth();
   const { push } = useRouter();
 
   return (
-    <Layout
-      xl
-      allowAll
-      title='trackAsOne'
-      className='pt-20'
-      description='trackAsOne is a collaborative cross-platform app that enables
-    students to track homework & activities together with their
-    friends or classmates.'
-    >
+    <>
       <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'>
@@ -45,10 +40,7 @@ const Index = () => {
               </h1>
 
               <p className='mt-2 text-md sm:text-lg lg:w-[540px] xl:w-[650px] xl:text-xl'>
-                Every now and then, someone would pop in the group chat and say:
-                &quot;What assignments do we have? When is it due?&quot; With
-                this web app, you can track tasks collaboratively with your
-                peers!
+                {landingPage.body1}
               </p>
             </div>
 
@@ -76,21 +68,22 @@ const Index = () => {
         </ul>
       </section>
 
-      <section className='mx-auto max-w-screen-xl pb-40 md:space-y-40 space-y-32'>
+      <section className='mx-auto max-w-screen-xl pb-40 md:space-y-40 space-y-24'>
         <Info
           title='Built by a student for students.'
-          body='trackAsOne is a responsive web-based app that enables students to track homework & activities together with their friends or classmates. Forgot about a homework? Your friends got your back!'
+          body={landingPage.body2}
         />
 
-        <Info
-          title='Why use this task tracker?'
-          body="Tasks given by teachers are usually on different platforms. Few
-            examples are Messenger and MS Teams. The problem is that they are
-            usually cluttered with conversations making it hard to scroll back
-            and you have to check multiple platforms just to make sure you won't
-            miss an assignment."
-        />
+        <Info title='Why use this task tracker?' body={landingPage.body3} />
       </section>
+    </>
+  );
+};
+
+Index.getLayout = (page: ReactElement) => {
+  return (
+    <Layout wide allowAll className='pt-20'>
+      {page}
     </Layout>
   );
 };