add tags input

Author: ncarchedi

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@material-ui/core": "latest",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.55",
     "clsx": "latest",
     "moment": "^2.26.0",
     "react": "latest",

src/App.js

@@ -2,12 +2,13 @@ import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Typography from "@material-ui/core/Typography";
-import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import Chip from "@material-ui/core/Chip";
+import NoteInput from "./NoteInput";
+import TagsInput from "./TagsInput";
 import moment from "moment";
 import { v4 as uuidv4 } from "uuid";
 
@@ -21,33 +22,29 @@ const useStyles = makeStyles((theme) => ({
   form: {
     margin: theme.spacing(5, 0, 3, 0),
   },
-  input: {
-    marginBottom: theme.spacing(2),
-  },
   tag: {
     margin: theme.spacing(0, 0, 0, 0.5),
   },
 }));
 
 export default function App() {
   const classes = useStyles();
-
-  const dummyData = [
+  const dummyNotes = [
     {
       id: uuidv4(),
-      timestamp: moment().add(25, "minutes"),
+      timestamp: moment().subtract(25, "minutes"),
       text: "Get groceries",
       tags: ["todo"],
     },
     {
       id: uuidv4(),
-      timestamp: moment().add(10, "minutes"),
+      timestamp: moment().subtract(10, "minutes"),
       text: "Go to the gym later",
       tags: ["todo", "fitness", "2020 goals"],
     },
     {
       id: uuidv4(),
-      timestamp: moment().add(4, "minutes"),
+      timestamp: moment().subtract(4, "minutes"),
       text: "Mitch is the trainer from Colorado",
       tags: ["people"],
     },
@@ -58,9 +55,20 @@ export default function App() {
       tags: ["work", "reminder"],
     },
   ];
-  const [notes, setNotes] = useState(dummyData);
+  const dummyTags = [
+    "todo",
+    "fitness",
+    "2020 goals",
+    "people",
+    "work",
+    "reminder",
+  ];
+  const [notes, setNotes] = useState(dummyNotes);
+  const [tags, setTags] = useState(dummyTags);
   // const [notes, setNotes] = useState([]);
-  const [input, setInput] = useState("");
+  // const [tags, setTags] = useState([]);
+  const [noteInputValue, setNoteInputValue] = useState("");
+  const [tagsInputValue, setTagsInputValue] = useState([]);
 
   const addNote = (text, tags) => {
     setNotes([{ id: uuidv4(), timestamp: moment(), text, tags }, ...notes]);
@@ -75,13 +83,17 @@ export default function App() {
 
   const handleSaveNote = (e) => {
     e.preventDefault();
-    setInput("");
-    // TODO: account for tags
-    addNote(input, []);
+    setNoteInputValue("");
+    setTagsInputValue([]);
+    addNote(noteInputValue, tagsInputValue);
   };
 
   const handleChangeNote = (e) => {
-    setInput(e.target.value);
+    setNoteInputValue(e.target.value);
+  };
+
+  const handleChangeTags = (e, newValue) => {
+    setTagsInputValue(newValue);
   };
 
   return (
@@ -95,18 +107,17 @@ export default function App() {
         SimpleNote
       </Typography>
       <form className={classes.form} onSubmit={handleSaveNote}>
-        <TextField
-          className={classes.input}
-          value={input}
-          onChange={handleChangeNote}
-          fullWidth
-          placeholder="Write something here..."
+        <NoteInput value={noteInputValue} onChange={handleChangeNote} />
+        <TagsInput
+          value={tagsInputValue}
+          onChange={handleChangeTags}
+          options={tags}
         />
         <Button
           type="submit"
           variant="contained"
           color="primary"
-          disabled={!input}
+          disabled={!noteInputValue}
         >
           Save
         </Button>

src/NoteInput.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+
+const useStyles = makeStyles((theme) => ({
+  input: {
+    marginBottom: theme.spacing(2),
+  },
+}));
+
+export default function NoteInput(props) {
+  const classes = useStyles();
+
+  return (
+    <TextField
+      className={classes.input}
+      value={props.value}
+      onChange={props.onChange}
+      fullWidth
+      placeholder="Write your note..."
+    />
+  );
+}

src/TagsInput.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import TextField from "@material-ui/core/TextField";
+
+const useStyles = makeStyles((theme) => ({
+  input: {
+    marginBottom: theme.spacing(3),
+  },
+}));
+
+export default function TagsInput(props) {
+  const classes = useStyles();
+  const [inputValue, setInputValue] = React.useState(""); // what's currently typed
+
+  return (
+    <Autocomplete
+      className={classes.input}
+      value={props.value}
+      onChange={props.onChange}
+      inputValue={inputValue}
+      onInputChange={(e, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      multiple
+      options={props.options}
+      renderInput={(params) => (
+        <TextField {...params} placeholder="Add some tags..." />
+      )}
+    />
+  );
+}

yarn.lock

@@ -1337,6 +1337,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.55":
+  version "4.0.0-alpha.55"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.55.tgz#82a850dc59654e04ee3a31be1b34eb3bf64d5585"
+  integrity sha512-mPHiS52Z1AT6NlWNp07xxTkoKGU3DZhoGdVtLKGy2+uMH5t4/UPtiZLRab7hR3hvuHvguxgV4tkBC9ww3xqUzA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.9.6"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"