Refactored App component in front. Implemented pnpm workspaces. Separated messages types into package

.gitignore

@@ -1,3 +1,4 @@
 pnpm-lock.yaml
 node_modules/
-dist/
+dist/
+*.log

apps/back/package.json

@@ -1,21 +1,20 @@
 {
-  "name": "roomruler",
-  "version": "1.0.0",
-  "description": "Web application for distribution of free classrooms",
+  "name": "@roomruler/back",
+  "version": "0.0.0",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --build",
     "start": "node dist/index.js"
   },
-  "author": "dm1sh",
-  "license": "MIT",
   "devDependencies": {
     "@types/ws": "^7.4.7",
     "typescript": "^4.4.2"
   },
   "dependencies": {
+    "@roomruler/messages": "workspace:^0.0.0",
     "pg": "^8.7.1",
     "reflect-metadata": "^0.1.13",
     "typeorm": "^0.2.37",
     "ws": "^8.2.1"
-  }
+  },
+  "private": "true"
 }

apps/back/src/index.ts

@@ -1,7 +1,7 @@
 import "reflect-metadata";
 import { Server, OPEN } from "ws";
 import { connect, getRoomList, updateFree } from "./db";
-import { isMessage, isUpdateMessage } from "./types";
+import { isMessage, isUpdateMessage } from "@roomruler/messages";
 
 const main = async () => {
   const connection = await connect();

apps/back/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "outDir": "dist"
+  },
+  "references": [{ "path": "../../packages/messages/tsconfig.json" }]
+}

apps/front/package.json

@@ -1,14 +1,11 @@
 {
-  "name": "roomruler",
-  "version": "1.0.0",
-  "description": "Web application for distribution of free classrooms",
+  "name": "@roomruler/front",
+  "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "start": "vite",
     "build": "vite build"
   },
-  "author": "dm1sh",
-  "license": "MIT",
   "devDependencies": {
     "@types/react-dom": "^17.0.9",
     "typescript": "^4.4.2",
@@ -19,5 +16,6 @@
     "immer": "^9.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  }
+  },
+  "private": "true"
 }

apps/front/src/App.tsx

@@ -1,19 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  ThemeProvider,
-  createTheme,
-  useMediaQuery,
-  CssBaseline,
-  AppBar,
-  Toolbar,
-  Typography,
-  makeStyles,
-  Grid,
-} from "@material-ui/core";
+import { useEffect, useRef, useState } from "react";
+import { makeStyles, Grid, useTheme } from "@material-ui/core";
 
 import { RoomContextProvider, useRoomContext } from "./context";
 import { BuildingPlan } from "./components/BuildingPlan";
 import { RoomList } from "./components/RoomList";
+import { AppTheme } from "./theme";
+import { Header } from "./components/Header";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,24 +18,12 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const App = () => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          type: prefersDarkMode ? "dark" : "light",
-        },
-      }),
-    [prefersDarkMode]
-  );
-
-  const planContainer = useRef<HTMLDivElement>(null);
-
+  const theme = useTheme();
   const classes = useStyles();
 
   const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
 
+  const planContainer = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (planContainer.current)
       setCanvasSize({
@@ -53,14 +33,9 @@ export const App = () => {
   }, [planContainer.current]);
 
   return (
-    <ThemeProvider theme={theme}>
+    <AppTheme>
       <RoomContextProvider>
-        <CssBaseline />
-        <AppBar>
-          <Toolbar>
-            <Typography variant="h6">roomruler</Typography>
-          </Toolbar>
-        </AppBar>
+        <Header />
         <Grid className={classes.root} container>
           <Grid ref={planContainer} item xs={9}>
             <BuildingPlan width={canvasSize.w} height={canvasSize.h} />
@@ -70,6 +45,6 @@ export const App = () => {
           </Grid>
         </Grid>
       </RoomContextProvider>
-    </ThemeProvider>
+    </AppTheme>
   );
 };

apps/front/src/components/Header.tsx

@@ -0,0 +1,9 @@
+import { AppBar, Toolbar, Typography } from "@material-ui/core";
+
+export const Header = () => (
+  <AppBar>
+    <Toolbar>
+      <Typography variant="h6">roomruler</Typography>
+    </Toolbar>
+  </AppBar>
+);

apps/front/src/theme.tsx

@@ -0,0 +1,28 @@
+import {
+  createTheme,
+  CssBaseline,
+  ThemeProvider,
+  useMediaQuery,
+} from "@material-ui/core";
+import { FC, useMemo } from "react";
+
+export const AppTheme: FC = ({ children }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          type: prefersDarkMode ? "dark" : "light",
+        },
+      }),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+};

apps/front/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es6",
+    "module": "ESNext",
+    "jsx": "react-jsx"
+  }
+}

back/nodemon.json

@@ -1,6 +0,0 @@
-{
-  "watch": ["src/"],
-  "ext": "ts,json",
-  "exec": "etsc && node ./dist/index.js",
-  "legacyWatch": true
-}

back/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "outDir": "dist"
-  }
-}

front/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "skipLibCheck": true
-  }
-}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "roomruler",
+  "version": "1.0.0",
+  "description": "Web application for distribution of free classrooms",
+  "scripts": {
+    "preinstall": "npx -y only-allow pnpm",
+    "clean": "rm -rf node_modules apps/back/node_modules apps/front/node_modules packages/messages/node_modules apps/back/dist apps/front/dist packages/messages/dist pnpm-lock.yaml"
+  },
+  "author": "dm1sh",
+  "license": "MIT",
+  "engines": {
+    "node": ">= 16.1.0",
+    "pnpm": ">= 6.9.0"
+  },
+  "private": "true",
+  "workspaces": [
+    "packages/*"
+  ]
+}

packages/messages/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@roomruler/messages",
+  "main": "dist/src/index.js",
+  "version": "0.0.0",
+  "types": "dist/src/index.d.ts",
+  "scripts": {
+    "build": "tsc --build"
+  },
+  "devDependencies": {
+    "typescript": "^4.4.2"
+  },
+  "private": "true"
+}

packages/messages/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "outDir": "dist",
+    "composite": true
+  },
+  "include": ["src"]
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "apps/**"
+  - "packages/**"

tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "noImplicitAny": false,
+    "removeComments": true,
+    "noLib": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true
+  },
+  "exclude": ["node_modules"],
+  "references": [
+    {
+      "path": "./apps/front"
+    },
+    {
+      "path": "./apps/back"
+    },
+    {
+      "path": "./packages/messages/"
+    }
+  ]
+}