New play - Keeper App

package.json

@@ -3,9 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
     "plop": "^3.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/common/home/Home.jsx

@@ -26,7 +26,7 @@ const Home = () => {
       tags: [],
       creator: "",
     });
-  }, [data, setSearchTerm, searchTerm]);
+  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
   return (
     <div>

src/index.js

@@ -2,7 +2,7 @@ import RouteDefs from "common/routing/RouteDefs";
 import { SearchContext } from "common/search/search-context";
 import "index.css";
 import React, { useState } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot } from 'react-dom/client';
 import reportWebVitals from "reportWebVitals";
 
 const Index = () => {

src/meta/play-meta.js

@@ -8,6 +8,7 @@ import {
   States,
   SocialCard,
   RandomMemeGenerator,
+  Keeper,
   ReactTodoApp,
   ExpandingCards,
   AnalogClock,
@@ -81,69 +82,64 @@ export const plays = [
     tags: "Recursion, Tree",
     github: "green-roots",
     featured: true,
-  },
-  {
-    id: "pl-counter",
-    name: "Counter",
-    description:
-      "A simple counter which increments the value upto a certain limit!",
-    component: () => {
-      return <CounterApp />;
-    },
-    path: "/plays/counter",
-    level: "Beginner",
-    tags: "JSX, State, Props",
-    github: "murtuzaalisurti"
-  },
-  {
-    id: "pl-states",
-    name: "States",
-    description: "States in Functional Components",
-    component: () => {
-      return <States />;
-    },
-    path: "/plays/states",
-    level: "Beginner",
-    tags: "Hooks,State,JSX",
-    github: "Abhishek-90",
-    cover: "",
-    blog: "https://abhishek-90.github.io/My-Portfolio/",
-  },
-  {
-    id: "pl-social-card",
-    name: "Social Card",
-    description:
-      "The Social Card helps you telling who you are using photo, name, and other social footprints.",
-    component: () => {
-      return <SocialCard />;
-    },
-    path: "/plays/social-card",
-    level: "Intermediate",
-    tags: "Form,Events,Complex State",
-    github: "atapas",
-    featured: true,
-    cover: "",
-    blog: "https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler",
-    video: "",
-  },
-  {
-    id: "pl-random-meme-generator",
-    name: "Random Meme Generator",
-    description:
-      "A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!",
-    component: () => {
-      return <RandomMemeGenerator />;
-    },
-    path: "/plays/random-meme-generator",
-    level: "Beginner",
-    tags: "JSX,Hooks,API,EventHandling",
-    github: "murtuzaalisurti",
-    featured: true,
-    cover: "",
-    blog: "",
-    video: "",
-  },
-  {
+  }, {
+    id: 'pl-counter', 
+    name: 'Counter', 
+    description: 'A simple counter which increments the value upto a certain limit!',
+    component: () => {return <CounterApp />},
+    path: '/plays/counter',
+    level: 'Beginner',
+    tags: 'JSX, State, Props',
+    github: 'murtuzaalisurti',
+    featured: true
+  }, {
+    id: 'pl-states', 
+    name: 'States', 
+    description: 'States in Functional Components',
+    component: () => {return <States />},
+    path: '/plays/states',
+    level: 'Beginner',
+    tags: 'Hooks,State,JSX',
+    github: 'Abhishek-90',
+    cover: '',
+    blog: 'https://abhishek-90.github.io/My-Portfolio/'
+  }, {
+    id: 'pl-social-card', 
+    name: 'Social Card', 
+    description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.',
+    component: () => {return <SocialCard />},
+    path: '/plays/social-card',
+    level: 'Intermediate',
+    tags: 'Form,Events,Complex State',
+    github: 'atapas',
+    cover: '',
+    blog: 'https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler',
+    video: ''
+  }, {
+    id: 'pl-random-meme-generator', 
+    name: 'Random Meme Generator', 
+    description: 'A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!',
+    component: () => {return <RandomMemeGenerator />},
+    path: '/plays/random-meme-generator',
+    level: 'Beginner',
+    tags: 'JSX,Hooks,API,EventHandling',
+    github: 'murtuzaalisurti',
+    cover: '',
+    blog: '',
+    video: ''
+  }, {
+    id: 'pl-keeper', 
+    name: 'Keeper', 
+    description: 'Keeper is the clone of google keep where we can save and delete our notes',
+    component: () => {return <Keeper />},
+    path: '/plays/keeper',
+    level: 'Intermediate',
+    tags: 'JSX,Hooks,ReactDOM',
+    github: 'Shivam-Katare',
+    cover: 'https://res.cloudinary.com/dbjmy6wdu/image/upload/v1651678725/keepicon_jsn5bh.png',
+    blog: '',
+    video: ''
+  }, {
     id: "pl-react-todo-app",
     name: "React Todo App",
     description:
@@ -159,8 +155,7 @@ export const plays = [
       "https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png",
     blog: "",
     video: "",
-  },
-  {
+  }, {
     id: "pl-expanding-cards",
     name: "Expanding-Cards",
     description:
@@ -176,8 +171,7 @@ export const plays = [
     cover: "",
     blog: "",
     video: "",
-  },
-  {
+  }, {
     id: "pl-analog-clock",
     name: "Analog-Clock",
     description: "A beautiful wall clock",

src/plays/index.js

@@ -9,7 +9,9 @@ export { default as CounterApp } from 'plays/counter/CounterApp';
 export { default as States } from 'plays/states/States';
 export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
+export { default as Keeper } from 'plays/keeper/Keeper';
 export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
 export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards';
 export { default as AnalogClock } from 'plays/analog-clock/AnalogClock';
+
 //add export here

src/plays/keeper/CreateArea.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { FaPlusCircle } from 'react-icons/fa';
+
+function CreateArea(props) {
+  const [note, setNote] = useState({
+    title: "",
+    content: ""
+  });
+  function handleChange(event) {
+    const { name, value } = event.target;
+    setNote(prevNote => {
+      return {
+        ...prevNote,
+        [name]: value
+      };
+    });
+  }
+  function submitNote(event) {
+    props.onAdd(note);
+    setNote({
+      title: "",
+      content: ""
+    });
+    event.preventDefault();
+  }
+  return (
+    <div>
+      <form className="create-note">
+        {(
+          <input
+            className="create-input"
+            name="title"
+            onChange={handleChange}
+            value={note.title}
+            placeholder="Title"
+          />
+        )
+        }
+        <textarea
+          className="create-text"
+          name="content"
+          onChange={handleChange}
+          value={note.content}
+          placeholder="Take a note..."
+        />
+        <button className="create-button" onClick={submitNote}>< FaPlusCircle /></button>
+      </form>
+    </div>
+  );
+}
+export default CreateArea;

src/plays/keeper/Header.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { FaMedapps } from 'react-icons/fa';
+function Header() {
+    return <>
+        <header className="head">
+        <h1 className="headsHeading"> <FaMedapps /> KEEPER </h1>  
+        </header>
+    </>
+}
+export default Header;

src/plays/keeper/Hooks/useLocalStorage.js

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+function useLocalStorage(key, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      // Get from local storage by key
+      const item = localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}
+export default useLocalStorage;