Création dun moteur de recherche avec React

Salut, saurais tu mettre ton code dans un block de code pour une meilleure visibilité car ça ne donne pas envie d'aider :/

Hello :)

Bon c'est vrai que c'est pas trop lisible x) je place le code en propre et après je vois si je peux aider :p

import Turnstone from 'turnstone'
import React, { useEffect, useState } from 'react';
import "./styles.css";
import axios from 'axios';

const styles = {
    input: 'border p-2 bg-white w-full',
    listbox: 'border p-2 bg-white w-full'
}

const ITEMS_API_URL = 'https://example.com/api/items';
const DEBOUNCE_DELAY = 500;

// the exported component can be either a function or a class

// Please Read the points:
/**

test were failing but i cant see the test cases so I am helpless
used 500ms timeout for autotype
used axios cancel token so that we can throttle more request.
I am unfimilier with bulma so classname has some issue and it might not look good.
Use search custom hook for seperation.
I haven't put more time checking some minor test failures( sorry time constraint )
*/
//https://jsonplaceholder.typicode.com/posts
// https://example.com/api/items
//https://run.mocky.io/v3/aed33019-118c-406d-9562-55cbb69d85b2
function useSearch(query) {
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState([]);
    useEffect(() => {
        if (!query) return;
        setIsLoading(true);
        const timeOutId = setTimeout(() => fetchData(query), 500);
        return () => clearTimeout(timeOutId);
    }, [query]);

    function fetchData() {
        setData([]);
        let cancel;

        axios({
            method: 'GET',
            url: 'https://run.mocky.io/v3/aed33019-118c-406d-9562-55cbb69d85b2',
            params: { q: query },
            cancelToken: new axios.CancelToken((c) => (cancel = c)),
        }).then((res) => {
            setIsLoading(false);
            console.log(res);
            setData(res.data);
        }).catch((e) => {
            if (axios.isCancel(e)) return;
        });

        return () => cancel();
    }

    return { data, isLoading };
}

//not so familier with bulma so not spending more time on finding classname (sorry)
export default function App() {
const [query, setQuery] = useState('');
const { data, isLoading } = useSearch(query);

return ( <Turnstone id="autocomplete" listbox={isLoading} styles={styles} typeahead={false} /> );
}

Ok alors je viens de voir l'erreur, rien a voir avec le code, en gros c'est ton navigateur qui refuse la connection au websocket car la connection localhost:3000 n'est pas sécurisée

Pour utiliser ws, il te faut un certificat, alors tu as deux méthodes:

• La solu chiante mais tu le fais une fois et ça règlera le soucis sur tous tes sites locaux (enfin faudra quand même configurer un alias, mais ça aussi tu le fais une fois ensuite tu copie/colle la config en changeant l'url): Tu héberges un site vide et tu enregistres le domaine avec un vrai certificat, puis tu récupère ce certificat pour ton site local, ton site local devra avoir un alias qui est un sous-domaine de ton site, par exemple tu enregistres le site https://mon-site-local.test, et pour ton projet perso tu mets en alias https://moteur-de-recherche.mon-site-local.test

• Plus simple: Tu fais un certificat autosigné, il te faut quand même un alias et tu dois configurer ton serveur en 443 (https) au lieux de 80 (http), ensuite tu vas dans une page normale de ton site local pour avoir l'avertissement "blabla le site est pas protégé c'est un certificat autosigné", tu ouvres les options avancées et tu cliques sur "je prends le risque je vais dans le site"

Alors c'est plus simple avec Nginx faut faire un reverse proxy pour l'alias (a l'alias en gros c'est une URL, tu fais un alias https://mon-site-local.test que tu fais pointer vers localhost:3000)

Sinon encore plus simple tu peux chercher dans les paramètres avancés de Firefox pour désactiver le blocage de sites non sécurisés (par contre penses bien à le réactiver quand t'as finis ta session de dev!!!)

Ah oui, sinon utilise laragon si tu le souhaite. Grafikart en a déjà parler et depuis j'ai switch vers ce service car tellement de chose sont déjà installé pour toi ect (comme un certificat SSL)