Moved examples into example directory

Moved routes to separate file
Used route constants

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.1] - 2022-06-26
+
+- Moved examples into example directory
+- Moved routes to separate file
+- Used route constants
+
 ## [0.4.0] - 2022-07-25
 
 - Added the possibility to override partial configs during deployments

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-starter-kit",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-starter-kit",
-      "version": "0.4.0",
+      "version": "0.4.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starter-kit",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A modern, create-react-app-based, starter kit for React projects",
   "keywords": [
     "react",

src/App.tsx

@@ -1,26 +1,13 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { AboutContainer } from "./features/about/About";
-import { CounterContainer } from "./features/counter/Counter";
-import { HomeContainer } from "./features/home/Home";
+import { BrowserRouter } from "react-router-dom";
 import { Navbar } from "./infrastructure/navbar/Navbar";
+import { AppRoutes } from "./Routes";
 
 function App() {
   return (
     <BrowserRouter>
       <div className="App">
         <Navbar />
-        <Routes>
-          <Route path="/" element={<HomeContainer />} />
-          <Route path="/about" element={<AboutContainer />} />
-          <Route path="/counter" element={<CounterContainer />} />
-          {/* <Route index element={<Home />} /> */}
-          {/* <Route path="teams" element={<Teams />}>
-              <Route path=":teamId" element={<Team />} />
-              <Route path="new" element={<NewTeamForm />} />
-              <Route index element={<LeagueStandings />} />
-            </Route> */}
-          {/* </Route> */}
-        </Routes>
+        <AppRoutes />
       </div>
     </BrowserRouter>
   );

src/Routes.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent } from "react";
+import { Route, Routes } from "react-router-dom";
+import { AboutContainer } from "./features/about/About";
+import { CounterContainer } from "./features/examples/counter/Counter";
+import { HomeContainer } from "./features/home/Home";
+type Props = {};
+
+export const ROUTE_KEYS = {
+  home: "",
+  about: "about",
+  counter: "counter",
+};
+
+export const AppRoutes: FunctionComponent<Props> = () => {
+  const { home, about, counter } = ROUTE_KEYS;
+  return (
+    <Routes>
+      <Route path={home} element={<HomeContainer />} />
+      <Route path={about} element={<AboutContainer />} />
+      <Route path={counter} element={<CounterContainer />} />
+      {/* <Route index element={<Home />} /> */}
+      {/* <Route path="teams" element={<Teams />}>
+      <Route path=":teamId" element={<Team />} />
+      <Route path="new" element={<NewTeamForm />} />
+      <Route index element={<LeagueStandings />} />
+    </Route> */}
+      {/* </Route> */}
+    </Routes>
+  );
+};

src/app/store.ts

@@ -1,5 +1,5 @@
 import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
-import counterReducer from "../features/counter/state/counterSlice";
+import counterReducer from "../features/examples/counter/state/counterSlice";
 
 export const store = configureStore({
   reducer: {

src/app/tests/mocks/i18n/WithTestTranslations.tsx

@@ -2,7 +2,14 @@ import { FunctionComponent, ReactNode } from "react";
 import { I18nextProvider, useTranslation } from "react-i18next";
 import i18n from "./i18n";
 
-type Props = { children?: ReactNode; keysOnly?: boolean };
+type Props = {
+  children?: ReactNode;
+  /**
+   * Whether to show the translation keys instead of translated text
+   * Can be useful to test languages that don't have full translations
+   */
+  keysOnly?: boolean;
+};
 
 const ProvidedComponent: FunctionComponent<Props> = ({ children, keysOnly }) => {
   const [_translate, i18nSettings] = useTranslation();

src/features/counter/services/counterAPI.ts

@@ -1,4 +0,0 @@
-// A mock function to mimic making an async request for data
-export function fetchCount(amount = 1) {
-  return new Promise<{ data: number }>((resolve) => setTimeout(() => resolve({ data: amount }), 500));
-}

src/features/examples/counter/Counter.module.css

@@ -18,7 +18,7 @@
   padding-left: 16px;
   padding-right: 16px;
   margin-top: 2px;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 .button {
@@ -60,7 +60,7 @@
 }
 
 .asyncButton:after {
-  content: '';
+  content: "";
   background-color: rgba(112, 76, 182, 0.15);
   display: block;
   position: absolute;

src/features/examples/counter/Counter.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import styles from "./Counter.module.css";
 import { incrementAsync } from "./state/actions/incrementAsync";
 import {

src/features/examples/counter/services/counterAPI.ts

@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500),
+  );
+}

src/features/examples/counter/state/counterSlice.spec.ts

@@ -1,8 +1,4 @@
-import counterReducer, {
-  increment,
-  decrement,
-  incrementByAmount,
-} from "./counterSlice";
+import counterReducer, { increment, decrement, incrementByAmount } from "./counterSlice";
 import { CounterState } from "../models/CounterState";
 
 describe("counter reducer", () => {

src/features/examples/counter/state/counterSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { AppThunk, RootState } from "../../../app/store";
+import { AppThunk, RootState } from "../../../../app/store";
 import { CounterState } from "../models/CounterState";
 import { incrementAsync } from "./actions/incrementAsync";
 

src/features/home/Home.tsx

@@ -8,19 +8,39 @@ export const HomeContainer: FunctionComponent<Props> = () => {
       <p>This is the react base app :)</p>
       <span>
         <span>Learn </span>
-        <a className="App-link" href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://reactjs.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           React
         </a>
         <span>, </span>
-        <a className="App-link" href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://redux.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Redux
         </a>
         <span>, </span>
-        <a className="App-link" href="https://redux-toolkit.js.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://redux-toolkit.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Redux Toolkit
         </a>
         ,<span> and </span>
-        <a className="App-link" href="https://react-redux.js.org/" target="_blank" rel="noopener noreferrer">
+        <a
+          className="App-link"
+          href="https://react-redux.js.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           React Redux
         </a>
       </span>

src/infrastructure/config/config.ts

@@ -1,4 +1,5 @@
 import deepmerge from "deepmerge";
+import { RunTimeConfig } from "./RunTimeConfig";
 
 /**
  * gets and merges both the regular config and the override config from the window
@@ -12,4 +13,4 @@ export const mergeConfigs = () => {
 
 mergeConfigs();
 
-export const Config = window.mergedConfig;
+export const Config: RunTimeConfig = window.mergedConfig;

src/infrastructure/navbar/Navbar.tsx

@@ -2,12 +2,14 @@ import { DateTime } from "luxon";
 import { FunctionComponent } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { ROUTE_KEYS } from "../../Routes";
 import { Config } from "../config";
 import "./Navbar.css";
 type Props = {};
 
 export const Navbar: FunctionComponent<Props> = () => {
   const [translate, i18n] = useTranslation();
+  const { home, about, counter } = ROUTE_KEYS;
   return (
     <>
       <h1>{translate("navBar.intro")}</h1>
@@ -20,13 +22,13 @@ export const Navbar: FunctionComponent<Props> = () => {
       {/* This translation uses a formatter in the translation files  */}
       <p>{translate("navBar.currentDate", { date: DateTime.now().toJSDate() })}</p>
       <nav data-testid="nav">
-        <Link to="/" data-testid="nav.home">
+        <Link to={home} data-testid="nav.home">
           {translate("nav.home")}
         </Link>
-        <Link to="/about" data-testid="nav.about">
+        <Link to={about} data-testid="nav.about">
           {translate("nav.about")}
         </Link>
-        <Link to="/counter" data-testid="nav.counter">
+        <Link to={counter} data-testid="nav.counter">
           {translate("nav.counter")}
         </Link>
         <button onClick={() => i18n.changeLanguage("en")}>en</button>