react-fm-example/src/App.tsx at 6a43f8d4e03edc1ef9bf56c45f7d8ff04c54eb8a · romainverduci/react-fm-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import './App.css'
import { Outlet, Route, Routes } from 'react-router-dom'
import { Home } from './Home.tsx'
import { About } from './About.tsx'
import { Nav } from './Nav.tsx'
import { useFeatureFlag } from './useFeatureFlag.ts'
import { namespaceFlags } from './feature-management/flags.ts'

export const customRoutes = [
  {
    path: '/',
    label: 'Home',
    element: <Home />,
    index: true,
    featureFlag: { namespace: 'routes', flag: 'home' },
  },
  {
    path: 'about',
    label: 'About',
    element: <About />,
    // featureFlag: { namespace: 'routes', flag: 'about' },
  },
]

const Layout = () => (
  <div>
    <Nav />
    <Outlet />
  </div>
)

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Layout />}>
          {customRoutes.map((route, index) => {
            const routeFlag = route.featureFlag
              ? route.featureFlag.namespace === 'routes' && route.featureFlag.flag === 'about'
                ? true
                : useFeatureFlag(
                    namespaceFlags[route.featureFlag.namespace][
                      route.featureFlag.flag
                    ]
                  )
              : true
            return routeFlag ? (
              <Route
                key={index}
                path={route.path}
                element={route.element}
                index={route.index}
              />
            ) : null
          })}
          <Route path="*" element={<div>404 Not Found</div>} />
        </Route>
      </Routes>
    </>
  )
}

export default App