Skip to content

Commit

Permalink
Merge develop into main to deploy CCB v1.1.0 (#124)
Browse files Browse the repository at this point in the history 
* [HOTFIX] Replaces map tiler on individual club pages (#115)

Problem
Solution
Note

* HOTFIX - Darkmode map tile (#117)

Co-authored-by: marcaufderheyde <[email protected]>

* [CAN-143] Implement Drawer
Problem
- Mobile nav switch from overlay to Drawer
Solution
- Created an animated drawer - drawer.jsx
- Include react-transition-group
- Removed overlay *just commented out*
Note
- Need to implment links
- Blurred background
- Mobile Nav Links

* [CAN-143] Bugfix: Scrolling was disabled
Problem
- usePreventScrolling wasn't being returned on unmount due to RTG
Solution
- make the usePreventScrolling hook accept a conditional variable
- This way, you can dynamically prevent scrolling
Note
- RTG ~ React-Transition-Group
- Even when unmounting, be careful of unmount calls, they aren't
handled by Next or React anymore!

* [CAN-143] Add Links To Drawer
Problem
- Links have not been added
Solution
- Added links for mobile nav using previous mobile nav popup
- Changed Color scheme to dark - can be easily changed back
Note

* [CAN-143] Implement Delayed Drawer Animations
Problem
- Background wanted to be coloured / faded
- Weird when component dismounts as background slides with it
Solution
- Add a nested animation to the actual drawer
- Add animation delays for both background and drawer
Note

* [CAN-143] Right slide and Active URL CSS
Problem
- Animation slide in at wrong side
- Active page not highlighted in nav
Solution
- Change react-transition-group from -100% to calc(100vw - 100%)
- Implement isHomepage logic copied from Navbar Links Component and add
to active link
Note

* [CAn-143] Refactor Tests for OverlayNav
Problem
- Failed to push due to failing tests
- This is because Overlaynav has been massively changed.
Solution
- Mock Drawer Component and remove close mock
Note

* Cheekily adding logo and favicon to MR ;)

* CAN-143 - Fix language switcher position

Problem - Position of language switcher felt wrong in drawer

Solution - Suggested a new position for mobile/tablet

Note - Just a suggestion, happy to go for something else as well!

* CAN-143 -  Fix desktop navigation

Problem - Giving width-100 to the outer div of the language switcher

Solution - Take it out, fixes desktop navigation

Note - Really not sure why this broke the navigation, but fixed

* CAN-143 - Fixed double click bug for logo

Problem - Were only calling onClick when pathname was home pathname

Solution - If onClick provided, call it for all paths

Note - I may have misunderstood, but it is supposed to do nav right?

Note2 - Removed outdated test which checked onClick only called as such

* CAN-143 - Added one liner to readme to test CI

Problem - Want to build and test for MRs to check we good

Solution - Added workflow, need to trigger it now

* CAN-143 - Added actual workflow

Problem - Pipeline can't run if it's only on main at the moment

Solution - Add Workflow here already (might have to be on develop)

* CAN-143 - Fixed casing in tests to fix pipeline

Problem - Some outdated casing for test module imports

Solution - Fix them

* HOTFIX - Going back to non-company protection

* CAN-143 - Drawer Test Suite done

* [CAN-143] Add Link to Popup Image
Problem
- Unable to get to club listing from clicking on image
Solution
- Wrap image in a tag with appropriate class names for css grid.
Note

* [CAN-143] Increment Version Number (1.0.0 -> 1.1.0)
New Features:
- Animated Mobile Nav Drawer
- Clickable Popup Image Tag
- Drawer Component Test Suite

Note
- N/A

* HOTFIX-Content on Request

* [CAN-143] Fix Language Switcher Position
Problem
- Language Switcher on drawer nav not positioned properly
Solution
- Adjust height and width of container to be in 100%
- Change position from relative to absolute of parent
- Switch Language Switcher to display none instead of invisible
    - Removes left margin noticed on Language switcher element
Note

* Bump next from 14.2.5 to 14.2.12 (#123)

* Dark mode update (#118)

* [HOTFIX] Replaces map tiler on individual club pages (#115)

Problem
Solution
Note

* HOTFIX - Darkmode map tile (#117)

Co-authored-by: marcaufderheyde <[email protected]>

---------

Co-authored-by: joneshector <[email protected]>
Co-authored-by: marcaufderheyde <[email protected]>

* Update ClubOpenStreetMap.tsx default light mode (#119)

* Create develop-ci.yml (#121)

Adding a Github Actions Workflow to build and test the project for merge requests to the develop branch.

* Bump next from 14.2.5 to 14.2.12

Bumps [next](https://github.com/vercel/next.js) from 14.2.5 to 14.2.12.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](vercel/next.js@v14.2.5...v14.2.12)

---
updated-dependencies:
- dependency-name: next
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Marc Auf der Heyde <[email protected]>
Co-authored-by: joneshector <[email protected]>
Co-authored-by: marcaufderheyde <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump micromatch from 4.0.5 to 4.0.8 (#122)

* Dark mode update (#118)

* [HOTFIX] Replaces map tiler on individual club pages (#115)

Problem
Solution
Note

* HOTFIX - Darkmode map tile (#117)

Co-authored-by: marcaufderheyde <[email protected]>

---------

Co-authored-by: joneshector <[email protected]>
Co-authored-by: marcaufderheyde <[email protected]>

* Update ClubOpenStreetMap.tsx default light mode (#119)

* Create develop-ci.yml (#121)

Adding a Github Actions Workflow to build and test the project for merge requests to the develop branch.

* Bump micromatch from 4.0.5 to 4.0.8

Bumps [micromatch](https://github.com/micromatch/micromatch) from 4.0.5 to 4.0.8.
- [Release notes](https://github.com/micromatch/micromatch/releases)
- [Changelog](https://github.com/micromatch/micromatch/blob/master/CHANGELOG.md)
- [Commits](micromatch/micromatch@4.0.5...4.0.8)

---
updated-dependencies:
- dependency-name: micromatch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Marc Auf der Heyde <[email protected]>
Co-authored-by: joneshector <[email protected]>
Co-authored-by: marcaufderheyde <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: joneshector <[email protected]>
Co-authored-by: marcaufderheyde <[email protected]>
Co-authored-by: Fabrizio <[email protected]>
Co-authored-by: Fabrizio Catinella <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
@marcaufderheyde @joneshector
@fabie37 @dependabot
6 people authored Sep 19, 2024
1 parent d49f88d commit 1f9806d
Show file tree
Hide file tree
Showing 24 changed files with 672 additions and 292 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion app/components/AutoScaler/AutoScaler.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
40 changes: 24 additions & 16 deletions app/components/CustomPopup/CustomPopup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,27 @@ export default function CustomPopup({
const localActive = useLocale();

return (
<div className="w-[400px] bg-white flex flex-col h-full">
<div className="grid grid-rows-[1fr_6fr] grid-cols-[1fr_5fr_1fr] justify-items-center items-center my-2">
<Image
src={club.imageUrl}
alt={`${club.name} Club Picture`}
height={180}
width={300}
layout="raw"
<div className='w-[400px] bg-white flex flex-col h-full'>
<div className='grid grid-rows-[1fr_6fr] grid-cols-[1fr_5fr_1fr] justify-items-center items-center my-2'>
<a
href={`/${localActive}/clubs/${club.slug}`}
className={
styles.mapCardImage +
' col-start-2 col-end-3 row-start-1 row-end-3 h-[180px]'
styles.mapCardLink +
' col-start-2 col-end-3 row-start-1 row-end-3'
}
/>
>
<Image
src={club.imageUrl}
alt={`${club.name} Club Picture`}
height={180}
width={300}
layout='raw'
className={
styles.mapCardImage +
' col-start-2 col-end-3 row-start-1 row-end-3 h-[180px]'
}
/>
</a>
<button
className={
styles.closeButton +
Expand All @@ -64,7 +72,7 @@ export default function CustomPopup({
<Close color={'#828282'} />
</button>
</div>
<div className="flex flex-col items-center align-middle text-center mx-3">
<div className='flex flex-col items-center align-middle text-center mx-3'>
<a
href={`/${localActive}/clubs/${club.slug}`}
className={styles.mapCardLink}
Expand All @@ -73,20 +81,20 @@ export default function CustomPopup({
</a>
<br />
</div>
<div className="flex flex-row gap-2 flex-wrap mx-3">
<div className='flex flex-row gap-2 flex-wrap mx-3'>
{club.offerings
?.toString()
.split(',')
.map((offering) => (
<div
key={offering}
className="bg-lime-500 text-white rounded-xl py-1 px-2 self-center overflow-ellipsis"
className='bg-lime-500 text-white rounded-xl py-1 px-2 self-center overflow-ellipsis'
>
{offering}
</div>
))}
</div>
<div className="h-[100%] grid grid-cols-1 grid-rows-[1fr_auto_1fr] justify-items-center">
<div className='h-[100%] grid grid-cols-1 grid-rows-[1fr_auto_1fr] justify-items-center'>
<div
className={
'row-start-4 row-end-4 inline-flex py-2 px-4 md:py-3'
Expand All @@ -100,7 +108,7 @@ export default function CustomPopup({
triangleColor={'white'}
onClickFunction={() => switchPreviousClub()}
/>
<div className="bg-lime-500 flex text-white text-base p-2 w-[60px] justify-center">
<div className='bg-lime-500 flex text-white text-base p-2 w-[60px] justify-center'>
<div>
{
(((clubIndex + 1) as unknown as string) +
Expand Down
77 changes: 77 additions & 0 deletions app/components/Drawer/Drawer.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React, { ReactNode } from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';

type DrawerProps = {
isOpen: boolean;
onClose: () => void;
children: ReactNode;
className?: string;
};

const MockDrawer: React.FC<DrawerProps> = ({
isOpen,
onClose,
children,
className,
}) => {
if (!isOpen) return null;
return (
<div data-testid="mock-drawer" className={className}>
<div data-testid="mock-close" onClick={onClose}>
Close
</div>
<div data-testid="mock-content">{children}</div>
</div>
);
};

jest.mock('./Drawer', () => ({
__esModule: true,
default: jest.fn((props: DrawerProps) => MockDrawer(props)),
}));

const Drawer = require('./Drawer').default;

describe('Drawer Component', () => {
const mockOnClose = jest.fn();
const defaultProps: DrawerProps = {
isOpen: true,
onClose: mockOnClose,
children: <div>Drawer Content</div>,
};

beforeEach(() => {
jest.clearAllMocks();
});

it('renders correctly when open', () => {
render(<Drawer {...defaultProps} />);
expect(screen.getByTestId('mock-drawer')).toBeInTheDocument();
expect(screen.getByText('Drawer Content')).toBeInTheDocument();
});

it('does not render when closed', () => {
render(<Drawer {...defaultProps} isOpen={false} />);
expect(screen.queryByTestId('mock-drawer')).not.toBeInTheDocument();
});

it('calls onClose when close button is clicked', () => {
render(<Drawer {...defaultProps} />);
fireEvent.click(screen.getByTestId('mock-close'));
expect(mockOnClose).toHaveBeenCalled();
});

it('applies custom className', () => {
render(<Drawer {...defaultProps} className="custom-class" />);
expect(screen.getByTestId('mock-drawer')).toHaveClass('custom-class');
});

it('renders children correctly', () => {
const customContent = (
<div data-testid="custom-content">Custom Content</div>
);
render(<Drawer {...defaultProps}>{customContent}</Drawer>);
expect(screen.getByTestId('custom-content')).toBeInTheDocument();
});
});
153 changes: 153 additions & 0 deletions app/components/Drawer/Drawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion app/components/Home/Home-content.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
14 changes: 0 additions & 14 deletions app/components/Logo/Logo.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion app/components/Logo/Logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Logo({ onClick }: { onClick?: Function }) {

const handleClick: Function = onClick
? () => {
if (home == pathname) onClick();
onClick();
}
: () => {};

Expand Down
13 changes: 11 additions & 2 deletions app/components/MobileNav/MobileNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
2 changes: 1 addition & 1 deletion app/components/Navbar/Links.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
Loading

0 comments on commit 1f9806d

Please sign in to comment.