github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/Routes.js (about)

     1  import React from 'react';
     2  import PropTypes from 'prop-types';
     3  import Frame from './Frame';
     4  import { Route, useRouteMatch, useHistory } from 'react-router-dom';
     5  import { List, NoItemsListItem } from './List';
     6  import { useTranslation } from 'react-i18next';
     7  import GroupList from './outlets/GroupList';
     8  import OutletScheduleDialog from './schedule/OutletScheduleDialog';
     9  import IntervalSettingsDialog from './schedule/IntervalSettingsDialog';
    10  import SettingsDialog from './settings/SettingsDialog';
    11  import LanguageDialog from './settings/LanguageDialog';
    12  
    13  export default function Routes({ groups, ready }) {
    14    const { t } = useTranslation();
    15  
    16    return (
    17      <Frame>
    18        {ready ? (
    19          <>
    20            <Route path="/">
    21              <GroupList groups={groups} />
    22            </Route>
    23            <Route path="/settings">
    24              <SettingsRoutes />
    25            </Route>
    26            <Route path="/schedule/:outletId">
    27              <ScheduleRoutes />
    28            </Route>
    29          </>
    30        ) : (
    31          <List>
    32            <NoItemsListItem
    33              primary={t('loading-primary')}
    34              secondary={t('loading-secondary')}
    35            />
    36          </List>
    37        )}
    38      </Frame>
    39    );
    40  }
    41  
    42  Routes.propTypes = {
    43    groups: PropTypes.array,
    44    ready: PropTypes.bool.isRequired,
    45  };
    46  
    47  const SettingsRoutes = () => {
    48    const match = useRouteMatch();
    49    const history = useHistory();
    50  
    51    return (
    52      <>
    53        <Route path={match.path}>
    54          <SettingsDialog onClose={() => history.push('/')}/>
    55        </Route>
    56        <Route path={`${match.path}/language`}>
    57          <LanguageDialog onClose={() => history.push(match.url)}/>
    58        </Route>
    59      </>
    60    );
    61  };
    62  
    63  const ScheduleRoutes = () => {
    64    const match = useRouteMatch();
    65    const history = useHistory();
    66  
    67    return (
    68      <>
    69        <Route path={match.path}>
    70          <OutletScheduleDialog onClose={() => history.push('/')}/>
    71        </Route>
    72        <Route path={`${match.path}/interval/:intervalId`}>
    73          <IntervalSettingsDialog onClose={() => history.push(match.url)}/>
    74        </Route>
    75      </>
    76    );
    77  };