fix: cleaned up code (#3)

* Updated checkin

* Before consolidating errs

* Test prettier

* Cleaned up points

* Abt to merge

.eslintrc.json

@@ -5,10 +5,12 @@
  },
  "extends": [
  "plugin:react/recommended",
- "standard-with-typescript"
+ "standard-with-typescript",
+ "prettier"
  ],
  "plugins": [
- "react"
+ "react",
+ "prettier"
  ],
  "rules": {
  "semi": [
@@ -19,6 +21,7 @@
  2,
  "single"
  ],
+ "max-len": ["error", { "code": 80 }],
  "no-unused-vars": 1,
  "multiline-ternary": 0,
  "@typescript-eslint/no-unused-vars": 1,

.prettierrc

@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "trailingComma": "none",
+ "singleQuote": true,
+ "printWidth": 80
+}

package.json

@@ -7,7 +7,8 @@
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
- "prepare": "husky install"
+ "prepare": "husky install",
+ "prettier-format": "prettier --config .prettierrc 'src/**/*.{tsx,ts}' --write"
  },
  "husky": {
  "hooks": {
@@ -16,6 +17,7 @@
  },
  "lint-staged": {
  "src/**/*.{tsx,ts}": [
+ "npm run prettier-format",
  "eslint --fix --max-warnings=0"
  ]
  },
@@ -36,13 +38,16 @@
  "@typescript-eslint/eslint-plugin": "^5.48.2",
  "@vitejs/plugin-react": "^3.0.0",
  "eslint": "^8.32.0",
+ "eslint-config-prettier": "^8.6.0",
  "eslint-config-standard-with-typescript": "^31.0.0",
  "eslint-plugin-import": "^2.27.5",
  "eslint-plugin-n": "^15.6.1",
+ "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-promise": "^6.1.1",
  "eslint-plugin-react": "^7.32.1",
  "husky": "^8.0.3",
  "lint-staged": "^13.1.0",
+ "prettier": "2.8.3",
  "typescript": "^4.9.4",
  "vite": "^4.0.0"
  }

src/App.tsx

@@ -13,7 +13,7 @@ import './App.css';
 const App = (): React.ReactElement => {
  return (
  <BrowserRouter>
- <ToastContainer/>
+  <ToastContainer />
  <div className="home-container">
  <Navbar />
  <div className="content-container">

src/index.css

@@ -1,6 +1,6 @@
 :root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
- font-size: 16px;
+ /* font-size: 16px; */
  line-height: 24px;
  font-weight: 400;
 
@@ -13,7 +13,6 @@
 
 body {
  margin: 0;
-
 }
 
 Button {
@@ -34,6 +33,10 @@ h6 {
  margin: 0;
 }
 
+h1, h3 {
+ padding-bottom: 0.5em;
+}
+
 #root {
  width: 100%;
  height: 100%;

src/pages/CheckIn/index.tsx

@@ -3,25 +3,27 @@ import { Tab, Input, Button } from 'semantic-ui-react';
 
 import axiosInstance from '../../api';
 import { toastError, toastSuccess } from '../../utils/toast';
+
 import './style.css';
 
 const CheckIn = (): React.ReactElement => {
  const [eventKey, setEventKey] = useState('');
  const [eventKeyError, setEventKeyError] = useState(false);
 
- useEffect(() => {
- // Temporary patch to ensure users are authenticated before checking in
- // TODO: Remove after implementing proper login flow
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
- axiosInstance.get('/profile');
- }, []);
+ const handleChangeKey = (event: BaseSyntheticEvent): void => {
+ setEventKey(event.target.value);
+ };
+
+ const handleEnter = async (tgt: React.KeyboardEvent): Promise<void> => {
+ if (tgt.key === 'enter') {
+ await handleSubmit();
+ }
+ };
 
  const handleSubmit = async (): Promise<void> => {
  const isEventKeyError = eventKey === '';
  setEventKeyError(isEventKeyError);
- if (isEventKeyError) {
- return;
- }
+ if (isEventKeyError) return;
 
  axiosInstance
  .patch('/profile', { eventKey })
@@ -34,24 +36,18 @@ const CheckIn = (): React.ReactElement => {
  });
  };
 
- const handleEnter = async (tgt: React.KeyboardEvent): Promise<void> => {
- if (tgt.charCode === 13) {
- await handleSubmit();
- }
- };
-
- const handleChangeKey = (event: BaseSyntheticEvent): void => {
- setEventKey(event.target.value);
- };
+ useEffect(() => {
+ // Temporary patch to ensure users are authenticated before checking in
+ // TODO: Remove after implementing proper login flow
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
+ axiosInstance.get('/profile');
+ }, []);
 
  return (
  <div className="check-in">
- <h2>Check-in</h2>
- <br />
- {/* <Notifications /> */}
+ <h1>Check-in</h1>
  <Tab.Pane>
- <h4>Event Key</h4>
-
+ <h3>Event Key</h3>
  <Input
  fluid
  error={eventKeyError}
@@ -60,11 +56,8 @@ const CheckIn = (): React.ReactElement => {
  onChange={handleChangeKey}
  onKeyPress={handleEnter}
  />
-
- <br />
-
  {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
- <Button fluid onClick={async () => { await handleSubmit(); }}>
+ <Button fluid onClick={handleSubmit}>
  Check-in
  </Button>
  </Tab.Pane>

src/pages/CheckIn/style.css

@@ -1,3 +0,0 @@
-.check-in .__createEvent {
- float: right;
-}