Buzz 2

package.json

@@ -17,7 +17,7 @@
     "cookie-parser": "^1.4.4",
     "cors": "^2.8.5",
     "dotenv": "6.2.0",
-    "express": "^4.16.4",
+    "express": "^4.21.2",
     "express-promise-router": "^3.0.3",
     "express-session": "^1.16.1",
     "formik": "^1.5.7",

src/components/Home/DesignNotes/Form.js

@@ -1,90 +1,85 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import AnimateHeight from "react-animate-height";
 import { Formik, Field, Form as FormikForm, ErrorMessage } from 'formik';
 import { postDesignNote } from '../../../services/api';
 import config from "../../../config";
 
-export class DesignNotesForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false
-    };
-    this.submitNote = this.submitNote.bind(this);
-  }
+/*NOTE: Art in is not default value*/
 
-  submitNote(values) {
-    const req = Object.assign({}, values, { "section": this.props.section });
-    return postDesignNote(this.props.date, req);
-  }
+export const DesignNotesForm = ( {date, section, properties } ) => {
+  const [open, setOpen] = useState(false);
 
-  render() {
-    return (
-      <div>
-        <div onClick={() => this.setState({ open: !this.state.open })}>
-          <p><u>{this.state.open ? "Close Form" : "Open Form"}</u></p>
-        </div>
-        <AnimateHeight height={this.state.open ? "auto" : 0}>
-          <div style={{
-            border: "1px solid black",
-            padding: "1.5em 1em"
-          }}>
-            <Formik
-              initialValues={this.props.properties.reduce((acc, curr, index) => {
-                acc[curr] = "";
-                return acc;
-              }, {})}
-              onSubmit={(values, actions) => {
-                this.submitNote(values).then(({ data, status}) => {
-                  if (status < 400) {
-                    if (window) {
-                      window.location.reload();
-                    }
-                  }
-                })
-              }}
-              render={({ errors, status, touched, isSubmitting }) => (
-                <FormikForm>
-                  {this.props.properties.map((f) => {
-                    if (f === "artStatus") {
-                      return (
-                        <div key={f}>
-                          <label htmlFor={f}>{f}:{' '}</label>
-                          <Field
-                            component="select"
-                            name={f}
-                          >
-                            <option value="Art In">Art In</option>
-                            <option value="Photo edited, no Camayak">Photo edited, no Camayak</option>
-                            <option value="Waiting for courtesies">Waiting for courtesies</option>
-                          </Field>
-                          <ErrorMessage name={f} component="div" />
-                        </div>
-                      )
-                    } else {
-                      return (
-                        <div key={f}>
-                          <label htmlFor={f}>{f}:{' '}</label>
-                          <Field
-                            type="text"
-                            name={f}
-                            placeholder={config.designNotes.placeholders[f] || null}
-                          />
-                          <ErrorMessage name={f} component="div" />
-                        </div>
-                      )
-                    }
-                  })}
-                  {status && status.msg && <div>{status.msg}</div>}
-                  <button className="primary" type="submit" disabled={isSubmitting}>
-                    <span className="semibold">+</span> Create
-                  </button>
-                </FormikForm>
-              )}
-            />
-          </div>
-        </AnimateHeight>
+  const submitNote = (values) => {
+    const req = { ...values, section };
+    return postDesignNote(date, req);
+  };
+
+  return (
+    <div>
+      <div onClick={() => setOpen(!open)}>
+        <p><u>{open ? "Close Form" : "Open Form"}</u></p>
       </div>
-    )
-  }
-}
+      <AnimateHeight height={open ? "auto" : 0}>
+        <div style={{
+          border: "1px solid black",
+          padding: "1.5em 1em"
+        }}>
+          <Formik
+            initialValues={properties.reduce((acc, curr, index) => {
+              acc[curr] = "";
+              return acc;
+            }, {})}
+            onSubmit={(values, actions) => {
+              submitNote(values).then(({ data, status }) => {
+                if (status < 400) {
+                  if (window) {
+                    window.location.reload();
+                  }
+                }
+              });
+            }}
+          >
+            {({ errors, status, touched, isSubmitting }) => (
+              <FormikForm>
+                {properties.map((f) => {
+                  if (f === "artStatus") {
+                    return (
+                      <div key={f}>
+                        <label htmlFor={f}>{f}:{' '}</label>
+                        <Field
+                          component="select"
+                          name={f}
+                        >
+                          <option value="Art In">Art In</option>
+                          <option value="Photo edited, no Camayak">Photo edited, no Camayak</option>
+                          <option value="Waiting for courtesies">Waiting for courtesies</option>
+                        </Field>
+                        <ErrorMessage name={f} component="div" />
+                      </div>
+                    )
+                  } else {
+                    return (
+                      <div key={f}>
+                            <label htmlFor={f}>{f}:{' '}</label>
+                            <Field
+                              type="text"
+                              name={f}
+                              placeholder={config.designNotes.placeholders[f] || null}
+                            />
+                            <ErrorMessage name={f} component="div" />
+                      </div>
+                    );
+                  }
+                })}
+                {status && status.msg && <div>{status.msg}</div>}
+                <button className="primary" type="submit" disabled={isSubmitting}>
+                  <span className="semibold">+</span> Create
+                </button>
+              </FormikForm>
+            )}
+          </Formik>
+        </div>
+      </AnimateHeight>
+    </div>
+  );
+};

src/components/Home/DesignNotes/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
 import "react-tabs/style/react-tabs.css";
@@ -8,66 +8,59 @@ import { DesignNotesForm } from './Form';
 import config from "../../../config";
 import { BuzzModal } from '../../Shared/Modal';
 
-export class DesignNotes extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: null,
-      loading: true,
-      sections: config.designNotes.sections,
-      properties: config.designNotes.properties,
-      showModal: false,
-      modalItem: null,
-      referText: null,
-    };
-    this.receiveItem = this.receiveItem.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-  };
+export const DesignNotes = ({ date }) => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [modalItem, setModalItem] = useState(null);
+  const [submitFunc, setSubmitFunc] = useState(null);
+  //const [referText, setReferText] = useState(null);
 
-  componentDidMount() {
-    getDesignNotes(this.props.date).then(data => this.setState({ data, loading: false }))
-  };
+  const { sections, properties } = config.designNotes;
 
-  closeModal() {
-    this.setState({ showModal: false });
-  }
-
-  receiveItem(item) {
-    let modalItem = config.designNotes.properties.reduce((acc, curr) => ({ ...acc, [curr]: item[curr] }), {});
-    this.setState({
-      showModal: true,
-      submitFunc: patchDesignNote(item["_id"]),
-      modalItem
+  useEffect(() => {
+    getDesignNotes(date).then(data => {
+      setData(data);
+      setLoading(false);
     });
-  }
+  }, [date]);
 
-  render() {
-    if (this.state.loading) {
-      return null;
-    }
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  const receiveItem = (item) => {
+    const modalItem = properties.reduce((acc, curr) => ({ ...acc, [curr]: item[curr] }), {});
+    setShowModal(true);
+    setSubmitFunc(() => patchDesignNote(item["_id"]));
+    setModalItem(modalItem);
+  };
 
-    return (
-      <>
-        {this.state.showModal
-          ? <BuzzModal
-            submitFunc={this.state.submitFunc}
-            closeModal={this.closeModal}
-            isOpen={this.state.showModal}
-            item={this.state.modalItem}
-          />
-          : null}
-        <Tabs>
-          <TabList>
-            {this.state.sections.map(s => <Tab key={s}>{s}</Tab>)}
-          </TabList>
-          {this.state.sections.map(s => (
-            <TabPanel key={s}>
-              {CreateTable(this.state.data.filter(x => x.section === s), this.state.properties, deleteDesignNote, this.receiveItem)}
-              <DesignNotesForm date={this.props.date} section={s} properties={this.state.properties} />
-            </TabPanel>
-            ))}
-        </Tabs>
-      </>
-    );
+  if (loading) {
+    return null;
   }
-}
+
+  return (
+    <>
+      {showModal && (
+        <BuzzModal
+          submitFunc={submitFunc}
+          closeModal={closeModal}
+          isOpen={showModal}
+          item={modalItem}
+        />
+      )}
+      <Tabs>
+        <TabList>
+          {sections.map(s => <Tab key={s}>{s}</Tab>)}
+        </TabList>
+        {sections.map(s => (
+          <TabPanel key={s}>
+            {CreateTable(data.filter(x => x.section === s), properties, deleteDesignNote, receiveItem)}
+            <DesignNotesForm date={date} section={s} properties={properties} />
+          </TabPanel>
+        ))}
+      </Tabs>
+    </>
+  );
+};

src/components/Shared/Table.css

@@ -1,4 +1,5 @@
 table.responsiveTable {
+    border-collapse: collapse;
     table-layout: fixed !important;
     max-width: 100% !important;
 }
@@ -8,6 +9,18 @@ table.responsiveTable td {
 }
 
 table.responsiveTable > thead {
-    background-color: #ffdd36;
+    background-color: #FFE082;
     color: black;
+}
+
+.tableRows {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.statusCallout {
+    padding: 0.5em 1em;
+    background-color: #FFF4D3;
+    border-radius: 2em;
+    width: fit-content;
 }

src/components/Shared/Table.js

@@ -1,8 +1,11 @@
 import React from "react";
-import { Table, Thead, Tbody, Tr, Th, Td } from "react-super-responsive-table"
+import { Table, Thead, Tbody, Tr, Th, Td } from "react-super-responsive-table";
 import "./Table.css"
 import "react-super-responsive-table/dist/SuperResponsiveTableStyle.css";
 import { FaRegCopy } from "react-icons/fa";
+import { FaTrash } from "react-icons/fa";
+import { MdEdit } from "react-icons/md";
+
 
 export const CreateTable = (data, columns, deleteFunction, editFunction, sting) => (
   <Table>
@@ -19,7 +22,7 @@ export const CreateTable = (data, columns, deleteFunction, editFunction, sting)
     <Tbody>
       {data.map((item, index) => {
         return (
-          <Tr key={index}>
+          <Tr className="tableRows" key={index}>
             {columns.map(property => {
               const value = item[property];
               try {
@@ -51,21 +54,28 @@ export const CreateTable = (data, columns, deleteFunction, editFunction, sting)
               }
               catch { }
               return (
-                <Td key={`${property}-${value}`}>{value ? value : '\u00A0'}</Td>
+                <Td key={`${property}-${value}`}>
+                  {/*NOTE: for now, check if value is not null to handle "art in" always blank*/
+                    (value && (property === "artStatus" || property === "status")) ? (
+                      <div className="statusCallout">{value ? value : '\u00A0'}</div>
+                    ) : (
+                      value ? value : '\u00A0'
+                    )}
+                </Td>
               )
             })}
             {(deleteFunction || editFunction || sting)
               ? (<Td className="deleteTableData" key={`delete-${index}`}>
+                {editFunction
+                  ? (<span className="edit" onClick={() => editFunction(item)}><MdEdit size="1.5em"/></span>)
+                  : null}
                 {deleteFunction 
                 ? (<span className="delete" onClick={() => deleteFunction(item["_id"]).then(() => {
                   if (window) {
                     window.location.reload();
                   }
-                })}>Delete</span>)
+                })}><FaTrash size="1.25em"/></span>)
                 : null}
-                {editFunction
-                  ? (<span className="edit" onClick={() => editFunction(item)}>Edit</span>)
-                  : null}
                 {sting
                   ? (<span className="sting" onClick={() => sting(item["_id"])}>Sting</span>)
                   : null}