SolidJS•7mo ago

Modularizing Components

how would you tackle this, right now i have two different components as pages & now requirements i'm having is that for the third page of the app i'll be using the first page, then the second page the flow of the third page will be to display the table in the first page until he clicks on the CIN, then we display all the products bought from that user, should i make components for the tables and in the props to take params like enableActions to display the crud icons for that specific thing ? https://github.com/ismailelghazi/python_fastapi_react

GitHub

GitHub - ismailelghazi/python_fastapi_react

Contribute to ismailelghazi/python_fastapi_react development by creating an account on GitHub.

4 Replies

peerreynders•7mo ago

Your product component simply exists to show a bunch of products. - on the "product route" it shows all of the products available - clicking on a user in the user route navigates to a "user's products" route. - on the "user's products" route the product component is only fed that limited set of products. This is why it is important to separate the component from the data and let the route load the data needed for the components.

Dev_HKOP•7mo ago

the representation of that data will be in the component, how to seperate the data from it's representation??

function Assure() {
    
    return (
        <div class="flex w-screen h-screen bg-gray-100">
            <Navbar />
            <AssuresTable />
       </div>
    );
}

export default Assure;

function Assure() {
    
    return (
        <div class="flex w-screen h-screen bg-gray-100">
            <Navbar />
            <AssuresTable />
       </div>
    );
}

export default Assure;

i did something like this, and transformed those elements into their own component, now when i'm in the third page that requires to load the first page with the ability to click on the CIN (ID of user) then get all the products for that user now i'll only need to pass the props to that component where they'll olny be actions for that component to use like {enableActions:true,enableClickable:true}

peerreynders•7mo ago

To begin with, from the images you shared I would expect the <Navbar> to be part of the route root layout while AssureTables would be its own route component (under the /assures URL perhaps?).

peerreynders•7mo ago

Right now you are loading the data inside the component. That data should be passed by prop. The fetch itself should be moved into something like a src/api.ts module. There the fetch can be wrapped with a cache. Then create a route component to use the function returned by cache inside a createAsync. It can then pass the accessor to the Product component. Then go one step further and put a load function in the route component to warm that cache point (i.e. just call it without using the result). That way the data will start loading as soon as there is a hover over a link to the route.

GitHub

python_fastapi_react/front/src/Pages/products.jsx at d684bfedd46eae...

Contribute to ismailelghazi/python_fastapi_react development by creating an account on GitHub.

Gaming

Programming

Modularizing Components