Merge pull request #269 from systemli/split-index-app-component

♻️ Add App Component

package.json

@@ -13,7 +13,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@semantic-ui-react/css-patch": "^1.0.0",
     "@types/node": "^17.0.40",
-    "@types/react": "^18.0.12",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.17",
     "@types/react-router-dom": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
@@ -81,7 +82,6 @@
   "scripts": {
     "start": "webpack serve --config webpack.dev.config.ts",
     "build": "webpack --config webpack.prod.config.ts",
-    "dist": "tar -C dist -c -z -f release.tar.gz .",
     "postinstall": "semantic-ui-css-patch"
   }
 }

src/App.tsx

@@ -0,0 +1,49 @@
+import React, { FC } from 'react'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { ReactQueryDevtools } from 'react-query/devtools'
+import { BrowserRouter, Route, Switch, useParams } from 'react-router-dom'
+import HomeView from './views/HomeView'
+import LoginView from './views/LoginView'
+import SettingsView from './views/SettingsView'
+import TickerView from './views/TickerView'
+import UsersView from './views/UsersView'
+import 'semantic-ui-css/semantic.min.css'
+import './index.css'
+import '../leaflet.config.js'
+
+interface TickerViewParams {
+  tickerId: string
+}
+
+//TODO: Can be removed if TickerView is rewritten
+const TickerViewWrapper: FC = () => {
+  const { tickerId } = useParams<TickerViewParams>()
+
+  return <TickerView id={tickerId} />
+}
+
+//TODO: Can be removed if LoginView is rewritten
+const LoginViewWrapper: FC = () => {
+  return <LoginView />
+}
+
+const App: FC = () => {
+  const queryClient = new QueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Switch>
+          <Route component={HomeView} exact path="/" />
+          <Route component={LoginViewWrapper} exact path="/login" />
+          <Route component={TickerViewWrapper} path="/ticker/:tickerId" />
+          <Route component={UsersView} path="/users" />
+          <Route component={SettingsView} path="/settings" />
+        </Switch>
+      </BrowserRouter>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+
+export default App

src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

webpack.common.config.ts

@@ -5,7 +5,7 @@ import { Configuration, DefinePlugin } from 'webpack'
 dotenv.config()
 
 const baseConfig: Configuration = {
-  entry: './src/index.js',
+  entry: './src/index.tsx',
   output: {
     publicPath: '/',
     filename: '[name].js?[contenthash]',
@@ -56,4 +56,4 @@ const baseConfig: Configuration = {
   ],
 }
 
-export default baseConfig
+export default baseConfig

yarn.lock

@@ -1435,6 +1435,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
+"@types/react-dom@^17.0.17":
+  version "17.0.17"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
+  integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
+  dependencies:
+    "@types/react" "^17"
+
 "@types/react-router-dom@^5.0.0":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -1452,7 +1459,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.12":
+"@types/react@*":
   version "18.0.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.12.tgz#cdaa209d0a542b3fcf69cf31a03976ec4cdd8840"
   integrity sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==
@@ -1461,6 +1468,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^17", "@types/react@^17.0.0":
+  version "17.0.45"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.45.tgz#9b3d5b661fd26365fefef0e766a1c6c30ccf7b3f"
+  integrity sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"