Cp/iss112

tenant-file/portal-app/package.json

@@ -12,6 +12,7 @@
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
+    "@types/react-color": "^3.0.4",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.1.5",
@@ -24,6 +25,7 @@
     "graphql": "^15.3.0",
     "line-awesome": "^1.3.0",
     "react": "^16.13.1",
+    "react-color": "^2.19.3",
     "react-dom": "^16.13.1",
     "react-firebaseui": "^4.1.0",
     "react-redux": "^7.2.0",

tenant-file/portal-app/src/App.tsx

@@ -1,18 +1,19 @@
-import React from "react";
+import React from 'react';
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "line-awesome/dist/line-awesome/css/line-awesome.min.css";
-import { Switch, Route, Redirect } from "react-router-dom";
-import Login from "./component/login";
-import Layout from "./component/layout";
-import PrivateRoute from "./component/private-route";
-import DisplayImages from "./component/display-images";
-import Admin from "./component/admin";
-import Dashboard from "./component/dashboard";
-import Properties from "./component/properties";
-import Home from "./component/home";
-import TenantDetails from "./component/tenant-details";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import Login from './component/login';
+import Layout from './component/layout';
+import PrivateRoute from './component/private-route';
+import DisplayImages from './component/display-images';
+import Admin from './component/admin';
+import Dashboard from './component/dashboard';
+import Properties from './component/properties';
+import Home from './component/home';
+import TenantDetails from './component/tenant-details';
+import Tags from './pages/Tags-Page';
 
 function App() {
   return (
@@ -28,6 +29,9 @@ function App() {
         <PrivateRoute exact path="/dashboard">
           <Dashboard />
         </PrivateRoute>
+        <PrivateRoute exact path="/tags">
+          <Tags />
+        </PrivateRoute>
         <PrivateRoute
           path="/dashboard/tenant/:id"
           component={TenantDetails}

tenant-file/portal-app/src/component/add-tag-row.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { TwitterPicker, ColorResult } from 'react-color';
+import Tag from './tag';
+import StyledEditTagRow from './styles/TagEditRow';
+import { Tags } from '../types/tag';
+
+type Props = {
+  setData: React.Dispatch<React.SetStateAction<Tags>>;
+  toggleAddTag: () => void;
+};
+
+const AddTagRow = ({ setData, toggleAddTag }: Props) => {
+  const initialState = {
+    name: 'New Tag',
+    description: '',
+    photoCount: 0,
+    id: Math.floor(Math.random() * 10000),
+    color: '#F78DA7',
+  };
+  const [editTagFields, setEditTagFields] = useState(initialState);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  function handleChange(e: React.ChangeEvent) {
+    const target = e.currentTarget as HTMLInputElement;
+    setEditTagFields((prevState) => {
+      return {
+        ...prevState,
+        [target.id]: target.value,
+      };
+    });
+  }
+
+  function handleSubmit(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    // Perform tag updating magic here
+    e.preventDefault();
+    setData((prevState) => {
+      return [editTagFields, ...prevState];
+    });
+    toggleAddTag();
+  }
+
+  function toggleColorPicker() {
+    setShowColorPicker(!showColorPicker);
+  }
+
+  function hadleColorChangeComplete(color: ColorResult) {
+    setEditTagFields((prevState) => {
+      return { ...prevState, color: color.hex };
+    });
+  }
+
+  function cancelAddTag() {
+    setEditTagFields(initialState);
+    toggleAddTag();
+  }
+
+  return (
+    <>
+      <div className="flex-row" key="add">
+        <div className="label">
+          <Tag tag={editTagFields} />
+        </div>
+
+        <div className="description"></div>
+        <div className="photoCount"></div>
+
+        <div className="buttons"></div>
+      </div>
+
+      <StyledEditTagRow
+        color={editTagFields.color}
+        className="flex-row"
+        onSubmit={() => console.log('ok!')}
+      >
+        <div>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            value={editTagFields.name}
+            onChange={handleChange}
+            placeholder="Name"
+          ></input>
+        </div>
+
+        <div>
+          <input
+            type="text"
+            name="description"
+            id="description"
+            value={editTagFields.description}
+            onChange={handleChange}
+            placeholder="Description"
+          />
+        </div>
+        <div onClick={toggleColorPicker} className="color_section">
+          <div className="color"></div>
+          {showColorPicker && (
+            <div className="color-picker">
+              <TwitterPicker
+                onChangeComplete={hadleColorChangeComplete}
+                color={editTagFields.color}
+              />
+            </div>
+          )}
+        </div>
+        <div className="buttons">
+          <button onClick={handleSubmit}>Save</button>
+          <button onClick={cancelAddTag}>Cancel</button>
+        </div>
+      </StyledEditTagRow>
+    </>
+  );
+};
+
+export default AddTagRow;