configure eslint and tsconfig

.eslintrc.json

@@ -1,27 +1,20 @@
 {
-    "env": {
+    "root": true,
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "jest": true,
-        "node": true
-    },
     "extends": [
         "eslint:recommended",
-        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended-requiring-type-checking"
     ],
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    },
+    "rules": {
+        "@typescript-eslint/no-unsafe-argument": "warn",
+        "@typescript-eslint/no-unsafe-assignment": "warn",
+        "@typescript-eslint/unbound-method": "warn"
+    },
     "overrides": [],
     "parser": "@typescript-eslint/parser",
-    "parserOptions": {
+    "plugins": ["@typescript-eslint"],
-        "ecmaVersion": "latest"
+    "ignorePatterns": ["node_modules", "build", "webpack**", "src/public/"]
-    },
-    "plugins": ["react", "@typescript-eslint"],
-    "rules": {},
-    "settings": {
-        "react": {
-            "version": "detect"
-        }
-    },
-    "ignorePatterns": ["node_modules/", "dist/", "build/", "webpack.config.*"]
 }

package.json

@@ -4,32 +4,36 @@
   "description": "Website for IEEE of UC San Diego",
   "main": "build/index.js",
   "scripts": {
-    "build": "webpack & tsc",
+    "build": "webpack & tsc --build --verbose & node build/index.js generate",
-    "lint": "eslint \"**/*.{ts, tsx}\""
+    "start": "node build/index.js",
+    "watch": "webpack watch",
+    "generate": "node build/index.js generate",
+    "lint": "eslint ."
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@types/express": "^4.17.13",
+    "@types/express": "^4.17.14",
-    "@types/node": "^16.11.7",
+    "@types/mongoose": "^5.11.97",
-    "@types/react-dom": "^16.9.14",
+    "@types/node": "^18.11.4",
-    "@types/ws": "^7.4.7",
+    "@types/react-dom": "^18.0.6",
-    "express": "^4.17.1",
+    "@types/ws": "^8.5.3",
-    "mongoose": "^6.1.7",
+    "express": "^4.18.2",
-    "react": "^16.14.0",
+    "mongoose": "^6.6.7",
-    "react-dom": "^16.14.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
+    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.14.5",
-    "@types/react": "^16.14.20",
+    "@types/react": "^18.0.21",
     "@typescript-eslint/eslint-plugin": "^5.40.1",
     "@typescript-eslint/parser": "^5.40.1",
     "babel-loader": "^8.2.3",
-    "copy-webpack-plugin": "^6.4.1",
+    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.7.1",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard-with-typescript": "^23.0.0",
@@ -38,12 +42,12 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.10",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
-    "license-webpack-plugin": "^2.3.21",
+    "license-webpack-plugin": "^4.0.2",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.3.1",
-    "ts-loader": "^8.3.0",
+    "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
-    "webpack": "^5.60.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }
 }

src/public/Config.ts

@@ -44,6 +44,7 @@ export const SOCIALS = [
         message: "@ieeeucsd",
     },
 ];
+
 export const EMAIL = [
     {
         icon: "img/email.svg",
@@ -51,6 +52,7 @@ export const EMAIL = [
         message: "ieee@eng.ucsd.edu",
     },
 ];
+
 export const EMAIL_WHITE = [
     {
         icon: "img/email_white.svg",

src/public/committees.tsx

@@ -10,10 +10,11 @@ import Carousel from "./components/Carousel";
 import Footer from "./components/Footer";
 
 class Main extends React.Component {
-    constructor(props: any) {
+    constructor() {
-        super(props);
+        super({});
         this.state = {};
     }
+
     public render() {
         return (
             <>

src/public/components/DefaultSection.tsx

@@ -5,6 +5,7 @@ interface DefaultSectionProps {
     title: string;
     paragraphs?: string[];
     className?: string;
+    children?: React.ReactNode;
 }
 
 export default class DefaultSection extends Component<DefaultSectionProps> {
@@ -26,7 +27,6 @@ export default class DefaultSection extends Component<DefaultSectionProps> {
                         <p key={n}>{n}</p>
                     )
                 )}
-                {/* eslint-disable-next-line react/prop-types */}
                 {this.props.children}
             </div>
         );

src/public/components/Footer.tsx

@@ -4,8 +4,8 @@ import SocialCard from "./SocialCard";
 import { EMAIL_WHITE, SOCIALS_WHITE } from "../Config";
 
 export default class Footer extends Component {
-    constructor(props: any) {
+    constructor() {
-        super(props);
+        super({});
         this.state = {};
     }
 

src/public/components/TopBar.tsx

@@ -20,14 +20,18 @@ export default class TopBar extends Component<TopBarProps, TopBarState> {
             showBurger: this.shouldShowBurger(),
             menuVisible: false,
         };
+        this.toggleMenu.bind(this);
         window.addEventListener("resize", this.checkResize.bind(this));
     }
+
     private toggleMenu() {
         this.setState({ menuVisible: !this.state.menuVisible });
     }
+
     private checkResize() {
         this.setState({ showBurger: this.shouldShowBurger() });
     }
+
     private shouldShowBurger(): boolean {
         return window.innerWidth < TopBar.HAMBURGER_POINT;
     }
@@ -48,7 +52,7 @@ export default class TopBar extends Component<TopBarProps, TopBarState> {
                         style={{
                             display: this.state.showBurger ? "initial" : "none",
                         }}
-                        onClick={this.toggleMenu.bind(this)}
+                        onClick={this.toggleMenu}
                         role="menubar"
                     >
                         ≡

src/public/events.tsx

@@ -8,10 +8,11 @@ import SocialCard from "./components/SocialCard";
 import Footer from "./components/Footer";
 
 class Main extends React.Component {
-    constructor(props: any) {
+    constructor() {
-        super(props);
+        super({});
         this.state = {};
     }
+
     public render() {
         return (
             <>

src/public/index.tsx

@@ -10,10 +10,11 @@ import Carousel from "./components/Carousel";
 import Footer from "./components/Footer";
 
 class Main extends React.Component {
-    constructor(props: any) {
+    constructor() {
-        super(props);
+        super({});
         this.state = {};
     }
+
     public render() {
         return (
             <>

src/public/projects.tsx

@@ -9,10 +9,11 @@ import SocialCard from "./components/SocialCard";
 import Footer from "./components/Footer";
 
 class Main extends React.Component {
-    constructor(props: any) {
+    constructor() {
-        super(props);
+        super({});
         this.state = {};
     }
+
     public render() {
         return (
             <>

src/util/Database.ts

@@ -1,4 +1,4 @@
-import { Schema, Document } from "mongoose";
+import { Schema } from "mongoose";
 import * as mongoose from "mongoose";
 import { promisify } from "util";
 import { randomBytes, pbkdf2 } from "crypto";
@@ -25,19 +25,23 @@ const User = mongoose.model(
     })
 );
 
-export interface DBUser extends Document {
+interface HashSalt {
+    hash: Buffer;
+    salt: Buffer;
+}
+
+export interface DBUser {
     display: string;
-    email: string;
+    email: {
+        public: boolean;
+        text: string;
+    };
     picture: string;
     password: HashSalt;
     isOfficer: boolean;
     title: string;
     uuid: string;
 }
-interface HashSalt {
-    hash: Buffer;
-    salt: Buffer;
-}
 
 export default class UserDatabase {
     // How many iterations pbkdf2 will iterate the password hashing algorithm
@@ -52,8 +56,14 @@ export default class UserDatabase {
      * @param url the mongodb database url to connect to
      */
     constructor(url: string) {
-        mongoose.connect(url);
+        mongoose
+            .connect(url)
+            .then(() => {
                 mongoose.set("returnOriginal", false);
+            })
+            .catch((err) => {
+                console.error(err);
+            });
     }
 
     // Functions to edit current users
@@ -71,8 +81,8 @@ export default class UserDatabase {
      * @returns the user's display name
      */
     public async getName(uuid: string): Promise<string> {
-        return ((await User.findOne({ uuid: uuid }).lean().exec()) as DBUser)
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
-            .display;
+        return user.display;
     }
 
     /**
@@ -89,8 +99,8 @@ export default class UserDatabase {
      * @returns the user's email
      */
     public async getEmail(uuid: string): Promise<string> {
-        return ((await User.findOne({ uuid: uuid }).lean().exec()) as DBUser)
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
-            .email;
+        return user.email.text;
     }
 
     /**
@@ -111,8 +121,8 @@ export default class UserDatabase {
      * @returns the user's password
      */
     public async getPasswordHash(uuid: string): Promise<Buffer> {
-        return ((await User.findOne({ uuid: uuid }).lean().exec()) as DBUser)
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
-            .password.hash;
+        return user.password.hash;
     }
 
     /**
@@ -132,8 +142,8 @@ export default class UserDatabase {
      * @returns the user's title
      */
     public async getRank(uuid: string): Promise<string> {
-        return ((await User.findOne({ uuid: uuid }).lean().exec()) as DBUser)
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
-            .title;
+        return user.title;
     }
     /**
      * Gets whether of a user with a given UUID is an officer
@@ -141,8 +151,8 @@ export default class UserDatabase {
      * @returns true if the user is an officer
      */
     public async isOfficer(uuid: string): Promise<boolean> {
-        return ((await User.findOne({ uuid: uuid }).lean().exec()) as DBUser)
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
-            .isOfficer;
+        return user.isOfficer;
     }
 
     /**
@@ -159,12 +169,13 @@ export default class UserDatabase {
      * @returns the user's profile picture
      */
     public async getPicture(uuid: string): Promise<string> {
-        return ((await User.findOne({ uuid: uuid }).lean().exec()) as DBUser)
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
-            .picture;
+        return user.picture;
     }
 
     public async getUser(uuid: string): Promise<DBUser> {
-        return User.findOne({ uuid: uuid }).exec() as Promise<DBUser>;
+        const user = await User.findOne({ uuid: uuid }).lean().exec();
+        return user as DBUser;
     }
 
     // User creation and deletion functions

src/util/index.ts

@@ -77,15 +77,19 @@ APP.use(express.urlencoded({ extended: true }));
 APP.get("/", (req: Request, res: Response) => {
     respond(res, "index");
 });
+
 APP.get("/events", (req: Request, res: Response) => {
     respond(res, "events");
 });
+
 APP.get("/projects", (req: Request, res: Response) => {
     respond(res, "projects");
 });
+
 APP.get("/committees", (req: Request, res: Response) => {
     respond(res, "committees");
 });
+
 APP.get("/contact", (req: Request, res: Response) => {
     respond(res, "contact");
 });

tsconfig.json

@@ -1,12 +1,11 @@
 {
     "compilerOptions": {
         "outDir": "./build/",
-		"noImplicitAny": true,
+        "noImplicitAny": false,
         "module": "commonjs",
         "target": "es6",
         "jsx": "react",
         "esModuleInterop": true
     },
-	"include": ["./src"],
+    "include": ["./src/util"]
-	"exclude": ["./src/public"]
 }

webpack.config.js

@@ -1,7 +1,5 @@
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
-const LicensePlugin = require("license-webpack-plugin").LicenseWebpackPlugin;
-const TerserPlugin = require("terser-webpack-plugin");
 const fs = require("fs");
 
 module.exports = {
@@ -10,6 +8,7 @@ module.exports = {
         path: path.resolve(__dirname, "build/public"),
         filename: "./js/[name].js",
     },
+    mode: "production",
     module: {
         rules: [
             {
@@ -29,44 +28,24 @@ module.exports = {
     resolve: {
         extensions: [".tsx", ".ts", ".js"],
     },
-    mode: "production",
     plugins: [
         new CopyPlugin({
             patterns: [
                 {
-                    from: "./src/public",
+                    from: "./src/util",
-                    to: ".",
-                    globOptions: {
-                        ignore: ["**/*.tsx", "**/*.ts"],
-                    },
                 },
             ],
         }),
-        new LicensePlugin({
-            outputFilename: "third-party-notice.txt",
-        }),
     ],
-    optimization: {
-        minimize: true,
-        minimizer: [
-            new TerserPlugin({
-                terserOptions: {
-                    output: {
-                        comments: false,
-                    },
-                },
-                extractComments: false,
-            }),
-        ],
-    },
-    //devtool: "source-map"
-    devServer: {
-        static: "./build/public",
-    },
 };
 
+/**
+ * Load all entries from a directory
+ * @param {*} dir Directory to load entries from
+ * @returns Object with entries
+ */
 function loadEntries(dir) {
-    let files = fs.readdirSync(path.join(__dirname, dir));
+    const files = fs.readdirSync(path.join(__dirname, dir));
     let entries = {};
     files.forEach((file) => {
         let name = file.match(/^(.*)\.tsx$/);