[CAN-143] Merge Mobile Drawer into Develop

.github/workflows/develop-ci.yml

@@ -0,0 +1,45 @@
+name: Develop Branch CI
+
+on:
+  pull_request:
+    branches: ['develop']
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.9.0'
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+
+      - name: Build project
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+
+      - name: Run tests
+        run: ${{ steps.detect-package-manager.outputs.manager }} run test

README.md

@@ -175,7 +175,8 @@ To maintain consistency across the project, we follow these coding conventions:
 
 ## Code Reviews
 
-Across code reviews in the codebase emojis from the [Code Review Emoji Guide](https://github.com/erikthedeveloper/code-review-emoji-guide) are used.
+-   Across code reviews in the codebase emojis from the [Code Review Emoji Guide](https://github.com/erikthedeveloper/code-review-emoji-guide) are used.
+-   Code reviews require at least one approval in order to be merged.
 
 ## Contributing
 

app/[locale]/(withoutheaderfooter)/clubs/clubs-content.tsx

@@ -19,7 +19,7 @@ export default function ClubsContent() {
         <div>
             <Navbar isOnMap={true} />
             <div>
-                <div className="hidden lg:flex">
+                <div className='hidden lg:flex'>
                     <OpenStreetMap
                         showHRInfo={showHRFilter}
                         isDesktopMap={true}
@@ -31,7 +31,7 @@ export default function ClubsContent() {
                         setShowHRFilter={setShowHRFilter}
                     />
                 </div>
-                <div className="lg:hidden flex">
+                <div className='lg:hidden flex'>
                     <OpenStreetMap
                         showHRInfo={showHRFilter}
                         isDesktopMap={false}

app/components/AutoScaler/AutoScaler.test.tsx

@@ -8,7 +8,7 @@ jest.mock('@/app/helpers/useWindowSize', () => ({
     default: jest.fn(() => ({ width: 800, height: 600 })),
 }));
 
-jest.mock('./helpers/classNameMatcher', () => ({
+jest.mock('./helpers/ClassNameMatcher', () => ({
     __esModule: true,
     default: {
         getCustomWidth: jest.fn((className: string) => '200'),

app/components/Drawer/Drawer.test.tsx

@@ -0,0 +1,3 @@
+test('adds 1+2 to equal 3', () => {
+    expect(1 + 2).toBe(3);
+});

app/components/Drawer/Drawer.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { PropsWithChildren, FunctionComponent, useRef } from 'react';
+import Close from '../Close/Close';
+import Swipeable from '../OpenStreetMap/Swipeable';
+import { Transition, TransitionStatus } from 'react-transition-group';
+
+type DrawerProps = {
+    readonly children: React.ReactElement;
+    readonly className?: string;
+    readonly isOpen: boolean;
+    readonly onClose: () => void;
+    readonly closeButtonColor?: string;
+};
+
+type Position = {
+    x: string;
+    y: string;
+};
+
+const Drawer: FunctionComponent<DrawerProps> = (
+    props: PropsWithChildren<DrawerProps>
+) => {
+    const transformDuration: number = 300;
+    const backgroundDelay: number = 100;
+    const drawerContainerRef = useRef(null);
+    const drawerContainerDefaultTransitionStyle: React.CSSProperties = {
+        transform: `translateX(100%)`,
+        transition: `transform ${transformDuration}ms ease`,
+    };
+    const drawerContainerTransitionStyles: Record<
+        TransitionStatus,
+        React.CSSProperties
+    > = {
+        entering: {
+            transform: `translateX(0)`,
+        },
+        entered: {
+            transform: `translateX(0)`,
+        },
+        exiting: {
+            transform: `translateX(100%)`,
+            transition: `transform ${transformDuration}ms ease ${transformDuration + backgroundDelay}ms`,
+        },
+        exited: {
+            transform: `translateX(100%)`,
+            transition: `transform ${transformDuration}ms ease ${transformDuration + backgroundDelay}ms`,
+        },
+        unmounted: {
+            transform: `translateX(100%)`,
+            transition: `transform ${transformDuration}ms ease ${transformDuration + backgroundDelay}ms `,
+        },
+    };
+
+    const drawerRef = useRef(null);
+    const drawerDelay: number = 400;
+    const drawerDefaultTransitionStyle: React.CSSProperties = {
+        transform: `translateX(100vw)`,
+        transition: `transform ${transformDuration}ms ease `,
+    };
+    const drawerTransitionStyles: Record<
+        TransitionStatus,
+        React.CSSProperties
+    > = {
+        entering: {
+            transform: `translateX(calc(100vw - 100%))`,
+            transition: `transform ${transformDuration}ms ease ${drawerDelay}ms`,
+        },
+        entered: {
+            transform: `translateX(calc(100vw - 100%))`,
+            transition: `transform ${transformDuration}ms ease ${drawerDelay}ms`,
+        },
+        exiting: {
+            transform: `translateX(100vw)`,
+        },
+        exited: {
+            transform: `translateX(100vw)`,
+        },
+        unmounted: {
+            transform: `translateX(100vw)`,
+        },
+    };
+
+    return (
+        <Swipeable
+            onRightSwipe={() => {
+                props.onClose();
+            }}
+        >
+            <Transition
+                nodeRef={drawerContainerRef}
+                in={props.isOpen}
+                timeout={transformDuration * 3}
+                unmountOnExit={true}
+            >
+                {(state) => (
+                    <div
+                        onClick={() => {
+                            props.onClose();
+                        }}
+                        ref={drawerContainerRef}
+                        style={{
+                            ...drawerContainerDefaultTransitionStyle,
+                            ...drawerContainerTransitionStyles[state],
+                        }}
+                        className={
+                            'fixed z-50 min-w-full min-h-full top-0 left-0 bg-[#B6CF54]'
+                        }
+                    >
+                        <Transition
+                            nodeRef={drawerRef}
+                            timeout={transformDuration}
+                            in={props.isOpen}
+                            unmountOnExit={true}
+                            appear={true}
+                        >
+                            {(state) => (
+                                <div
+                                    ref={drawerRef}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                    }}
+                                    style={{
+                                        ...drawerDefaultTransitionStyle,
+                                        ...drawerTransitionStyles[state],
+                                    }}
+                                    className={
+                                        'fixed min-h-full bg-transparent min-w-[80%] top-0 left-0 drop-shadow-lg ' +
+                                        props.className
+                                    }
+                                >
+                                    <div
+                                        onClick={props.onClose}
+                                        className='absolute top-[2em] right-[2em] z-[2]'
+                                    >
+                                        <Close
+                                            color={
+                                                props.closeButtonColor ?? 'grey'
+                                            }
+                                        />
+                                    </div>
+                                    {props.children}
+                                </div>
+                            )}
+                        </Transition>
+                    </div>
+                )}
+            </Transition>
+        </Swipeable>
+    );
+};
+
+export default Drawer;

app/components/Home/Home-content.test.tsx

@@ -9,7 +9,7 @@ jest.mock('next-intl', () => ({
     useLocale: jest.fn(),
 }));
 
-jest.mock('@/app/components/Home/headline', () => {
+jest.mock('@/app/components/Home/Headline', () => {
     const React = require('react');
     return {
         __esModule: true,

app/components/Logo/Logo.test.tsx

@@ -49,20 +49,6 @@ describe('Logo Component', () => {
         expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not trigger onClick when pathname does not match home', () => {
-        (useLocale as jest.Mock).mockReturnValue('en');
-        (usePathname as jest.Mock).mockReturnValue('/en/about');
-
-        const mockOnClick = jest.fn();
-
-        render(<Logo onClick={mockOnClick} />);
-
-        const linkElement = screen.getByRole('link');
-        fireEvent.click(linkElement);
-
-        expect(mockOnClick).not.toHaveBeenCalled();
-    });
-
     it('does not throw error if onClick is not provided', () => {
         (useLocale as jest.Mock).mockReturnValue('en');
         (usePathname as jest.Mock).mockReturnValue('/en');

app/components/Logo/Logo.tsx

@@ -10,7 +10,7 @@ export default function Logo({ onClick }: { onClick?: Function }) {
 
     const handleClick: Function = onClick
         ? () => {
-              if (home == pathname) onClick();
+              onClick();
           }
         : () => {};
 

app/components/MobileNav/MobileNav.tsx

@@ -11,8 +11,17 @@ export default function MobileNav({ links }: { links: Array<LinkInfo> }) {
         <HamburgerButton showOverlay={() => setShowOverlay(true)} />
     );
     const overlayNav = (
-        <OverlayNav closeOverlay={() => setShowOverlay(false)} links={links} />
+        <OverlayNav
+            showOverlay={showOverlay}
+            closeOverlay={() => setShowOverlay(false)}
+            links={links}
+        />
     );
 
-    return <div>{showOverlay ? overlayNav : hamburgerButton}</div>;
+    return (
+        <div>
+            {hamburgerButton}
+            {overlayNav}
+        </div>
+    );
 }

app/components/Navbar/Links.test.tsx

@@ -9,7 +9,7 @@ jest.mock('next/navigation', () => ({
     usePathname: jest.fn(),
 }));
 
-jest.mock('@/app/Helpers/isPathnameHome', () => jest.fn());
+jest.mock('@/app/helpers/isPathnameHome', () => jest.fn());
 
 describe('Links Component', () => {
     const mockLinks = [

app/components/OpenStreetMap/SwipeableClubCard.test.tsx

@@ -12,6 +12,10 @@ jest.mock('next/navigation', () => ({
 // Mock the next-intl module
 jest.mock('next-intl', () => ({
     useLocale: jest.fn(() => 'en'),
+    useTranslations:
+        (): any =>
+        (key: string): string =>
+            key.toUpperCase(),
 }));
 
 jest.mock('next/image', () => {