Fix prettier, eslint, styelint and make pre commit hooks run

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     es2021: true,
     jest: true,
   },
-  extends: ['airbnb-base', 'plugin:storybook/recommended'],
+  extends: ['airbnb-base', 'plugin:storybook/recommended', 'prettier'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
@@ -30,9 +30,13 @@ module.exports = {
           '**/__tests__/**/*.js',
           '**/.storybook/**/*.*',
           '**/*{.,_}{test,spec}.{ts,tsx}',
+          'app/__mocks__/**/*',
+          'app/mocks/**/*',
         ],
         peerDependencies: true,
       },
     ],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
   },
 };

.husky/pre-commit

@@ -20,4 +20,4 @@ yarn style-lint || (
   false;
 )
 
-echo 'Awesome, you passed all the checks 😍🎉'
+echo 'Awesome, you passed all the checks 😍🎉'

app/api/onboarding/username.client.ts

@@ -11,7 +11,6 @@ export const isUsernameAvailable = async (host: string, token: string, username:
     });
     return response.data.data.available;
   } catch (error) {
-    console.error('err', error);
     return error;
   }
 };

app/components/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '~/types/Icon';
+import { Icon as IconType } from '~/types/Icon';
 
 interface ButtonProps {
   size?: 'small' | 'medium' | 'large';
@@ -35,6 +35,7 @@ export const Button: React.FC<ButtonProps> = ({
                     : 'bg-white border-gray-400 text-gray-900 hover:bg-gray-300'
                 } 
                 ${
+                  // eslint-disable-next-line no-nested-ternary
                   size === 'small'
                     ? 'py-1 px-2 my-2 text-sm gap-1'
                     : size === 'medium'
@@ -53,7 +54,7 @@ export const Button: React.FC<ButtonProps> = ({
 interface LinkButtonProps {
   href: string;
   title: string;
-  icon: Icon;
+  icon: IconType;
 }
 
 export const LinkButton: React.FC<LinkButtonProps> = ({ href, title, icon: Icon }) => (

app/components/SocialAuth.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { LinkButton } from './Button';
 import { Google, Microsoft } from './icons';
 
@@ -6,12 +7,10 @@ interface SocialAuthProps {
   microsoft: string;
 }
 
-export const SocialAuth: React.FC<SocialAuthProps> = ({ google, microsoft }) => {
-  return (
-    <div className="flex flex-col w-full gap-4 my-8">
-      <LinkButton icon={Google} title="Continue with Google" href={google} />
+export const SocialAuth: React.FC<SocialAuthProps> = ({ google, microsoft }) => (
+  <div className="flex flex-col w-full gap-4 my-8">
+    <LinkButton icon={Google} title="Continue with Google" href={google} />
 
-      <LinkButton icon={Microsoft} title="Continue with Microsoft" href={microsoft} />
-    </div>
-  );
-};
+    <LinkButton icon={Microsoft} title="Continue with Microsoft" href={microsoft} />
+  </div>
+);

app/components/common/drawer/index.test.tsx

@@ -55,7 +55,9 @@ describe('Drawer', () => {
     expect(toggleDrawerMock).toHaveBeenCalledTimes(1);
 
     const eventTime = screen.getByText(
-      `${dayjs(event.start).format('MMMM DD, YYYY h A')} - ${dayjs(event.end).format('MMMM DD, YYYY h A')}`,
+      `${dayjs(event.start).format('MMMM DD, YYYY h A')} - ${dayjs(event.end).format(
+        'MMMM DD, YYYY h A',
+      )}`,
     );
     expect(eventTime).toBeInTheDocument();
 

app/components/common/drawer/index.tsx

@@ -9,53 +9,52 @@ interface DrawerProps {
   toggleDrawer: () => void;
 }
 
-const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer }) => {
-  return (
-    <div className={`w-full h-full fixed inset-0 ${isDrawerVisible ? '' : 'invisible'}`}>
-      <div
-        onClick={toggleDrawer}
-        data-testid="drawer-background"
-        className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
-          isDrawerVisible ? 'opacity-50' : 'opacity-0'
-        }`}
-      ></div>
-      <div
-        onClick={toggleDrawer}
-        className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between  overflow-scroll ${
-          isDrawerVisible ? '' : 'translate-x-full'
-        }`}
-      >
+const Drawer: React.FC<DrawerProps> = ({ event, isDrawerVisible, toggleDrawer }) => (
+  <div className={`w-full h-full fixed inset-0 ${isDrawerVisible ? '' : 'invisible'}`}>
+    <div
+      onClick={toggleDrawer}
+      data-testid="drawer-background"
+      className={`w-full h-full duration-500 ease-out transition-all inset-0 absolute bg-gray-900 ${
+        isDrawerVisible ? 'opacity-50' : 'opacity-0'
+      }`}
+    ></div>
+    <div
+      onClick={toggleDrawer}
+      className={`pt-20 pb-12 px-12 min-w-[300px] sm:w-full md:w-1/2 lg:w-1/4 bg-white h-full absolute right-0 duration-300 ease-out transition-all flex flex-col justify-between  overflow-scroll ${
+        isDrawerVisible ? '' : 'translate-x-full'
+      }`}
+    >
+      <div>
+        <div className="absolute cursor-pointer text-gray-600 top-0 w-8 h-8 flex items-center justify-center right-0 mt-5 mr-5">
+          <button className="w-78 h-33 left-1406 top-28 px-4 py-2 uppercase mr-8 bg-gray-100 rounded-lg ">
+            Close
+          </button>
+        </div>
+        <h1 className=" font-semibold text-3xl leading-10 capitalize">{event.title}</h1>
+        <EventVisibility visibility={event.visibility ?? ''} />
+        <p className="py-2 text-base font-normal leading-5 text-left">
+          {dayjs(event.start).format('MMMM DD, YYYY h A')} -{' '}
+          {dayjs(event.end).format('MMMM DD, YYYY h A')}
+        </p>
+        <p className="py-2 text-base font-normal leading-5 text-left">{event.location}</p>
+        <p className="py-4 font-normal text-base">{event.description}</p>
+        <h3 className="font-medium text-lg">People</h3>
         <div>
-          <div className="absolute cursor-pointer text-gray-600 top-0 w-8 h-8 flex items-center justify-center right-0 mt-5 mr-5">
-            <button className="w-78 h-33 left-1406 top-28 px-4 py-2 uppercase mr-8 bg-gray-100 rounded-lg ">
-              Close
-            </button>
-          </div>
-          <h1 className=" font-semibold text-3xl leading-10 capitalize">{event.title}</h1>
-          <EventVisibility visibility={event.visibility ?? ''} />
-          <p className="py-2 text-base font-normal leading-5 text-left">
-            {dayjs(event.start).format('MMMM DD, YYYY h A')} - {dayjs(event.end).format('MMMM DD, YYYY h A')}
-          </p>
-          <p className="py-2 text-base font-normal leading-5 text-left">{event.location}</p>
-          <p className="py-4 font-normal text-base">{event.description}</p>
-          <h3 className="font-medium text-lg">People</h3>
-          <div>
-            {event.attendees?.map(({ attendee }) => (
-              <div className="flex items-center gap-4" key={attendee.email}>
-                <div className="w-6 h-6 bg-gray-300 rounded-full flex-shrink-0"></div>
-                <p className="py-2 font-normal text-base truncate overflow-hidden">
-                  {attendee.email}
-                </p>
-              </div>
-            ))}
-          </div>
+          {event.attendees?.map(({ attendee }) => (
+            <div className="flex items-center gap-4" key={attendee.email}>
+              <div className="w-6 h-6 bg-gray-300 rounded-full flex-shrink-0"></div>
+              <p className="py-2 font-normal text-base truncate overflow-hidden">
+                {attendee.email}
+              </p>
+            </div>
+          ))}
         </div>
-        <button className="bg-gray-200 rounded-lg hover:bg-gray-300  w-full p-3 font-normal text-lg leading-5 text-gray-700">
-          Join event
-        </button>
       </div>
+      <button className="bg-gray-200 rounded-lg hover:bg-gray-300  w-full p-3 font-normal text-lg leading-5 text-gray-700">
+        Join event
+      </button>
     </div>
-  );
-};
+  </div>
+);
 
 export default Drawer;

app/components/common/eventCard/index.test.tsx

@@ -1,10 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import EventCard from '.';
 
-
-
 it('renders the event card', () => {
-  render(<EventCard title={'Marketing meet with John'} start={new Date()} end={new Date(new Date().setHours(new Date().getHours() + 2))} />);
+  render(
+    <EventCard
+      title={'Marketing meet with John'}
+      start={new Date()}
+      end={new Date(new Date().setHours(new Date().getHours() + 2))}
+    />,
+  );
 
   const eventCardBox = screen.getByTestId('event-card-box');
   const eventCardDates = screen.getByTestId('event-card-dates');
@@ -23,7 +27,10 @@ it('renders the event card attendees', () => {
       title={'Marketing meet with John'}
       start={new Date()}
       end={new Date(new Date().setHours(new Date().getHours() + 2))}
-      attendees={[{attendee: {email: 'test1@abc.com'}}, {attendee: {email: 'test2@abc.com'}}]}
+      attendees={[
+        { attendee: { email: 'test1@abc.com' } },
+        { attendee: { email: 'test2@abc.com' } },
+      ]}
     />,
   );
   const eventCardattendees = screen.getByTestId('event-card-attendees');
@@ -58,8 +65,13 @@ it('renders the event card location', () => {
 // });
 
 it('renders the event card no details', () => {
-  render(<EventCard title={'Marketing meet with John'} start={new Date()}
-  end={new Date(new Date().setHours(new Date().getHours() + 2))} />);
+  render(
+    <EventCard
+      title={'Marketing meet with John'}
+      start={new Date()}
+      end={new Date(new Date().setHours(new Date().getHours() + 2))}
+    />,
+  );
   const eventCardNoDetails = screen.getByTestId('event-card-no-details');
   expect(eventCardNoDetails).toBeInTheDocument();
-});
+});

app/components/common/eventCard/index.tsx

@@ -4,77 +4,69 @@ import { DynamicHeroIcon } from '../navbar';
 import { CalEvent } from '~/utils/interfaces';
 import { GoogleMeet } from '../../../components/icons';
 
-const EventCard = ({
-  title,
-  start,
-  end,
-  attendees,
-  location,
-  onlineEventLink
-} : CalEvent) => {
-    const startDate = dayjs(start);
+const EventCard = ({ title, start, end, attendees, location, onlineEventLink }: CalEvent) => {
+  const startDate = dayjs(start);
   const startTime = startDate.format('YYYY MMM DD h:mm A');
   const endTime = dayjs(end).format('YYYY MMM DD h:mm A');
-    return(
-  <>
-    <div
-      data-testid="event-card-box"
-      className="w-full rounded-xl px-4 py-3 border-2 border-grey grid grid-cols-[auto,1fr] items-center gap-6 cursor-pointer"
-
-    >
-      <div data-testid="event-card-dates" className="w-18 grid grid-cols-1 gap-1">
-        <div className="text-xs text-grey-med">{startTime}</div>
-        <div className="w-full flex justify-center">
-          <div className="border-l-2 border-grey h-2"></div>
+  return (
+    <>
+      <div
+        data-testid="event-card-box"
+        className="w-full rounded-xl px-4 py-3 border-2 border-grey grid grid-cols-[auto,1fr] items-center gap-6 cursor-pointer"
+      >
+        <div data-testid="event-card-dates" className="w-18 grid grid-cols-1 gap-1">
+          <div className="text-xs text-grey-med">{startTime}</div>
+          <div className="w-full flex justify-center">
+            <div className="border-l-2 border-grey h-2"></div>
+          </div>
+          <div className="text-xs text-grey-med">{endTime}</div>
         </div>
-        <div className="text-xs text-grey-med">{endTime}</div>
-      </div>
-      <div data-testid="event-card-content" className="w-full grid grid-cols-1 gap-1.5">
-        <div
-          data-testid="event-card-title"
-          className="text-lg font-semibold text-grey-dark leading-5 truncate overflow-ellipsis"
-        >
-          {title}
-        </div>
-        <div className="w-full">
-          {attendees && (
-            <div data-testid="event-card-attendees" className="w-full text-sm text-grey-dark">
-              {attendees.map(data => data.attendee.email).join(", ")}
-            </div>
-          )}
-          {!attendees && location && (
-            <div
-              data-testid="event-card-location"
-              className="w-full grid grid-cols-[auto,1fr] items-center gap-1"
-            >
-              <div className="w-4 h-4 flex items-center pt-0.5">
-                <DynamicHeroIcon name={'MapPin'} className={'text-grey-dark text-lg'} />
+        <div data-testid="event-card-content" className="w-full grid grid-cols-1 gap-1.5">
+          <div
+            data-testid="event-card-title"
+            className="text-lg font-semibold text-grey-dark leading-5 truncate overflow-ellipsis"
+          >
+            {title}
+          </div>
+          <div className="w-full">
+            {attendees && (
+              <div data-testid="event-card-attendees" className="w-full text-sm text-grey-dark">
+                {attendees.map((data) => data.attendee.email).join(', ')}
+              </div>
+            )}
+            {!attendees && location && (
+              <div
+                data-testid="event-card-location"
+                className="w-full grid grid-cols-[auto,1fr] items-center gap-1"
+              >
+                <div className="w-4 h-4 flex items-center pt-0.5">
+                  <DynamicHeroIcon name={'MapPin'} className={'text-grey-dark text-lg'} />
+                </div>
+                <div className="w-full text-sm text-grey-dark">{location}</div>
               </div>
-              <div className="w-full text-sm text-grey-dark">{location}</div>
-            </div>
-          )}
-          {!attendees && !location && onlineEventLink && (
-            <Link
-              target={'blank'}
-              to={onlineEventLink}
-              data-testid="event-card-meet"
-              className="w-full grid grid-cols-[auto,1fr] items-center gap-1"
-            >
-              <div className="w-3 h-4 flex items-center mr-1 pt-0.5">
-                <GoogleMeet />
+            )}
+            {!attendees && !location && onlineEventLink && (
+              <Link
+                target={'blank'}
+                to={onlineEventLink}
+                data-testid="event-card-meet"
+                className="w-full grid grid-cols-[auto,1fr] items-center gap-1"
+              >
+                <div className="w-3 h-4 flex items-center mr-1 pt-0.5">
+                  <GoogleMeet />
+                </div>
+              </Link>
+            )}
+            {!attendees && !location && !onlineEventLink && (
+              <div data-testid="event-card-no-details" className="w-full text-sm text-grey-dark">
+                No details provided
               </div>
-
-            </Link>
-          )}
-          {!attendees && !location && !onlineEventLink && (
-            <div data-testid="event-card-no-details" className="w-full text-sm text-grey-dark">
-              No details provided
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  </>
-)};
+    </>
+  );
+};
 
-export default EventCard;
+export default EventCard;

app/components/common/navbar/index.tsx

@@ -28,7 +28,7 @@ export const DynamicHeroIcon = ({ name, className }: DynamicHeroIconType) => {
 
 const Navbar = () => {
   const matches = useMatches();
-  const {pathname} = matches[matches.length - 1];
+  const { pathname } = matches[matches.length - 1];
   const [active, setActive] = useState<string>('');
   const [showSlider, setShowSlider] = useState<boolean>(false);
 
@@ -41,8 +41,8 @@ const Navbar = () => {
   };
 
   useEffect(() => {
-    setActive(pathname)
-  },[pathname]);
+    setActive(pathname);
+  }, [pathname]);
 
   const navbarElements = {
     navbarPages: [