Addressed pr comments

2022-10-14 16:42:35 -04:00 · 2022-10-14 16:42:35 -04:00 · 493d945101
parent 494b6030b8
commit 493d945101
6 changed files with 146 additions and 122 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -15,10 +15,15 @@ module.exports = {
    "plugin:react/recommended",
    "plugin:prettier/recommended",
  ],
-  plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"],
+  plugins: ["@typescript-eslint", "react", "react-hooks", "prettier", "unused-imports"],
  rules: {
+    "no-unused-vars": "off",
+		"unused-imports/no-unused-imports": "error",
+		"unused-imports/no-unused-vars": [
+			"error",
+			{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+		],
    "prettier/prettier": "error",
-
    "import/first": "error",
    "import/order": [
      "error",
--- a/components/Header.module.css
+++ b/components/Header.module.css
@ -1,144 +1,133 @@
 .headerWrapper {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	background: var(--dark--primary-background);
-	z-index: 98;
-	box-sizing: border-box;
-	padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  background: var(--dark--primary-background);
+  z-index: 98;
+  box-sizing: border-box;
+  padding: calc(10rem / 16) calc(100rem / 16) 0;
 }

 .titleHeader {
-	margin: calc(16rem / 16) 0;
+  margin: calc(16rem / 16) 0;
 }

 .sideBarCommon {
-	position: fixed;
-	right: 0;
-	top: 0;
-	width: 20vw;
-	height: 100vh;
-	background: var(--secondary-background);
-	padding: calc(100rem / 16);
-	margin: 0;
-	z-index: 100;
-	padding: 0;
-	padding-right: calc(20rem / 16);
+  position: fixed;
+  right: 0;
+  top: 0;
+  min-width: calc(400rem / 16);
+  height: 100vh;
+  background: var(--secondary-background);
+  padding: calc(100rem / 16);
+  margin: 0;
+  z-index: 100;
+  padding: 0;
+  padding-right: calc(20rem / 16);
+  transition: transform 0.8s;
 }

 .sideBarShown {
-	composes: sideBarCommon;
-	transition: transform 0.8s;
-	transform: translateX(0%);
+  composes: sideBarCommon;
 }

 .sideBarHidden {
-	composes: sideBarCommon;
-	transition: transform 0.8s;
-	transform: translateX(100%);
+  composes: sideBarCommon;
+  transform: translateX(100%);
 }

 .backgroundTintCommon {
-	background-color: var(--label);
-	animation: fadeIn 1s;
-	position: fixed;
-	z-index: 99;
-	left: 0;
-	top: 0;
-	width: 100vw;
-	height: 100vh;
+  background-color: var(--label);
+  animation: fadeIn 1s;
+  position: fixed;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  transition: opacity 0.8s, visibility 0.8s;
 }

 .backgroundTintShow {
-	composes: backgroundTintCommon;
-	transition: opacity 0.8s;
-	opacity: 0.2;
-	visibility: visible;
+  composes: backgroundTintCommon;
+  visibility: visible;
+  opacity: 0.2;
 }

 .backgroundTintHidden {
-	composes: backgroundTintCommon;
-	transition: opacity 0.8s, visibility 0.8s;
-	opacity: 0;
-	visibility: hidden;
+  composes: backgroundTintCommon;
+  visibility: hidden;
+  opacity: 0;
 }


 .menuHeader {
-	margin-bottom: 0;
-	padding-left: calc(20rem / 16);
-	padding-bottom: 0;
-	font-size: cacl(50rem / 16);
-	color: var(--dark--secondary-heading);
+  margin-bottom: 0;
+  padding-left: calc(20rem / 16);
+  padding-bottom: 0;
+  color: var(--dark--secondary-heading);
 }

 .sectionsWrapper {
-	padding-left: calc(30rem / 16);
+  padding-left: calc(30rem / 16);
 }

 .menuIcon {
-	background: none;
-	border: none;
+  background: none;
+  border: none;
 }

 .menuIcon:hover {
-	opacity: 0.8;
-	cursor: pointer;
+  opacity: 0.8;
+  cursor: pointer;
 }

-.mobileSpacer {
-	display: none;
-}

@media screen and (max-width: 768px) {
-	.sideBarCommon {
-		width: 90vw;
-	}
+  .sideBarCommon {
+    min-width: calc(300rem / 16);
+    max-width: calc(500rem / 16);
+  }

-	.menuHeader {
-		padding-left: calc(10rem / 16);
-	}
+  .menuHeader {
+    padding-left: calc(10rem / 16);
+  }

-	.sectionsWrapper {
-		padding-left: calc(20rem / 16);
-	}
+  .sectionsWrapper {
+    padding-left: calc(20rem / 16);
+  }

-	.headerWrapper {
-		padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16);
-	}
-
-	.mobileSpacer {
-		display: block;
-		padding: calc(50rem / 16);
-	}
+  .headerWrapper {
+    padding: calc(10rem / 16) calc(20rem / 16) 0;
+  }
 }

 .closeMenuButton {
-	background: var(--primary-heading);
-	padding: 0 calc(20rem / 16);
-	border-radius: calc(50rem / 16);
-	display: flex;
-	flex-direction: row;
-	margin-left: calc(20rem / 16);
+  background: var(--primary-heading);
+  padding: 0 calc(20rem / 16);
+  border-radius: calc(50rem / 16);
+  display: flex;
+  flex-direction: row;
+  margin-left: calc(20rem / 16);
 }

 .closeMenuButton:hover {
-	background-color: var(--secondary-accent-light);
-	cursor: pointer;
+  background-color: var(--secondary-accent-light);
+  cursor: pointer;
 }

 .lineWrapper {
-	width: 100%;
-	display: flex;
+  width: 100%;
+  display: flex;
 }

 .lineWrapper:before {
-	content: "";
-	flex: 1 1;
-	border-bottom: 3px solid white;
-	margin: auto;
+  content: "";
+  flex: 1 1;
+  border-bottom: 3px solid white;
+  margin: auto;
 }
--- a/components/Header.tsx
+++ b/components/Header.tsx
@ -11,13 +11,22 @@ export function Header() {

  return (
    <>
+      <div
+        className={
+          isShowingMenu
+            ? styles.backgroundTintShow
+            : styles.backgroundTintHidden
+        }
+        onClick={(_) => {
+          setIsShowingMenu(false);
+        }}
+      />
      <div className={styles.headerWrapper}>
        <h1 className={styles.titleHeader}>
          <Link href="/">CS 2022</Link>
        </h1>
        <button
-          onClick={(e) => {
-            e.preventDefault();
+          onClick={(_) => {
            setIsShowingMenu(true);
          }}
          className={styles.menuIcon}
@ -26,8 +35,6 @@ export function Header() {
        </button>
      </div>

-      <div className={styles.mobileSpacer} />
-
      <div
        className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
      >
@ -52,30 +59,6 @@ export function Header() {
          <Sections data={sectionsData} showHeader={false} />
        </div>
      </div>
-
-      <div
-        className={
-          isShowingMenu
-            ? styles.backgroundTintShow
-            : styles.backgroundTintHidden
-        }
-        onClick={(_) => {
-          setIsShowingMenu(false);
-        }}
-      />
    </>
  );
 }
-
-const ListItem: React.FC<{ link: string; children: string }> = ({
-  link,
-  children,
-}) => {
-  return (
-    <h2 className={styles.listItem}>
-      <Link href={link}>
-        <li>{children}</li>
-      </Link>
-    </h2>
-  );
-};
--- a/package-lock.json
+++ b/package-lock.json
@ -5,6 +5,7 @@
  "requires": true,
  "packages": {
    "": {
+      "name": "cs-2022-class-profile",
      "version": "0.1.0",
      "dependencies": {
        "@visx/axis": "^2.10.0",
@ -35,6 +36,7 @@
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.30.0",
        "eslint-plugin-react-hooks": "^4.5.0",
+        "eslint-plugin-unused-imports": "^2.0.0",
        "postcss": "^8.4.14",
        "postcss-calc": "^8.2.4",
        "postcss-flexbugs-fixes": "^5.0.2",
@ -2126,6 +2128,36 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/eslint-plugin-unused-imports": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz",
+      "integrity": "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==",
+      "dev": true,
+      "dependencies": {
+        "eslint-rule-composer": "^0.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "eslint": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
    "node_modules/eslint-scope": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
@ -5949,6 +5981,21 @@
      "dev": true,
      "requires": {}
    },
+    "eslint-plugin-unused-imports": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz",
+      "integrity": "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==",
+      "dev": true,
+      "requires": {
+        "eslint-rule-composer": "^0.3.0"
+      }
+    },
+    "eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true
+    },
    "eslint-scope": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -43,6 +43,7 @@
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
    "postcss": "^8.4.14",
    "postcss-calc": "^8.2.4",
    "postcss-flexbugs-fixes": "^5.0.2",
--- a/pages/samplePage.tsx
+++ b/pages/samplePage.tsx
@ -1,13 +1,12 @@
-import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
 import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";

+import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
-
-import { WordCloud } from "../components/WordCloud";
+import { WordCloud } from "@/components/WordCloud";

 import styles from "./samplePage.module.css";