Added typescript support

client/package.json

@@ -4,29 +4,36 @@
   "homepage": "https://pineapple.lol/",
   "license": "MIT",
   "dependencies": {
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.3",
     "ag-grid-community": "^25.0.0",
     "ag-grid-enterprise": "^25.0.0",
     "ag-grid-react": "^25.0.0",
-    "axios": "^0.21.1",
+    "axios": "^0.25.0",
     "draft-js": "^0.11.7",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-datepicker": "^3.4.1",
+    "react-datepicker": "^4.6.0",
     "react-dom": "^16.13.1",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "react-select": "^3.2.0",
+    "react-select": "^5.2.2",
     "sass": "^1.45.0",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^2.0.3"
+    "semantic-ui-react": "^2.0.3",
+    "typescript": "^4.5.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.2",
     "@babel/core": "^7.6.2",
     "@babel/preset-flow": "^7.0.0",
+    "@types/draft-js": "^0.11.8",
+    "@types/lodash": "^4.14.178",
+    "@types/react": "^17.0.38",
+    "@types/react-datepicker": "^4.3.4",
     "cypress": "^6.1.0",
     "eslint": "^6.5.1",
     "eslint-config-airbnb": "^18.0.1",

client/src/App.jsx → client/src/App.tsx

@@ -16,7 +16,7 @@ import { getUserAuth } from './utils/apiWrapper';
 import './css/App.css';
 
 const App = () => {
-  const [user, setUser] = useState(null);
+  const [user, setUser] = useState({firstName: '', lastName: '', email: '', level: '', _id: '' });
   const location = useLocation();
 
   // updates user session on router changes
@@ -35,36 +35,36 @@ const App = () => {
       {user && <Navbar user={user} />}
       <Switch>
         <Route exact path={Routes.LOGIN_PAGE}>
-          {user ? <Redirect to={Routes.DEFAULT} /> : <Login />}
+          {user._id ? <Redirect to={Routes.DEFAULT} /> : <Login />}
         </Route>
         <Route path={Routes.PROJECTS}>
-          {user ? <Projects /> : <Redirect to={Routes.LOGIN_PAGE} />}
+          {user._id ? <Projects /> : <Redirect to={Routes.LOGIN_PAGE} />}
         </Route>
         <Route path={Routes.MEMBER_PAGE}>
           <Switch>
             <Route path={Routes.NOTE_PAGE}>
-              {user && <Note user={user} />}
+              {user._id && <Note user={user} />}
             </Route>
-            <Route DEFAULT>
-              {user ? <Profile /> : <Redirect to={Routes.LOGIN_PAGE} />}
+            <Route>
+              {user._id ? <Profile /> : <Redirect to={Routes.LOGIN_PAGE} />}
             </Route>
           </Switch>
         </Route>
         <Route path={Routes.CHAPTERS}>
-          {user ? <Chapters /> : <Redirect to={Routes.LOGIN_PAGE} />}
+          {user._id ? <Chapters /> : <Redirect to={Routes.LOGIN_PAGE} />}
         </Route>
         <PrivateRoute
           path={Routes.NOTE_PAGE}
-          authed={user !== null}
+          authed={!!user._id}
           component={<Note user={user} />}
         />
         <PrivateRoute
           path={Routes.NOTES}
-          authed={user !== null}
+          authed={!!user._id}
           component={<Notes />}
         />
         <Route exact path={Routes.DEFAULT}>
-          {user ? <Home user={user} /> : <Login />}
+          {user._id ? <Home/> : <Login />}
         </Route>
         <Route exact path={Routes.NOT_FOUND}>
           <NotFound />

client/src/components/EditableAttribute/BooleanAttribute.jsx → client/src/components/EditableAttribute/BooleanAttribute.tsx

@@ -1,13 +1,12 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
+import React, { ReactElement } from 'react';
 
 import EnumAttribute from './EnumAttribute';
 
 type BooleanAttributeProps = {
   value: string,
   attributeLabel: string,
-  isDisabled: Function,
+  isDisabled: boolean,
   className: string,
   onChange: Function,
 };
@@ -18,7 +17,7 @@ const BooleanAttribute = ({
   isDisabled = false,
   className = '',
   onChange,
-}: BooleanAttributeProps): Node => {
+}: BooleanAttributeProps): ReactElement => {
   const VALUE_OPTIONS = [
     { label: 'Yes', value: 'true' },
     { label: 'No', value: 'false' },

client/src/components/EditableAttribute/DateAttribute.jsx → client/src/components/EditableAttribute/DateAttribute.tsx

@@ -1,13 +1,12 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
+import React, { ReactElement } from 'react';
 import DatePicker from 'react-datepicker';
 import { startCase } from 'lodash';
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../css/DateAttribute.css';
 
 type DateAttributeProps = {
-  value: number,
+  value: Date,
   attributeLabel: string,
   isDisabled: boolean,
   className: string,
@@ -16,14 +15,14 @@ type DateAttributeProps = {
 };
 
 const DateAttribute = ({
-  value = 0,
+  value = new Date(),
   attributeLabel = '',
   isDisabled = false,
   className = '',
   onChange,
   isRequired = false,
-}: DateAttributeProps): Node => {
-  const onValueChange = (date) => {
+}: DateAttributeProps): ReactElement => {
+  const onValueChange = (date: any) => {
     onChange(date, attributeLabel);
   };
 

client/src/components/EditableAttribute/EnumAttribute.jsx → client/src/components/EditableAttribute/EnumAttribute.tsx

@@ -1,14 +1,17 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
+import React, { ReactElement } from 'react';
 import Select from 'react-select';
 import { startCase } from 'lodash';
 
 const defaultDropdownOption = { label: '', value: '' };
 
+type ValueObject = {
+  value: any
+}
+
 type EnumAttributeProp = {
   value: string,
-  valueOptions: Array<Object>,
+  valueOptions: Array<ValueObject>,
   attributeLabel: string,
   isDisabled: boolean,
   className: string,
@@ -22,12 +25,12 @@ const EnumAttribute = ({
   isDisabled = false,
   className = '',
   onChange,
-}: EnumAttributeProp): Node => {
-  const onValueChange = (selectedOption) => {
+}: EnumAttributeProp): ReactElement => {
+  const onValueChange = (selectedOption: any) => {
     onChange(selectedOption.value, attributeLabel);
   };
 
-  const getOptionFromValue = (val) => {
+  const getOptionFromValue = (val: any) => {
     const dropdownOption = valueOptions.find((option) => option.value === val);
     if (dropdownOption) return dropdownOption;
     return defaultDropdownOption;

client/src/components/EditableAttribute/TextAttribute.jsx → client/src/components/EditableAttribute/TextAttribute.tsx

@@ -1,6 +1,5 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
+import React, { ReactElement } from 'react';
 import { startCase } from 'lodash';
 import { Form } from 'semantic-ui-react';
 
@@ -22,8 +21,8 @@ const TextAttribute = ({
   className = '',
   onChange,
   isRequired = false,
-}: TextAttributeProp): Node => {
-  const onValueChange = (e) => {
+}: TextAttributeProp): ReactElement => {
+  const onValueChange = (e: any) => {
     onChange(e.target.value, attributeLabel);
   };
 

client/src/components/Label/ClickLabel.jsx → client/src/components/Label/ClickLabel.tsx

@@ -1,23 +1,31 @@
-import React from 'react';
+import React, { MouseEventHandler, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import './Label.css';
 import { IoCloseOutline } from 'react-icons/io5';
 
+type ClickLabelProp = {
+  children: ReactElement,
+  textColor: string,
+  backgroundColor: string,
+  initials: string,
+  onClickClose: MouseEventHandler
+};
+
 const ClickLabel = ({
   children,
-  textColor,
-  backgroundColor,
+  textColor = 'black',
+  backgroundColor = 'lightgrey',
   initials,
   onClickClose,
-}) => {
+}: ClickLabelProp) => {
   const labelStyles = {
     color: textColor,
     backgroundColor,
   };
 
   const initialsStyles = {
-    color: backgroundColor,
-    backgroundColor: textColor,
+    color: textColor,
+    backgroundColor,
   };
 
   return (
@@ -39,17 +47,4 @@ const ClickLabel = ({
   );
 };
 
-ClickLabel.propTypes = {
-  children: PropTypes.string,
-  textColor: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  initials: PropTypes.string,
-  onClickClose: PropTypes.func,
-};
-
-ClickLabel.defaultProps = {
-  textColor: 'black',
-  backgroundColor: 'lightgrey',
-};
-
 export default ClickLabel;

client/src/components/Label/Label.tsx

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react';
+import './Label.css';
+
+type LabelProp = {
+  children: ReactElement,
+  textColor: string,
+  backgroundColor: string,
+};
+
+const Label = ({ children, textColor = 'black', backgroundColor = 'lightgrey' }: LabelProp) => {
+
+  const labelStyles = {
+    color: textColor,
+    backgroundColor,
+  };
+
+  return (
+    <div className="label-wrapper" style={labelStyles}>
+      <span className="label-content">{children}</span>
+    </div>
+  );
+};
+
+export default Label;

client/src/components/ProfileDropdown/ProfileDropdown.jsx → client/src/components/ProfileDropdown/ProfileDropdown.tsx

@@ -1,6 +1,5 @@
 // @flow
-import React, { useState, useEffect } from 'react';
-import type { Node } from 'react';
+import React, { useState, useEffect, ReactElement } from 'react';
 import '../../css/ProfileDropdown.css';
 import { Redirect } from 'react-router-dom';
 
@@ -18,7 +17,7 @@ type ProfileDropdownProp = {
  * Displays the Profile icon in the navbar + dropdown components for logout and viewing profile
  * @param {Object} user the current user of the session
  */
-const ProfileDropdown = ({ user }: ProfileDropdownProp): Node => {
+const ProfileDropdown = ({ user }: ProfileDropdownProp): ReactElement => {
   const [redirectToMemberPage, setRedirectToMemberPage] = useState(false);
   const [isLoggedOut, setIsLoggedOut] = useState(false);
 

client/src/components/Summary/NumberMetric.jsx → client/src/components/Summary/NumberMetric.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import Select from 'react-select';
-import PropTypes from 'prop-types';
 import '../../css/Summary.css';
 
-const NumberMetric = ({ options, defaultOption, value, label }) => {
+type NumberMetricProps = {
+  options: string[],
+  defaultOption: string,
+  value: number,
+  label: string,
+}
+
+const NumberMetric = ({ options, defaultOption, value, label }: NumberMetricProps) => {
   const formattedOptions = options.map((option) => ({
     value: option,
     label: option,
@@ -24,11 +30,4 @@ const NumberMetric = ({ options, defaultOption, value, label }) => {
   );
 };
 
-NumberMetric.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.string),
-  defaultOption: PropTypes.string,
-  value: PropTypes.number,
-  label: PropTypes.string,
-};
-
 export default NumberMetric;

client/src/components/WarningModal/WarningModal.jsx → client/src/components/WarningModal/WarningModal.tsx

@@ -1,5 +1,5 @@
 // @flow
-import React, { Node } from 'react';
+import React, { ReactElement } from 'react';
 import { Modal, Header, Button, Icon } from 'semantic-ui-react';
 
 import '../../css/WarningModal.css';
@@ -9,7 +9,7 @@ type WarningModalProp = {
   description: String,
   noAction: () => void,
   yesAction: () => void,
-  isOpen: Bool,
+  isOpen: boolean,
   noText?: String,
   yesText?: String,
 };
@@ -22,7 +22,7 @@ const WarningModal = ({
   isOpen,
   noText = 'No',
   yesText = 'Yes',
-}: WarningModalProp): Node => (
+}: WarningModalProp): ReactElement => (
   <Modal className="warning-modal" open={isOpen}>
     <Header className="warning-modal-title" content={title} />
     <Modal.Content>