find-a-musician/findamusicianfrontend

The frontend application of findAMusician

findamusicianfrontend's Issues

Profile page

Create user component in navbar

there should not be logic in this component. just prop for everything. we'll do the redirection to profile later you can skip that

fix card + storybook (color gray and not grey)

Icon appears all black

In the musicianBox and registerModal component, the icons appears all black.

Make app layout for smaller screen

• Hambergur menu

Test the auto refresh access token

• set the JWT access token available for 10 sec
• login and wait 10 sec
• go to a page that make a api call
• watch in the network panel if the /refreshToken route is called automatically

Instead of having small scroll bar have big scroll bar with navbar sticky and no overflow scroll

Refactor group card to card: add recherche, subtitle number to string

make new TagSmall component. When popover use useState to register if hover or not with event onMouseOver and onMouseLeave

Implement pagination or infinite scroll

We need to choose between pagination system or auto scroll system for theses pages :

• musicians
• events
• groups

Create dropdown

Add figma link to readme

Put all the types in a .d.ts file

Create banner

Create group card

Card should always have the same height. If there is too much texts use .... Look for ellipsis. Card should be able to have dynamic width.

eslint

install eslint-plugin-storybook https://github.com/storybookjs/eslint-plugin-storybook#readme

check this command : npx sb@next automigrate

Mobile: hamburger

Create basic app layout

Create header component

Create tag component

Create a filter component that return an object with filter params

useSWR data type

I find weird that the data return from useSWR this :

config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: {nbMusician: 3, nbGroups: 2, nbEvents: 1}
headers: {content-length: '42', content-type: 'application/json; charset=utf-8'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
[[Prototype]]: Object

it should be only the data from that type :

type data: {
    nbMusician: number;
    nbGroups: number;
    nbEvents: number;
  };

Storybook control migration

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions

Find a way to make multi select component generic

Create profile page section

add leave animation to the hamberger menu

when click on the cross of hambergermenu, it should leave the screen with an animation

Create Profile banner

Filter musician request

The request has to have this form :

'http://localhost:8000/musicians?name=Romain&genres=Rock&genres=Jazz&instruments=piano&instruments=guitar&location=Douai'

Create group card layout

refresh token call when auto fetch profil is infinite

Too many request when refresh the page and the auuto login of the auth context is run

Rename components to pascal case

Use svg in musician component

For instruments component used in musicianBox, use svg instead :

• Download svg from figma
• rename them and put them in assets
• change instruments so that it require svg

Align navbar items

use regex for social media url

Fix dropdown transparent

Create information section with section component for profile page

Don't forget to use https://github.com/Find-A-Musician/findAMusicianFrontend/blob/main/components%2FProfileSection.tsx