Codebase Restructure (#408)

* The Big Bang

* Action Sorting + Warnings

* Graphics Updates

* Remove props dependencies

* Wider Lines + Bread

* Update 404 Page

* Update README.md

* Fix File Capitalization

.prettierrc.js

@@ -2,7 +2,7 @@ module.exports = {
   semi: true,
   trailingComma: 'all',
   singleQuote: true,
-  printWidth: 100,
+  printWidth: 150,
   tabWidth: 2,
   endOfLine: 'auto',
 };

README.md

@@ -1,70 +1,48 @@
-## Setup
-
-Install Node and npm: [https://nodejs.org/en/](https://nodejs.org/en/).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+# ACM at UCSD: Membership Portal UI
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+This is the frontend repository for the ACM at UCSD membership portal. The live portal is viewable at: [http://members.acmucsd.com](http://members.acmucsd.com).
 
-### `npm test`
+See [https://github.com/acmucsd/membership-portal](https://github.com/acmucsd/membership-portal) for the portal backend.
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## Setup
 
-### `npm run eject`
+**Install Node and npm**: [https://nodejs.org/en/](https://nodejs.org/en/). Builds are currently run on version `10.23.1`, but the LTS and Current versions should also work.
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+**Install yarn**: `npm install -g yarn`. Builds are currently run on `1.17.0`, but any version should also work.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+## Running
 
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+**Clone the repo**: Run `git clone https://github.com/acmucsd/membership-portal-ui.git` in a terminal.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+**Install packages**: Run `yarn` or `yarn install` to install the node modules.
 
-## Learn More
+**Run the portal**: Run `yarn start` to run the portal with the development environment variables. The page will be available at `localhost:8080`.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Issues
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- Add on Github/Zenhub, including a title, description, screenshots if applicable
 
-### Code Splitting
+- Label the applicable issue type.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+- If you’d like to work on that specific issue, assign yourself.
 
-### Analyzing the Bundle Size
+- If not, it will get assigned during development meetings.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+## PRs
 
-### Making a Progressive Web App
+- Every PR should have a corresponding issue it’s tied to. You can link by using the phrase “Resolves #XX.” in the PR description, or in the GitHub sidebar. Assign yourself to the PR.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+- Tag the PR as “PR: Needs Review” and request a review from the portal PM.
 
-### Advanced Configuration
+- If the PR is approved, go ahead and merge the PR into the repo.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+- If the PR isn’t approved, check the comments for feedback / suggested changes.
+When you merge, the branch will be deleted automatically.
 
-### Deployment
+## Coding
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+- When working on the portal, start by creating a new branch based on master. Add all commits to this branch, and then you can create a PR from there.
 
-### `npm run build` fails to minify
+- There should be one feature/bugfix per branch.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+- If you’re working on the portal in parallel with someone else and end up with PR conflicts / merge issues, contact the portal PM via the Discord server.

package.json

@@ -14,7 +14,6 @@
     "history": "^4.10.1",
     "immutable": "^3.8.1",
     "jest": "24.9.0",
-    "konami-code": "^0.2.1",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.15",

public/manifest.json

@@ -4,7 +4,7 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "64x64 32x32 16x16",
       "type": "image/x-icon"
     }
   ],

src/actions/adminActions.ts → src/admin/adminActions.ts

@@ -3,9 +3,9 @@ import copy from 'copy-to-clipboard';
 import Config from '../config';
 import Storage from '../storage';
 
-import { EVENT_DELETE, ThunkActionCreator } from './types';
+import { EVENT_DELETE, ThunkActionCreator } from './adminTypes';
 import { notify } from '../utils';
-import { logoutUser } from './authActions';
+import { logoutUser } from '../auth/authActions';
 
 export const postEvent: ThunkActionCreator = (event) => async (dispatch) => {
   return new Promise(async (resolve, reject) => {

src/admin/adminReducer.ts

@@ -0,0 +1,15 @@
+import { AnyAction } from 'redux';
+import {} from './adminTypes';
+
+const initialState = {
+  error: false,
+};
+
+const AdminReducer = (state = initialState, action: AnyAction) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+
+export default AdminReducer;

src/admin/adminTypes.ts

@@ -0,0 +1,6 @@
+import { ThunkAction } from 'redux-thunk';
+import { ActionCreator, AnyAction } from 'redux';
+
+export const EVENT_DELETE = 'EVENT_DELETE';
+
+export type ThunkActionCreator = ActionCreator<ThunkAction<void, {}, {}, AnyAction>>;

src/components/AdminPage/style.less → src/admin/components/AdminPage/style.less

@@ -1,4 +1,4 @@
-@import '../../styles/vars.less';
+@import '../../../styles/vars.less';
 
 .admin-page {
   .title {

src/components/admin/AwardPointsForm/index.tsx → src/admin/components/AwardPointsForm/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  ChangeEventHandler,
-  FocusEventHandler,
-  FormEventHandler,
-  ChangeEvent,
-} from 'react';
+import React, { useState, ChangeEventHandler, FocusEventHandler, FormEventHandler, ChangeEvent } from 'react';
 import { Form, Input, Button, Tag, Tooltip, Icon } from 'antd';
 
 import './style.less';
@@ -26,15 +20,7 @@ interface AwardPointsFormProps {
 }
 
 const AwardPointsForm: React.FC<AwardPointsFormProps> = (props) => {
-  const {
-    handleBlur,
-    handleChange,
-    handleSubmit,
-    isSubmitting,
-    isValidating,
-    setFieldValue,
-    values,
-  } = props;
+  const { handleBlur, handleChange, handleSubmit, isSubmitting, isValidating, setFieldValue, values } = props;
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const [awardees, _setAwardees] = useState([] as any[]);
@@ -77,13 +63,7 @@ const AwardPointsForm: React.FC<AwardPointsFormProps> = (props) => {
           <Input type="hidden" value={values.uuid} name="uuid" />
           <Input type="hidden" value={awardees} name="awardees" />
           <Form.Item className="points-wrapper" label="Points">
-            <Input
-              name="points"
-              className="points"
-              value={values.points}
-              onChange={handleChange}
-              onBlur={handleBlur}
-            />
+            <Input name="points" className="points" value={values.points} onChange={handleChange} onBlur={handleBlur} />
           </Form.Item>
           <Form.Item label="Awardees" className="awardees-list-wrapper">
             <div>
@@ -124,20 +104,9 @@ const AwardPointsForm: React.FC<AwardPointsFormProps> = (props) => {
             </div>
           </Form.Item>
           <Form.Item label="Description">
-            <TextArea
-              name="description"
-              className="area-box"
-              value={values.description}
-              onChange={handleChange}
-              onBlur={handleBlur}
-            />
+            <TextArea name="description" className="area-box" value={values.description} onChange={handleChange} onBlur={handleBlur} />
           </Form.Item>
-          <Button
-            type="primary"
-            htmlType="submit"
-            className="save-button"
-            loading={isSubmitting && isValidating}
-          >
+          <Button type="primary" htmlType="submit" className="save-button" loading={isSubmitting && isValidating}>
             Submit Edits
           </Button>
           <Button type="danger" className="discard-button">

src/components/admin/AwardPointsPage/index.tsx → src/admin/components/AwardPointsPage/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import AwardPointsForm from '../../../containers/admin/AwardPointsForm';
+import AwardPointsForm from '../../containers/AwardPointsForm';
 
 import './style.less';