React Shell 组件支持传入路由的组件

Question

Good day,

Task

I have an app with about 42 or so "modules" or services. Each service will appear uniform but have unique content. I'm trying to design React components that will reduce or eliminate duplicate structural code. I'm on the right track, but could use a few pointers or suggestions for how to take what I have to the next level.

Context

I've committed what I have have so far. This project is public and can be found here: https://dev.azure.com/Red-Expanse/maelstrom-ui-web-react (create-components branch)

Note: I have a container component for each of my display components so I can tweak the layout of each component separate from the look and feel of the component.

What I Want to Do

Here is an example of how each service should look. The service name for the header and the menu items along with their target paths I can get working. It's the actual display of the target components that I'm challenged.

+----------------------------------------------+
|Service Header                                |
+---------+------------------------------------+
|Service  |  Service Menu Content              |
| Menu    |  (Content shown here depends       |
|         |      on menu selected.)            |
|  Browse |                                    |
|  New    |                                    |
|  Map    |                                    |
+---------+------------------------------------+

To make the above happen, I have the following components:

Service-Content-Container.component

Used by Service-Shell.component (below) to display route components. This is just a container component so I can control the display and position separate from the look-and-feel of the components displayed within.

export const ServiceContentContainer = (props:any) => {
    return <Paper>{props.children}</Paper>;
}

Service-Shell.component

This is the breakthrough I had from previous attempts to design this application. It's one component that takes a bunch of props to configure for each module. Ideally, I want to be able to pass in several components and display them in the <Route ...> components in the shell.

export const ServiceShell = (props:any) => {
    return <Grid container spacing={2}>
        <Grid item sm={12}>
            <ServiceHeaderContainer><ServiceHeader serviceName={props.serviceName} /></ServiceHeaderContainer> 
        </Grid>
        <Grid item sm={3}>
            <ServiceMenuContainer><ServiceMenu serviceMenuChoices={props.serviceMenuChoices} /></ServiceMenuContainer>    
        </Grid>
        <Grid item sm={9}>
            <ServiceContentContainer>
                <Route exact path={props.serviceDashboardPath} component={props.serviceDashboardComponent} />
                <Route exact path={props.serviceDashboardPath} component={props.serviceDashboardComponent} />
                <Route exact path={props.serviceDashboardPath} component={props.serviceDashboardComponent} />
                <Route exact path={props.serviceDashboardPath} component={props.serviceDashboardComponent} />
            </ServiceContentContainer>    
        </Grid>
        <Grid item sm={12}>
            <ServiceFooterContainer><ServiceFooter /></ServiceFooterContainer>            
        </Grid>
    </Grid>;
}

ActivityLog-Service.component

This component is but one of the 42 or so modules I have. All this does is show a ServiceShell (above) component and pass in all the props to configure the generic shell for this particular component. Ideally, here I want to pass in several components specific to this module to the shell and have them displayed in the correct route in the shell.

import { ServiceShell } from '../../app/service/shell/service-shell.component';

export const ActivityLogService = (props: any) => {
    const bc = () => <h1>Testing</h1>
    
    return <ServiceShell serviceName='Activity Log' serviceBrowseComponent={bc} />;
}

You can see how I've tried to approach this, but the components don't show. I would appreciate some guidance on how best to approach this and if this is even possible. Is there a better way to design this to achieve little to no code duplication? It's the code duplication that has killed me in the past. Tweaking the layout in 42 or so different places is not fun.

Thank you in advance for your time and thoughts.

---

Jason

jas@red-expanse.com

Answer 1

Got it. Here is the code.

Service-Shell.component

export const ServiceShell = (props: any) => {
    return <Grid container spacing={2}>
        <Grid item sm={12}>
            <ServiceHeaderContainer><ServiceHeader serviceName={props.serviceName} /></ServiceHeaderContainer> 
        </Grid>
        <Grid item sm={3}>
            <ServiceMenuContainer><ServiceMenu serviceMenuItems={props.serviceMenuItems} /></ServiceMenuContainer>    
        </Grid>
        <Grid item sm={9}>
            <ServiceContentContainer>
                <Switch>
                    <Route exact path='/activitylog' component={props.comp1} />
                    <Route path='/activitylog/browse' component={props.comp2} />
                </Switch>
            </ServiceContentContainer>    
        </Grid>
        <Grid item sm={12}>
            <ServiceFooterContainer><ServiceFooter /></ServiceFooterContainer>            
        </Grid>
    </Grid>;

[New] Service-Menu.component

export const ServiceMenu = (props: any) => {
    const { push } = useHistory()

    function handleClick(event: any) {
        console.log(event.target.id);
        let path = '';
        let id = '';
        let service = '';
        let str = event.target.id;
        var fields = str.split(',');
        id = fields[0];
        service = fields[1];

        switch (id) {
            case 'dashboard':
                path = '/' + service;
                break;
            case 'browse':
                path = '/' + service + '/browse';
                break;
            case 'new':
                path = '/' + service + '/new';
                break;
            case 'map':
                path = '/' + service + '/map';
                break;
        }

        console.log(path);
        push(path);
    }

    const menu = props.serviceMenuItems.map(function (item: any, i: any) {
        let csv = item.id + ',' + item.service;
        return <Button key={i} id={csv} className='btn-app-menu' onClick={handleClick}>{item.caption}</Button>;
    })

    return <ServiceMenuContainer>{menu}</ServiceMenuContainer>
}

ActivityLog.component

export const ActivityLogService = () => {
    const bc = () => <h1>Testing</h1>
    const bd = () => <h2>More?</h2>

    let menuDashboard = {
        caption: 'Dashboard',
        id: 'dashboard',
        service: 'activitylog'
    }

    let menuBrowse = {
        caption: 'Browse',
        id: 'browse',
        service: 'activitylog'
    }

    let menuItems = [menuDashboard, menuBrowse]

    return <ServiceShell
        serviceName='Activity Log'
        comp1={bc}
        comp2={bd}
        serviceMenuItems={menuItems} />
        }

Service-Container.component [Unchanged] [Not Shown]

NA

The full code is/will be available on Azure's DevOps site at the link previously provided. Thanks.

---

Jason

jas@red-expanse.com