Merge pull request #8 from bharatari/dev

v1.0.0

README.md

@@ -4,19 +4,28 @@ UTD Grades is a tool to view grade distributions at UT Dallas.
 
 ## Components
 
-This monorepo consists of 5 sub-projects split into the core application and side utilities.
+This monorepo consists of 4 sub-projects split into the core application and side utilities.
 
 Core Application:
 * The `client` folder contains the project's front-end built with React and Redux
-* The `functions` folder contains the project's backend code built as Node.js AWS Lambda functions with the Serverless framework. We use a PostgreSQL database with the Sequelize Node.js ORM
-* The `nlp` folder contains a natural language processing engine used for parsing incoming searches
+* The `functions` folder contains the project's backend code built as Node.js AWS Lambda functions with the Serverless Framework
 
 Side Utilities:
 * The `converter` folder contains a Python script that converts the Excel file of grade distributions into a JSON file fitting our own data format
 * The `loader` folder contains Node.js data loading script that loads the converted JSON file of grade distributions data into PostgreSQL
 
 There is also a `data` folder that contains all currently received grade data with the original Excel files and converted JSON files.
 
+## Development
+
+Development steps are listed within each module's README.
+
+## Deploying
+
+The two parts making up the core application are the `client` and `functions` modules. The deployment process for both are separate, allowing changes to be made to each service independently from the other. 
+
+Deployment steps are listed within each module's README.
+
 ## Uploading New Data
 
 To upload new grade data received from UTD, the data will first need to be converted from Excel in JSON. To do this, use the `converter` Python script. 

client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "plugins": [
+    "react-hooks"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react/prop-types": 0
+  }
+}

client/.gitignore

@@ -1,4 +1,30 @@
-/coverage
-/dist
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
 /node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

client/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

client/README.md

@@ -1,3 +1,32 @@
-# client
+# UTD Grades Client
 
-Describe client here.
+A React.js client built using Next.js and styled-components.
+
+## Getting Started
+
+1. Make sure you have [NodeJS](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed.
+2. Change into the `client` folder
+    ```bash
+    cd client
+    ```
+2. Install dependencies
+
+    ```bash
+    npm install
+    ```
+3. Start the app
+
+    ```bash
+    npm run dev
+    ```
+
+Access the client at [http://localhost:3000](http://localhost:3000). The app will hot reload as you make changes.
+
+## Deployment
+
+Our current deployment strategy consists of building the client as static site and deploying the built assets onto a dedicated S3 bucket. 
+
+As our client currently does not make use of any server-side rendering features such as Next.js's `getInitialProps` function, we can use the standard build procedure rather than having to use the `next export` command.
+
+1. Run `npm run build` or `next build`
+2. Copy the built assets onto S3 bucket (or any static site host)

client/components/Animations/SlideUp.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import { Transition } from "react-transition-group";
+
+const defaultStyle = {
+  transition: "all 300ms ease-out",
+  opacity: 0,
+};
+
+const transitionStyles = {
+  entering: {
+    opacity: 0,
+    transform: "translateY(20%)",
+  },
+  entered: {
+    opacity: 1,
+    transform: "translateY(0%)",
+  },
+  exiting: {
+    opacity: 1,
+    transform: "translateY(0%)",
+  },
+  exited: {
+    opacity: 0,
+    transform: "scale(0.9) translateY(50%)",
+  },
+};
+
+export default function SlideUp({ startAt, children }) {
+  const [display, setDisplay] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setDisplay(true), startAt);
+  }, []);
+
+  return (
+    <Transition in={display} timeout={300} appear={true} unmountOnExit={true}>
+      {(state) =>
+        React.cloneElement(children, {
+          style: {
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }
+        })
+      }
+    </Transition>
+  );
+}

client/src/components/AutoComplete/index.js → client/components/AutoComplete/index.js

@@ -1,6 +1,4 @@
-import React, { PropTypes } from 'react'
-import classes from './styles.scss';
-import classNames from 'classnames';
+import React from 'react'
 import { AutoComplete as Complete } from 'antd';
 
 const Option = Complete.Option;

client/components/Core/index.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Popover } from 'antd';
+import { HeartTwoTone, ThunderboltTwoTone } from '@ant-design/icons';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  min-height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const Body = styled.div`
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: stretch;
+`;
+
+const Footer = styled.div`
+  text-align: center;
+  width: 100%;
+  display: block;
+  font-family: var(--font-family);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 150px;
+  padding-bottom: 15px;
+
+  @media (max-width: 992px) {
+    & {
+      padding-top: 15px;
+    }
+  }
+`;
+
+function Core({ children }) {
+  const donors = (
+    <div style={{ width: '300px' }}>
+      <p>
+        Thank you to the following people for donating and making this possible
+        (in order of most monetary support): Anthony-Tien Huynh, Adam Butcher,
+        Paul Denino, Thomas Sowders, Xavier Brown, Enza Denino, David Garvin,
+        Alastair Feille, Andrew Vaccaro and other anonymous donors.
+      </p>
+    </div>
+  );
+
+  return (
+    <Container>
+      <Body>{children}</Body>
+      <Footer>
+        <p>
+          Built with <HeartTwoTone twoToneColor="#eb2f96" /> by{' '}
+          <a href="https://www.acmutd.co">ACM Labs</a> and powered{' '}
+          <ThunderboltTwoTone twoToneColor="#ffcc00" /> by{' '}
+          <a href="https://www.utdmercury.com">The Mercury</a>. Raw data
+          available{' '}
+          <a href="https://github.com/bharatari/utd-grades/tree/master/data">
+            for download
+          </a>
+          .
+        </p>
+        <p>
+          Designed by <a href="https://www.arimilli.io">Bharat Arimilli</a>.
+          Thanks to <a href="https://garrettgu.com/">Garrett Gu</a>,{' '}
+          <a href="https://jeffw.xyz/">Jeffrey Wang</a>,{' '}
+          <a href="https://www.linkedin.com/in/josephwickline/">
+            Joseph Wickline
+          </a>{' '}
+          and our{' '}
+          <Popover content={donors}>
+            <span style={{ textDecoration: 'underline' }}>donors</span>.
+          </Popover>
+        </p>
+      </Footer>
+    </Container>
+  );
+}
+
+export default Core;

client/components/Form/index.js

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { Form as AntForm, Popover as AntPopover, Input } from 'antd';
+import styled from 'styled-components';
+
+const StyledSearch = styled(Input.Search)`
+  &&& {
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
+    border-radius: 20px !important;
+    outline: none;
+    font-family: var(--font-family);
+  }
+`;
+
+const Hint = styled(AntPopover)`
+  margin-top: 25px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  font-family: var(--font-family);
+  color: #95989a;
+`;
+
+const Popover = styled.div`
+  font-family: var(--font-family);
+  width: 375px;
+`;
+
+export default function Form({
+  onSubmit,
+  initialValues: { search } = { search: '' },
+}) {
+  const content = (
+    <Popover>
+      <p>You can search for:</p>
+      <ul>
+        <li>A specific section: CS 1337.501</li>
+        <li>A whole course: CS 1337</li>
+        <li>A professor's name (last name or full): Jason Smith</li>
+        <li>A specific semester: CS 1337 fall 2017</li>
+        <li>Everything together: CS 1337.1 fall 2017 jason smith</li>
+      </ul>
+    </Popover>
+  );
+
+  useEffect(() => {
+    setSearchValue(search);
+  }, [search]);
+
+  function handleSubmit(value) {
+    onSubmit({ search: value });
+  }
+
+  const [searchValue, setSearchValue] = useState();
+
+  function handleChange(e) {
+    setSearchValue(e.target.value);
+  }
+
+  return (
+    <AntForm>
+      <StyledSearch
+        name="search"
+        size="large"
+        placeholder="ex. CS 1337 Fall 2017 Smith"
+        onSearch={handleSubmit}
+        onChange={handleChange}
+        value={searchValue}
+      />
+      <Hint content={content} placement="bottom">
+        <span style={{ textAlign: 'center' }}>
+          Need to know what you can enter?{' '}
+          <span style={{ textDecoration: 'underline' }}>
+            Pretty much anything.
+          </span>
+        </span>
+      </Hint>
+    </AntForm>
+  );
+}