romainguarinoni / synctube-v2 Goto Github PK

au lieu de demander les infos du user, on peut avoir le sub et l'email en utilisant la méthode getTokenInfo

## Spec tecs

• retirer profil des scopes dans l'api
• update le type profil pour y retirer les name
• une fois l'access_token récuperer, le parse avec ka méthode getTokenInfo et récuperer le sub et l'email
• modifier la fonction refreshtoken pour qu'elle décripte elle aussi le token et y récupère le profil

séparer chaques pages en differents ckmposants et faire un truc du style :

{searchLocation===SearchLocation.favourite && <FavouritePage />}

Chaque page gère son propre swr, plus simple

Voir si le composant de détail d'une recherche de vidéo de reload a chaque fois que useSwr prends un taille en plus . Si oui , utiliser un react.memo pour éviter le re render du composant ! Sinon , pas besoin .
Pour cela :

• faire un console log au useffect du composant a chaque fois qu'il render
• faire un setsiee +1
• voir si les composants qui existait déjà se sont re render

Vérifier si en appelant la méthode revokeToken l'utilisateur est bien déconnecter et que il faut qu'il se reconnecte en entier !

Spec techs

• Dans le catch du useEffect du login, récupérer le msg d'erreur de la reponse axios dans data
• Si tous les codes n'ont pas été accépté, afficher un msg d'erreur qui explique le pblm
• Sinon, afficher un message d'errrur erreur serveur

https://stackoverflow.com/questions/359472/how-can-i-verify-a-google-authentication-api-access-token

https://www.google.com/search?q=design+dark+theme+list+item&tbm=isch&ved=2ahUKEwii747MzsP4AhWeXfEDHdTXC00Q2-cCegQIABAA&oq=design+dark+theme+list+item&gs_lcp=CgNpbWcQAzoECAAQEzoICAAQHhAHEBM6CAgAEB4QCBATOggIABAeEAUQE1CVuQJY6cECYPHCAmgBcAB4AIABaYgBhgWSAQQxMC4xmAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=0GG0YqLHDp67xc8P1K-v6AQ&bih=1001&biw=1920&rlz=1C5CHFA_enFR1000FR1000#imgrc=3LYNBRqJkIJauM

https://developers.google.com/youtube/iframe_api_reference

le context auth semble refetch le refresh token a chaque changement de page :/

Spec

• Déplacer la logique du oAuth de google dans le front
• dégager l'access token du state et juste le set dans le client oAuthGoogle

Dans le use Effect

• ne pas s'occuper de refresh le token dans le useEffect
• si le user est connecté, vérifier si on a ses données perso dans sont localStorage
• si oui, le set dans le profil et c'est finis
• si non, refresh l'id token à la route suivante: https://cloud.google.com/identity-platform/docs/use-rest-api#section-refresh-token
• si erreur, set auth to false et redemandé au user de se log au niveau de la page login

Dans la page login

• Lorsque le user se login, set ses info perso du id_token dans le localStorage

 ### Auth context problème de comportement

• Créer un useEffect qui console log just et vérifier qu'il est bien appelé juste au demmarage de l'app et pas a chaque changement de routes
• Comprendre pk on refecth un truc a chaque change de route

Quand on reload la page et que il y a un query q dans la searchbar , le mettre directement dans la search bar

Spec

• mettre un use effect qui récupère les queries du router au render
• si query existe , les set dans la search bar

Spec tecs:

• Create a new API function in front. to call this endpoint : https://cloud.google.com/identity-platform/docs/use-rest-api#section-refresh-token

• Call this function in ther auth context at the start of the app

• update the auth profil state with the result of the function

• ajouter une option URL dans le select du searchBar
• ajouter une tabs URL dans le tabs de la page search
• Le user rentre le lien d'une videéo youtube
• On fetch la vidéo a chanque changement dans l'input avec un debounce
• on affiche la vidéo et le user clique desus

https://coolors.co/18181b-ef4444-27272a-bb9457-ffe6a7
https://coolors.co/18181b-ef4444-27272a-f6e27f-e2c391