@digipolis/start-ui/generators/react/routing.js

Digipolis starter kit

const allRouteReplaceOptions = [
  {
    files: `${__frontenddir}/src/index.js`,
    from: "import ReactDOM from 'react-dom/client';",
    to: `import ReactDOM from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";`,
  },
  {
    files: `${__frontenddir}/src/index.js`,
    from: '<App />',
    to: '<BrowserRouter><App /></BrowserRouter>',
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: "import Home from './components/Home/Home';",
    to: `import Home from './components/Home/Home';
import About from './components/About/About';`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'import {',
    to: `import { Link, Route, Routes } from "react-router-dom";
import {`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: '<Header logoAlt="{{BRANDING_NAME}} logo." logoSrc="https://cdn.antwerpen.be/{{BRANDING_TYPE}}_branding_scss/{{BRANDING_VERSION}}/assets/images/{{BRANDING_LOGO}}" />',
    to: `<Header logoAlt="{{BRANDING_NAME}} logo." logoSrc="https://cdn.antwerpen.be/{{BRANDING_TYPE}}_branding_scss/{{BRANDING_VERSION}}/assets/images/{{BRANDING_LOGO}}">
            <div className="o-header__content-wrapper">
              <div className="o-header__menu-items">
                <div className="o-header__menu-item">
                  <Link to={'/'} className="a-button-negative o-header__button">Home</Link>
                </div>
                <div className="o-header__menu-item">
                  <Link to={'/about'} className="a-button-negative o-header__button">About</Link>
                </div>
              </div>
            </div>
          </Header>`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: '<Home />',
    to: `<Routes>
                <Route path="/about" element={<About/>}></Route>
                <Route path="/" element={<Home/>} />
              </Routes>`,
  },
];

const loginReplaceOptions = [
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'import { Link',
    to: `import { useEffect, useState } from 'react';
  import { Link`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'Footer,',
    to: `Footer,
  UserMenu,`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'function App() {',
    to: `function App() {
  const [loggedin, setLoggedin] = useState(false);
  const [user, setUser] = useState(undefined);

  useEffect(() => {
    fetch('/auth/isloggedin')
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw Error('Request rejected with status ' + response.status);
        }
      })
      .then(data => {
        setLoggedin(data.isLoggedin);
        setUser(data.user);
      })
      .catch(console.error);
  }, []);
`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: '<Header logoAlt="{{BRANDING_NAME}} logo." logoSrc="https://cdn.antwerpen.be/{{BRANDING_TYPE}}_branding_scss/{{BRANDING_VERSION}}/assets/images/{{BRANDING_LOGO}}" />',
    to: `<Header logoAlt="{{BRANDING_NAME}} logo." logoSrc="https://cdn.antwerpen.be/{{BRANDING_TYPE}}_branding_scss/{{BRANDING_VERSION}}/assets/images/{{BRANDING_LOGO}}">
          <div className="o-header__content-wrapper">
            <div className="o-header__menu-items">
              <div className="o-header__menu-item">
                <UserMenu
                  user={user}
                  loggedIn={loggedin}
                  loginUrl="/auth/login/mprofiel"
                  logoutUrl="/auth/logout/callback/mprofiel">
                </UserMenu>
              </div>
            </div>
          </div>
          </Header>`,
  },
];

const loginRoutingReplaceOptions = [
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'import { Link',
    to: `import { useEffect, useState } from 'react';
  import { Link`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'Footer,',
    to: `Footer,
  UserMenu,`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: "import About from './components/About/About';",
    to: `import About from './components/About/About';
import Login from './components/Login/Login';`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: 'function App() {',
    to: `function App() {
  const [loggedin, setLoggedin] = useState(false);
  const [user, setUser] = useState(undefined);

  useEffect(() => {
    fetch('/auth/isloggedin')
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw Error('Request rejected with status ' + response.status);
        }
      })
      .then(data => {
        setLoggedin(data.isLoggedin);
        setUser(data.user);
      })
      .catch(console.error);
  }, []);
`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: `<div className="o-header__menu-item">
                  <Link to={'/about'} className="a-button-negative o-header__button">About</Link>
                </div>`,
    to: `<div className="o-header__menu-item">
                  <Link to={'/about'} className="a-button-negative o-header__button">About</Link>
                </div>
                <div className="o-header__menu-item">
                  <UserMenu
                    user={user}
                    loggedIn={loggedin}
                    loginUrl="/login"
                    logoutUrl="/auth/logout/callback/mprofiel">
                  </UserMenu>
                </div>`,
  },
  {
    files: `${__frontenddir}/src/App.js`,
    from: '<Route path="/about" element={<About/>}></Route>',
    to: `<Route path="/about" element={<About/>}></Route>
                  <Route path="/login" element={<Login/>}></Route>`,
  },
];

export const mapRouting = (conf) => {
  if (!conf.routing) {
    return {
      add: false,
      npm: [],
    };
  }
  return {
    add: true,
    npm: ['react-router-dom'],
  };
};

function mapReplacements(replacements) {
  return replacements.reduce((acc, value) => {
    if (!acc[value.files]) {
      acc[value.files] = {
        files: value.files,
        from: [],
        to: [],
      };
    }

    acc[value.files].from.push(value.from);
    acc[value.files].to.push(value.to);

    return acc;
  }, {});
}

export function getRoutingReplaceOptions() {
  return mapReplacements(allRouteReplaceOptions);
}

export function getLoginReplaceOptions() {
  return mapReplacements(loginReplaceOptions);
}

export function getLoginRoutingReplaceOptions() {
  return mapReplacements(loginRoutingReplaceOptions);
}

export default {
  getRoutingReplaceOptions,
  getLoginReplaceOptions,
  getLoginRoutingReplaceOptions,
  mapRouting,
};