feat(react-router-v6): initial commit

react-router-v6/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

react-router-v6/.gitignore

@@ -0,0 +1,107 @@
+# Others
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

react-router-v6/README.md

@@ -0,0 +1,18 @@
+# React.js Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React Router v6.1](https://reactrouter.com/en/main/start/tutorial)
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+* [load CSS](https://webpack.js.org/loaders/css-loader/)
+* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

react-router-v6/app/app.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function App() {
+    return (
+	<>
+	    <p>App</p>
+	</>
+    );
+};

react-router-v6/app/components/hello.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+    return (
+	<>
+	    <div>{msg}</div>
+	</>
+    );
+}
+
+export default Hello
+
+Hello.propTypes = {
+    msg: PropTypes.string,
+};

react-router-v6/app/contacts.js

@@ -0,0 +1,73 @@
+import localforage from "localforage";
+import { matchSorter } from "match-sorter";
+import sortBy from "sort-by";
+
+export async function getContacts(query) {
+  await fakeNetwork(`getContacts:${query}`);
+  let contacts = await localforage.getItem("contacts");
+  if (!contacts) contacts = [];
+  if (query) {
+    contacts = matchSorter(contacts, query, { keys: ["first", "last"] });
+  }
+  return contacts.sort(sortBy("last", "createdAt"));
+}
+
+export async function createContact() {
+  await fakeNetwork();
+  let id = Math.random().toString(36).substring(2, 9);
+  let contact = { id, createdAt: Date.now() };
+  let contacts = await getContacts();
+  contacts.unshift(contact);
+  await set(contacts);
+  return contact;
+}
+
+export async function getContact(id) {
+  await fakeNetwork(`contact:${id}`);
+  let contacts = await localforage.getItem("contacts");
+  let contact = contacts.find(contact => contact.id === id);
+  return contact ?? null;
+}
+
+export async function updateContact(id, updates) {
+  await fakeNetwork();
+  let contacts = await localforage.getItem("contacts");
+  let contact = contacts.find(contact => contact.id === id);
+  if (!contact) throw new Error("No contact found for", id);
+  Object.assign(contact, updates);
+  await set(contacts);
+  return contact;
+}
+
+export async function deleteContact(id) {
+  let contacts = await localforage.getItem("contacts");
+  let index = contacts.findIndex(contact => contact.id === id);
+  if (index > -1) {
+    contacts.splice(index, 1);
+    await set(contacts);
+    return true;
+  }
+  return false;
+}
+
+function set(contacts) {
+  return localforage.setItem("contacts", contacts);
+}
+
+// fake a cache so we don't slow down stuff we've already seen
+let fakeCache = {};
+
+async function fakeNetwork(key) {
+  if (!key) {
+    fakeCache = {};
+  }
+
+  if (fakeCache[key]) {
+    return;
+  }
+
+  fakeCache[key] = true;
+  return new Promise(res => {
+    setTimeout(res, Math.random() * 800);
+  });
+}

react-router-v6/app/error-page.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error('error: '+error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

react-router-v6/app/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+    createBrowserRouter,
+    RouterProvider,
+} from 'react-router-dom';
+
+//import root route
+import Root from './routes/root';
+
+//import error route
+//TODO Why is this page not working?
+import ErrorPage from './error-page';
+
+//import contact route
+//TODO Why is this page not working?
+import Contact from './routes/contact';
+
+//create Browser Router and configure route
+const router=createBrowserRouter([
+    {
+	path:"/",
+	element:<Root />,
+	errorElement:<ErrorPage />,
+    },
+    {
+	path:"contacts/:contactId",
+	element:<Contact />,
+    },
+]);
+
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(
+    <React.StrictMode>
+	<RouterProvider router={router} />
+    </React.StrictMode>
+);

react-router-v6/app/pages/home.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Hello from '../components/hello';
+import '../style.css';
+const Home = () => {
+    return (
+	<>
+	    <h2>Home</h2>
+	    <h3>(React.js Lambda Function Component)</h3>
+	    <Hello msg="Hello World!" />
+	</>
+    );
+}
+
+export default Home

react-router-v6/app/routes/contact.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Form } from "react-router-dom";
+
+export default function Contact() {
+  const contact = {
+    first: "Your",
+    last: "Name",
+    avatar: "https://placekitten.com/g/200/200",
+    twitter: "your_handle",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          key={contact.avatar}
+          src={contact.avatar || null}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}{" "}
+          <Favorite contact={contact} />
+        </h1>
+
+        {contact.twitter && (
+          <p>
+            <a
+              target="_blank"
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        )}
+
+        {contact.notes && <p>{contact.notes}</p>}
+
+        <div>
+          <Form action="edit">
+            <button type="submit">Edit</button>
+          </Form>
+          <Form
+            method="post"
+            action="destroy"
+            onSubmit={(event) => {
+              if (
+                !confirm(
+                  "Please confirm you want to delete this record."
+                )
+              ) {
+                event.preventDefault();
+              }
+            }}
+          >
+            <button type="submit">Delete</button>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Favorite({ contact }) {
+  // yes, this is a `let` for later
+  let favorite = contact.favorite;
+  return (
+    <Form method="post">
+      <button
+        name="favorite"
+        value={favorite ? "false" : "true"}
+        aria-label={
+          favorite
+            ? "Remove from favorites"
+            : "Add to favorites"
+        }
+      >
+        {favorite ? "★" : "☆"}
+      </button>
+    </Form>
+  );
+}

react-router-v6/app/routes/root.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+export default function Root() {
+  return (
+    <>
+      <div id="sidebar">
+        <h1>React Router Contacts</h1>
+        <div>
+          <form id="search-form" role="search">
+            <input
+              id="q"
+              aria-label="Search contacts"
+              placeholder="Search"
+              type="search"
+              name="q"
+            />
+            <div
+              id="search-spinner"
+              aria-hidden
+              hidden={true}
+            />
+            <div
+              className="sr-only"
+              aria-live="polite"
+            ></div>
+          </form>
+          <form method="post">
+            <button type="submit">New</button>
+          </form>
+        </div>
+        <nav>
+          <ul>
+            <li>
+              <a href={`/contacts/1`}>Your Name</a>
+            </li>
+            <li>
+              <a href={`/contacts/2`}>Your Friend</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div id="detail"></div>
+    </>
+  );
+}

react-router-v6/config/webpack.common.js

@@ -0,0 +1,41 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../app/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../app'),
+		use: ['babel-loader'],
+	    },
+	    {
+		//test all *.css using style-loader and css-loader
+		test: /\.css$/i,
+		use: ["style-loader", "css-loader"],
+	    },
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

react-router-v6/config/webpack.dev.js

@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+    },
+});

react-router-v6/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

react-router-v6/package.json

@@ -0,0 +1,38 @@
+{
+    "private": true,
+    "name": "react-example",
+    "description": "React.js example",
+    "version": "0.1.0",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.18.13",
+        "@babel/preset-env": "7.18.10",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "css-loader": "6.7.1",
+        "html-webpack-plugin": "5.5.0",
+        "style-loader": "3.3.1",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.10.1",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-router-dom": "6.10.0"
+    }
+}

react-router-v6/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>