Search code examples
reactjsstructurereact-router-dom

Big React App - How to improve my app structure

Can you help me with ideas on how to improve my structure because it becomes very big

Please read my code

My current structure is like so.

enter image description here

This is the parent component (App.js) Biggest component I have

import React, { PureComponent } from 'react';
import { Route, withRouter } from 'react-router-dom';
import Home from "./public/home";
import Dashboard from "./private/dashbaord";
...(around 66 component/packages imports)

class App extends PureComponent {
        constructor(props){
        super(props);
        this.state = {
            pathname: '/public',
            ...(around 15 states)
        };
    }

     componentDidMount() {
       this.checkAccepedCookies();
       this.isLogged();
       this.check404();
       this.insertGTM(); 
       this.insertTrustPiloit();
       this.checkDarkMode();
     }

     updateData(); //The updateData function used to update the pathname state so I can know if it's public or private
     connectWebSocket();
     signout();
     ...(around 21 functions)

    render(){
        return(
            <div>
                {this.state.isPolicy && <PolicyModal isPolicy={this.state.isPolicy} openPolicy={(boolean)=>this.setState({isPolicy: boolean})} />}
                {this.state.isOpenTrack && <TrackOrderModal isOpenTrack={this.state.isOpenTrack} ...(passing 3 props functions) />}
                {this.state.openUsers && <LoginModal ...(passing 3 props functions) />}
                {this.state.isOpenContact && <ContactSupportModal isOpenContact={this.state.isOpenContact} onClose={this.} />}
                {this.state.pathname === '/public' && <NavHome />}
                {!this.state.isCookiesAccepted && <CookiesModal openPolicy={()=>this.setState({isPolicy: true})} accept={()=>this.setState({isCookiesAccepted: true})} />}
               
                 //Buyers Routers
                    <Route path='/buy/' render={()=><BuyersBuy  updateData={this.updateData} />} /> 
                    <Route path='/refund/' render={()=><BuyersRefund  updateData={this.updateData} />} />
                    <Route path='/download/' render={()=><BuyersDownload updateData={this.updateData} />} />
                    ...(Around 18 Routes for Buyers)
                
                    //Then I have the sellers routers it's around 5 routers wrapped in a div like so

                //Sellers Routers
                 <div id='dashboard'>
                    {this.state.pathname === '/private' && <TopNavBarSellers />}
                    {this.state.pathname === '/private' && <LeftNavBarSellers />}
                    <Route path='/dashbaord/' render={()=><SellersDash updateData={this.updateData} />} /> 
                    (4 routers more)
                </div>

                //Users Routers (I haven't implemented the users section yet because I'm confused 
                // because the users section will be around 5 routers with 5 function extra I'm feeling I'm harming the app performance and this not a correct structure.)

            {this.state.pathname === '/public' && <FooterBuyers />}
            </div>
        )
    }
}

This App.js is the biggest file I have the other I have a just small

Please guide me with corect structer that could have Buyers Routers - Sellers Routers - Users Routers

Solution

  • My Approach for smaller files would be some nested routing.
    For example: Group all buyer routes into one component.

    class App extends PureComponent {
  ...
  render() {
    return(
      <div>
        ...
        <Route path='/buyers/' component={BuyersRoot} />
        ...
      </div>
    )
  }
}

...

const BuyersRoot = (props) => {
  const { path }  = useRouteMatch();
  return (
    <Switch>
      <Route path={path +'buy'} render={()=><BuyersBuy  updateData={this.updateData} />} /> 
      <Route path={path +'refund'} render={()=><BuyersRefund  updateData={this.updateData} />} />
      <Route path={path +'download'} render={()=><BuyersDownload updateData={this.updateData} />} />
      ...(Around 18 Routes for Buyers)
  </Switch>
  )
}

    Edit1:

    • You can exclude the RouteRoots to separate Files.
    • Split up the logic in your App Component into separate Files
    • Use some state management to reduce the amount of logic inside your component files.
    • Build service files that only contain logic stuff.
    • Exclude the conditional display logic into the rendering of the Subcomponents and let every component decide whether it should be rendered or not
    • Split up /private and /public routes into RoutingComponents where you can handle authentication and so on.
    • Build higher-order-components to inherit state or context to childs.

    So basically: Pull everything logically apart to shrink your components. But keep everything in context together. Be sure that you don't pull your app too far apart so that no one understands what belongs together. Sometimes this is a very fine line.