Clean project config

.babelrc

@@ -1,9 +1,8 @@
 {
 	"presets": ["@babel/env", "@babel/preset-typescript", "@babel/preset-react"],
 	"plugins": [
-		"@babel/proposal-class-properties",
-		"@babel/proposal-throw-expressions",
 		"@babel/syntax-dynamic-import",
-		"babel-plugin-styled-components"
+		"babel-plugin-styled-components",
+		"require-context-hook"
 	]
 }

.editorconfig

@@ -4,7 +4,7 @@ root = true
 # Unix-style newlines with a newline ending every file
 end_of_line = lf
 insert_final_newline = true
-charset = utf-8 # it's 2019
+charset = utf-8
 indent_style = tab # matches prettier
 
 [yaml]

.eslintrc.js

@@ -33,17 +33,33 @@ module.exports = {
 	reportUnusedDisableDirectives: true,
 	rules: {
 		'no-void': 0,
-		'no-underscore-dangle': 0,
-		'no-return-assign': [2, 'except-parens'],
+		'no-underscore-dangle': [
+			'error',
+			{
+				allow: [
+					'_id', // mongodb stores id field as _id
+					'__typename', // GraphQL reserved name
+					'_json', // Required to use Microsoft passport library
+					'client_', // TODO(leonm1): Remove nonconformant client_ in models.ts
+					'collections_', // TODO(leonm1): Remove nonconformant collections_ in models.ts
+					'updateUser_', // TODO(leonm1): Remove nonconformant updateUser_ in helpers.ts
+					// TODO(leonm1): Remove plugins
+					'_Plugin__registerNFCUIDWithUser',
+					'_Plugin__removeUserFromEvent',
+					'_Plugin__checkInUserToEvent',
+					'_Plugin__removeUserFromEventByNfc',
+					'_Plugin__checkInUserToEventByNfc',
+				],
+			},
+		],
 		'@typescript-eslint/explicit-function-return-type': [
 			2,
 			{ allowExpressions: true, allowTypedFunctionExpressions: true },
 		],
-		'prettier/prettier': 'error',
 		'no-param-reassign': [2, { props: true, ignorePropertyModificationsFor: ['draft'] }],
 		'import/no-extraneous-dependencies': [
 			2,
-			{ devDependencies: ['**/*.test.tsx', '**/*.test.ts'] },
+			{ devDependencies: ['**/*.test.tsx', '**/*.test.ts', '**/*.stories.tsx', 'scripts/*'] },
 		],
 		'import/prefer-default-export': [0],
 		'import/extensions': [
@@ -59,7 +75,6 @@ module.exports = {
 		],
 		'no-use-before-define': [0],
 		'@typescript-eslint/no-use-before-define': ['error'],
-		'@typescript-eslint/explicit-module-boundary-types': [0],
 	},
 	root: true,
 	overrides: [
@@ -72,8 +87,8 @@ module.exports = {
 		{
 			files: ['**/scripts/**/*'],
 			rules: {
-				"no-console": 0
-			}
+				'no-console': 0,
+			},
 		},
 		{
 			files: ['**/*.test.js'],

package.json

@@ -60,51 +60,34 @@
 	"dependencies": {
 		"@apollo/client": "^3.3.6",
 		"@google-cloud/storage": "^5.7.0",
-		"@graphql-codegen/cli": "^1.20.0",
-		"@graphql-codegen/typescript": "^1.19.0",
 		"@graphql-codegen/typescript-mongodb": "^1.17.9",
-		"@graphql-codegen/typescript-operations": "^1.17.13",
-		"@graphql-codegen/typescript-react-apollo": "^2.2.1",
-		"@graphql-codegen/typescript-resolvers": "^1.18.1",
 		"@sentry/browser": "^5.29.2",
-		"@svgr/webpack": "^5.5.0",
-		"@types/request": "^2.48.5",
-		"@types/tmp": "^0.2.0",
 		"@vandyhacks/github-oauth": "^1.0.8",
 		"@vandyhacks/google-oauth": "^1.0.9",
 		"apollo-server-express": "^2.19.1",
 		"aws-sdk": "^2.819.0",
-		"babel-plugin-styled-components": "^1.12.0",
 		"case": "^1.6.3",
 		"chart.js": "^2.9.4",
 		"chartjs-plugin-datalabels": "^0.7.0",
 		"classnames": "^2.2.6",
 		"connect-mongo": "^3.2.0",
-		"csstype": "^3.0.5",
 		"date-fns": "^2.19.0",
-		"dotenv": "^8.2.0",
 		"email-validator": "^2.0.4",
 		"escape-html": "^1.0.3",
-		"express": "^4.17.1",
 		"express-session": "^1.17.1",
-		"faker": "^5.1.0",
+		"express": "^4.17.1",
 		"fuse.js": "^6.4.3",
-		"gaxios": "^4.1.0",
-		"googleapis": "^65.0.0",
 		"graphql": "^15.4.0",
 		"helmet": "^4.3.1",
 		"immer": "^8.0.1",
-		"jsdom": "^16.4.0",
 		"mongodb": "^3.6.3",
-		"mongodb-memory-server": "^6.9.2",
 		"node-ical": "^0.12.5",
-		"passport": "^0.4.1",
 		"passport-azure-ad": "^4.3.0",
 		"passport-github2": "^0.1.12",
 		"passport-google-oauth20": "^2.0.0",
 		"passport-oauth2": "^1.5.0",
+		"passport": "^0.4.1",
 		"pino": "^6.8.0",
-		"react": "^17.0.1",
 		"react-chartjs-2": "^2.11.1",
 		"react-confetti": "^6.0.0",
 		"react-csv": "^2.0.3",
@@ -114,12 +97,10 @@
 		"react-selectable-fast": "^3.4.0",
 		"react-toastify": "^6.2.0",
 		"react-virtualized": "^9.22.3",
-		"semver": "^6.3.0",
+		"react": "^17.0.1",
 		"styled-components": "^5.2.1",
 		"styled-reset": "^4.3.4",
-		"ts-xor": "^1.0.8",
-		"use-immer": "^0.4.2",
-		"webpack-cli": "^4.3.0"
+		"use-immer": "^0.4.2"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.12.10",
@@ -129,18 +110,25 @@
 		"@babel/preset-env": "^7.12.11",
 		"@babel/preset-react": "^7.12.10",
 		"@babel/preset-typescript": "^7.12.7",
+		"@graphql-codegen/cli": "^1.20.0",
+		"@graphql-codegen/typescript-operations": "^1.17.13",
+		"@graphql-codegen/typescript-react-apollo": "^2.2.1",
+		"@graphql-codegen/typescript-resolvers": "^1.18.1",
+		"@graphql-codegen/typescript": "^1.19.0",
 		"@shelf/jest-mongodb": "^1.2.3",
-		"@storybook/addon-actions": "^6.1.11",
+		"@storybook/addon-actions": "^6.2.9",
 		"@storybook/addon-console": "^1.2.3",
 		"@storybook/addon-essentials": "^6.2.9",
-		"@storybook/addon-links": "^6.1.11",
+		"@storybook/addon-links": "^6.2.9",
 		"@storybook/addon-storyshots": "^6.2.9",
+		"@storybook/core": "^6.2.9",
 		"@storybook/react": "^6.2.9",
+		"@svgr/webpack": "^5.5.0",
 		"@types/chart.js": "^2.9.29",
 		"@types/classnames": "^2.2.11",
 		"@types/escape-html": "^1.0.0",
-		"@types/express": "^4.17.9",
 		"@types/express-session": "^1.17.3",
+		"@types/express": "^4.17.9",
 		"@types/faker": "^5.1.5",
 		"@types/helmet": "0.0.48",
 		"@types/jest": "^26.0.19",
@@ -151,27 +139,25 @@
 		"@types/passport-github2": "^1.2.4",
 		"@types/passport-google-oauth20": "^2.0.6",
 		"@types/pino": "^6.3.4",
-		"@types/react": "^16.14.2",
 		"@types/react-csv": "^1.1.1",
 		"@types/react-dom": "^16.9.10",
-		"@types/react-router": "^5.1.9",
 		"@types/react-router-dom": "^5.1.6",
 		"@types/react-select": "^3.0.22",
-		"@types/react-test-renderer": "^16.9.4",
 		"@types/react-virtualized": "^9.21.10",
+		"@types/react": "^16.14.2",
+		"@types/request": "^2.48.5",
 		"@types/styled-components": "^5.1.7",
-		"@types/supertest": "^2.0.10",
-		"@types/yup": "^0.29.11",
 		"@typescript-eslint/eslint-plugin": "^4.11.1",
 		"@typescript-eslint/parser": "^4.11.1",
 		"babel-jest": "^26.6.3",
 		"babel-loader": "^8.2.2",
+		"babel-plugin-require-context-hook": "^1.0.0",
+		"babel-plugin-styled-components": "^1.12.0",
 		"concurrently": "^5.3.0",
-		"copy-webpack-plugin": "^6.4.1",
 		"css-loader": "^5.0.1",
+		"csstype": "^3.0.5",
+		"dotenv": "^8.2.0",
 		"dotenv-webpack": "^7.0.3",
-		"error-overlay-webpack-plugin": "^0.4.2",
-		"eslint": "^7.16.0",
 		"eslint-config-airbnb": "^18.2.1",
 		"eslint-config-prettier": "^6.15.0",
 		"eslint-import-resolver-typescript": "^2.3.0",
@@ -181,31 +167,32 @@
 		"eslint-plugin-jsx-a11y": "^6.4.1",
 		"eslint-plugin-prettier": "^3.3.0",
 		"eslint-plugin-promise": "^4.2.1",
-		"eslint-plugin-react": "^7.21.5",
 		"eslint-plugin-react-hooks": "^4.2.0",
+		"eslint-plugin-react": "^7.21.5",
+		"eslint": "^7.16.0",
+		"faker": "^5.1.0",
 		"file-loader": "^6.2.0",
 		"fork-ts-checker-webpack-plugin": "^6.0.8",
 		"friendly-errors-webpack-plugin": "^1.7.0",
 		"happo-plugin-storybook": "^2.7.0",
 		"happo.io": "^6.3.0",
 		"html-webpack-plugin": "^5.3.1",
-		"jest": "^26.6.3",
+		"jest-specific-snapshot": "^4.0.0",
 		"jest-styled-components": "^7.0.3",
 		"jest-transform-css": "^2.1.0",
-		"pino-pretty": "^4.3.0",
+		"jest": "^26.6.3",
+		"jsdom": "^16.4.0",
 		"prettier": "^2.2.1",
-		"react-test-renderer": "^17.0.1",
+		"semver": "^6.3.0",
 		"style-loader": "^2.0.0",
-		"supertest": "^6.0.1",
-		"svg-inline-loader": "^0.8.2",
 		"ts-jest": "^26.4.4",
-		"ts-node": "^9.1.1",
 		"ts-node-dev": "^1.1.1",
-		"typedoc": "^0.20.28",
+		"ts-node": "^9.1.1",
+		"ts-xor": "^1.0.8",
 		"typescript": "^4.1.3",
-		"webpack": "^5.21.1",
-		"webpack-dev-server": "^3.11.1",
-		"webpack-merge": "^5.7.3"
+		"webpack-cli": "^4.3.0",
+		"webpack-merge": "^5.7.3",
+		"webpack": "^5.21.1"
 	},
 	"engines": {
 		"node": "14.15.4"

plugins/nfc/components/Nfc.tsx

@@ -1,7 +1,10 @@
 import React, { FunctionComponent } from 'react';
 import { useImmer } from 'use-immer';
 import NfcTable from './NfcTable';
-import STRINGS from '../../../src/client/assets/strings.json';
+import {
+	PERMISSIONS_NFC,
+	GRAPHQL_ORGANIZER_ERROR_MESSAGE,
+} from '../../../src/client/assets/strings';
 import { GraphQLErrorMessage } from '../../../src/client/components/Text/ErrorMessage';
 import FloatingPopup from '../../../src/client/components/Containers/FloatingPopup';
 import { Spinner } from '../../../src/client/components/Loading/Spinner';
@@ -41,7 +44,7 @@ export const Nfc: FunctionComponent = (): JSX.Element => {
 			sponsorData.company.tier.permissions
 		) {
 			isSponsor = true;
-			viewNfc = sponsorData.company.tier.permissions.includes(STRINGS.PERMISSIONS_NFC);
+			viewNfc = sponsorData.company.tier.permissions.includes(PERMISSIONS_NFC);
 		}
 	}
 
@@ -52,11 +55,11 @@ export const Nfc: FunctionComponent = (): JSX.Element => {
 	}
 	if (hackersError) {
 		console.log(hackersError);
-		return <GraphQLErrorMessage text={STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE} />;
+		return <GraphQLErrorMessage text={GRAPHQL_ORGANIZER_ERROR_MESSAGE} />;
 	}
 	if (eventsError) {
 		console.log(eventsError);
-		return <GraphQLErrorMessage text={STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE} />;
+		return <GraphQLErrorMessage text={GRAPHQL_ORGANIZER_ERROR_MESSAGE} />;
 	}
 
 	const now = Date.now();
@@ -68,7 +71,7 @@ export const Nfc: FunctionComponent = (): JSX.Element => {
 
 	if (isSponsor && sponsorError) {
 		console.log(sponsorError);
-		return <GraphQLErrorMessage text={STRINGS.GRAPHQL_ORGANIZER_ERROR_MESSAGE} />;
+		return <GraphQLErrorMessage text={GRAPHQL_ORGANIZER_ERROR_MESSAGE} />;
 	}
 
 	if (isSponsor && !viewNfc) {

plugins/nfc/components/NfcTable.tsx

@@ -22,7 +22,7 @@ import { NfcTableRows } from './NfcTableRows';
 
 import { QueriedEvent, QueriedHacker, SortFnProps } from './NfcTableTypes';
 
-import STRINGS from '../../../src/client/assets/strings.json';
+import { DARK_TEXT_COLOR, NO_EVENTS_MESSAGE } from '../../../src/client/assets/strings';
 import { SmallCenteredText } from '../../../src/client/components/Text/SmallCenteredText';
 
 const TableLayout = styled('div')`
@@ -178,8 +178,8 @@ const NfcTable: FC<NfcTableProps> = ({ hackersData, eventsData }: NfcTableProps)
 	}, [hackersData, sortBy, sortDirection, searchValue]);
 
 	return eventsData.length === 0 ? (
-		<SmallCenteredText color={STRINGS.DARK_TEXT_COLOR} fontSize="1rem" margin="0rem">
-			{STRINGS.NO_EVENTS_MESSAGE}
+		<SmallCenteredText color={DARK_TEXT_COLOR} fontSize="1rem" margin="0rem">
+			{NO_EVENTS_MESSAGE}
 		</SmallCenteredText>
 	) : (
 		<TableLayout>

plugins/nfc/components/NfcTableRows.tsx

@@ -13,7 +13,7 @@ import styled from 'styled-components';
 import { Row } from './Row';
 import { SortFnProps } from './NfcTableTypes';
 
-import STRINGS from '../../../src/client/assets/strings.json';
+import { DARK_TEXT_COLOR, DARKEST_TEXT_COLOR } from '../../../src/client/assets/strings';
 import { TableCtxI } from '../../../src/client/contexts/TableContext';
 
 // Removes unwanted highlighting, adds alternating row colors
@@ -34,7 +34,7 @@ const StyledTable = styled(Table)`
 	.headerRow {
 		font-size: 1rem;
 		text-transform: capitalize;
-		color: ${STRINGS.DARK_TEXT_COLOR};
+		color: ${DARK_TEXT_COLOR};
 	}
 
 	.headerRow,
@@ -55,7 +55,7 @@ const StyledTable = styled(Table)`
 
 	font-size: 0.8rem;
 	margin-bottom: 5rem;
-	color: ${STRINGS.DARKEST_TEXT_COLOR};
+	color: ${DARKEST_TEXT_COLOR};
 
 	.selected {
 		background-color: #e5e7fa;

src/client/app.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+import { Meta, Story } from '@storybook/react';
 import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import { MOCK_HACKER } from '../common/mockObjects';
 import Component from './app';

src/client/app.tsx

@@ -8,7 +8,7 @@ import Frame from './routes/dashboard/Frame';
 import { AuthContext } from './contexts/AuthContext';
 import { useMeQuery } from './generated/graphql';
 import 'react-toastify/dist/ReactToastify.css';
-import { ACCENT_COLOR, DARK_TEXT_COLOR, WARNING_COLOR } from './assets/strings.json';
+import { ACCENT_COLOR, DARK_TEXT_COLOR, WARNING_COLOR } from './assets/strings';
 
 export const GlobalStyle = createGlobalStyle`
 	${reset}