Création d'applications Web de qualité production avec Supabase - Partie 2

Je travaille sur le livre de David Lorenz Building Production-Grade Web Applications with Supabase (lien affilié) et je viens de terminer le Chapitre 3 – Création des pages de gestion des tickets…. J'ai rencontré quelques problèmes et j'ai pensé les partager avec la façon dont je les ai résolus.

Section : Configuration de Pico.css avec Next.js

Vous pouvez ignorer pageProps.children et le laisser comme enfants.

Section : Construire le formulaire de connexion

Dois-je vraiment modifier app/page.js en tant que LoginPage Création dapplications Web de qualité production avec Supabase - Partie 2

Même si Lorenz déclare explicitement :

Alors, ouvrez app/page.js et modifiez le composant Page afin qu'il renvoie uniquement le composant Connexion pour l'instant…

J'ai encore dû aller chercher par moi-même la prochaine fois que j'ai rencontré des instructions pour modifier la page de connexion. Je m'attendais à ce que nous créions une nouvelle page plutôt que d'utiliser le page.js existant, mais non, effacez tout dans page.js et collez uniquement le code LoginPage comme indiqué dans le livre.

Erreur : searchParams doit être attendu

Une fois que nous avons mis à jour app/Login.js avec la logique de bascule (pour activer/désactiver le champ de mot de passe), nous commençons à voir cette erreur :

Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
  5 | }

Pour résoudre ce problème, nous souhaitons rendre la fonction LoginPage dans app/page.js asynchrone comme ceci :

import { Login } from "./Login";

export default async function LoginPage({ searchParams }) {
  const params = await searchParams;
  const wantsMagicLink = params.magicLink === "yes";
  return <login ispasswordlogin="{!wantsMagicLink}"></login>;
}

Enregistrement du nom d'utilisateur et du mot de passe

Dans le livre, il nous est demandé de mettre à jour notre code dans Login.js comme ceci :

"use client";
import { useRef } from "react";
export const Login = () => {
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
return (
...
)
}

Juste au cas où cela ne serait pas tout à fait clair, voici à quoi devrait ressembler votre code :

"use client";
import { useRef } from "react";
import Link from "next/link";

export const Login = ({ isPasswordLogin }) => {
  const emailInputRef = useRef(null);
  const passwordInputRef = useRef(null);

  return(
    ...
  )
}

Où est le... nous ne changeons rien. Essentiellement, tout depuis le retour reste exactement le même qu'avant.

La « grande chose » que je souligne ci-dessus est qu'il ne faut pas supprimer le lien d'importation de « suivant/lien » ; ajoutez plutôt « utiliser le client » ; et l'importation useRef avant.

Remarque : nous l'apprendrons peut-être plus tard, mais je trouve un peu étrange d'utiliser useRef au lieu de useState ici, mais là encore, je ne suis pas un expert de Next.js ou de React.

Où va cet événement onSubmit Création dapplications Web de qualité production avec Supabase - Partie 2

Dans Login.js dans le return( ... ), remplacez le

avec le code du formulaire qui inclut le gestionnaire onSubmit.

Section : Visualisation de l'interface utilisateur de gestion des tickets

Sous-section : Création d'une présentation d'interface utilisateur partagée avec des éléments de navigation

L'ex-unité CSS Création dapplications Web de qualité production avec Supabase - Partie 2

Dans le code de app/tickets/TenantName.js, Lorenz utilise l'unité ex CSS rarement utilisée :

<strong>

</strong>

I suspect that this is actually a typo and that Lorenz intended for this to be 1em. While ex is a valid CSS unit it is rarely utilized and is based on the height of the current font. For more on this topic see:

• W3’s Example Page for EM, PX, PT, CM, IN…
• W3School’s CSS Units.
• Perplexity: Should one use the ex CSS unitCréation dapplications Web de qualité production avec Supabase - Partie 2

Subsection: Designing the Ticket List Page

Creating dummy tickets whereCréation dapplications Web de qualité production avec Supabase - Partie 2

For those who aren’t familiar with React the instruction to add dummyTickets to the page.js file may not be clear enough. You’ll want put these in the TicketListPage() function before the return.

Import howCréation dapplications Web de qualité production avec Supabase - Partie 2

Lorenz instructs us to import the TicketList component into page.js. This is pretty straightforward but may be helpful to note that since this is a “named export” we want our import in page.js to look like:

import { TicketList } from "./TicketList";

Et pas comme :

import TicketList from "./TicketList";

Si vous faites cette dernière solution, vous recevrez l'un de ces adorables messages d'erreur :

Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
  5 | }

Sous-section : Construire la page Détails du ticket

Erreur : itinéraire « /tickets/details/[id] » utilisé…

Lorsque nous suivons les instructions de création de la fonction TicketDetailsPage, nous verrons l'erreur suivante :

import { Login } from "./Login";

export default async function LoginPage({ searchParams }) {
  const params = await searchParams;
  const wantsMagicLink = params.magicLink === "yes";
  return <login ispasswordlogin="{!wantsMagicLink}"></login>;
}

Vous vous souviendrez peut-être que nous avons vu une erreur similaire plus tôt avec la fonction LoginPage et que nous l'avons résolue en rendant notre fonction asynchrone et en attendant le paramètre. Nous ferons la même chose ici :

"use client";
import { useRef } from "react";
export const Login = () => {
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
return (
...
)
}

Erreur : itinéraire « /tickets/details/[id] » utilisé… (encore Création dapplications Web de qualité production avec Supabase - Partie 2)

Après la mise à jour du fichier /tickets/details/[id]/page.js (fonction TicketDetailsPage), nous obtenons une erreur très similaire à celle que nous avons faite dans la section précédente. Qu'est-ce qui donne Création dapplications Web de qualité production avec Supabase - Partie 2 Simple, nous avons mis à jour notre code dans la dernière section mais le livre ne le sait pas, donc le livre utilise toujours params.id, remplacez simplement params.id par id et tout devrait se passer comme il pleut.

Sous-section : Ajout de la section commentaires aux détails du ticket

Le chemin du nouveau fichier de commentaires doit être /tickets/details/[id]/TicketComments.js et non /tickets/details[id]/TicketComments.js.

Erreur : J'ai rencontré deux enfants avec la même clé…

Bien que Next.js ne génère aucune erreur dans la sortie du terminal après avoir ajouté le code qui affiche les commentaires réels à TicketComments.js, vous en verrez une dans le navigateur :

"use client";
import { useRef } from "react";
import Link from "next/link";

export const Login = ({ isPasswordLogin }) => {
  const emailInputRef = useRef(null);
  const passwordInputRef = useRef(null);

  return(
    ...
  )
}

Il y a deux raisons pour lesquelles cela se produit. La première est que nous n’utilisons pas réellement la date comme clé, car nous avons des guillemets autour de {comment.date} que nous transmettons dans la chaîne littérale comment.date. Pour résoudre ce problème, nous devons supprimer les guillemets afin que ceci :

I suspect that this is actually a typo and that Lorenz intended for this to be 1em. While ex is a valid CSS unit it is rarely utilized and is based on the height of the current font. For more on this topic see:


W3’s Example Page for EM, PX, PT, CM, IN…

W3School’s CSS Units.
Perplexity: Should one use the ex CSS unitCréation dapplications Web de qualité production avec Supabase - Partie 2



  
  
  Subsection: Designing the Ticket List Page



  
  
  Creating dummy tickets whereCréation dapplications Web de qualité production avec Supabase - Partie 2


For those who aren’t familiar with React the instruction to add dummyTickets to the page.js file may not be clear enough. You’ll want put these in the TicketListPage() function before the return.


  
  
  Import howCréation dapplications Web de qualité production avec Supabase - Partie 2


Lorenz instructs us to import the TicketList component into page.js. This is pretty straightforward but may be helpful to note that since this is a “named export” we want our import in page.js to look like:



import { TicketList } from "./TicketList";




Est remplacé par :



import TicketList from "./TicketList";




Une fois cela fait, nous n'aurons plus cette erreur mais nous devons noter qu'il y a un autre problème, même s'il n'est pas apparent pour le moment. Que se passe-t-il si deux personnes ou plus commentent la même date Création dapplications Web de qualité production avec Supabase - Partie 2 Encore une fois, nos clés ne sont pas uniques et nous verrons cette même erreur. Nous pouvons résoudre ce problème rapidement en ajoutant une propriété id à nos commentaires. Nos commentaires mis à jour devraient maintenant ressembler à :



./src/app/tickets/page.js:1:1 Export default doesn't exist in target module

1 | import TicketList from "./TicketList"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
2 | 
3 | export default function TicketListPage() { 4 | const dummyTickets = [

The export default was not found in module [project]/src/app/tickets/TicketList.js [app-rsc] (ecmascript). Did you mean to import TicketListCréation dapplications Web de qualité production avec Supabase - Partie 2 All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.




Ensuite, il suffit de changer :



Error: Route "/tickets/details/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at TicketDetailsPage (src/app/tickets/details/[id]/page.js:4:50)
  2 | return (
  3 | <div>
> 4 | Ticket Details page with <strong>ID={params.id}</strong>
    | ^
  5 | </div>
  6 | );
  7 | }




À :



export default async function TicketDetailsPage({ params }) {
  const ticketParams = await params;
  const id = ticketParams.id;

  return (
    <div>
      Ticket Details page with <strong>ID={id}</strong>
    </div>
  );
}





  
  
  Sous-section : Implémentation d'une page pour créer un nouveau ticket


Rien à voir ici les amis.


  
  
  Sous-section : Implémentation d'un aperçu des utilisateurs



  
  
  Installation des icônes


Nous devons installer le package @tabler/icons-react : npm i @tabler/icons-react

Pendant que Lorenz utilise IconCheck, je vous recommande d'utiliser IconUserCheck car ce que l'on affiche est un peu plus clair.

Nous devons importer les composants IconUserCheck et IconUserOff dans notre users/page.js :



Encountered two children with the same key, `{comment.date}`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.




Et nous devons remplacer :



<article key="{comment.date}">
</article>



Avec :


Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at LoginPage (src/app/page.js:3:38)
  1 | import { Login } from "./Login";
  2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
    | ^
  4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
  5 | }




Changez le chemin === "/tickets" vers la page vers laquelle le lien pointe, par ex. si le lien pointe vers /tickets/new, vous devez définir la section pathname sur pathname === "/tickets/new".


  
  
  La conclusion


Félicitations, vous êtes désormais la personne n°3 intéressée par ce post. 


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!