Merge pull request #1 from vivjamba/shoppinglist+fridge

Shoppinglist+fridge

src/App.js

@@ -1,5 +1,6 @@
 import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
-import Todo from "./pages/Todo/Todo";
+import Fridge from "./pages/Todo/FridgeList";
+import Shopping from "./pages/Todo/ShoppingList";
 import Login from "./pages/Login/Login";
 import Landing from "./pages/Landing/Landing";
 import { useGetUser } from "./hooks";
@@ -11,11 +12,14 @@ function App() {
   return (
     <BrowserRouter>
       <Switch>
-        <Route path="/todos">
-          {user ? <Todo user={user} dispatch={dispatch} /> : <Redirect to="/login" />}
+        <Route path="/fridge">
+          {user ? <Fridge user={user} dispatch={dispatch} /> : <Redirect to="/login" />}
+        </Route>
+        <Route path="/shoppinglist">
+           <Shopping user={user} dispatch={dispatch} /> 
         </Route>
         <Route path="/login">
-          {user ? <Redirect to="/todos" /> : <Login dispatch={dispatch}/>}
+          {user ? <Redirect to="/fridge" /> : <Login dispatch={dispatch}/>}
         </Route>
         <Route exact path="/">
           <Landing />
@@ -26,4 +30,39 @@ function App() {
   );
 }
 
+// import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
+// import Fridge from "./pages/Todo/FridgeList";
+// import Shopping from "./pages/Todo/ShoppingList";
+// import Login from "./pages/Login/Login";
+// import Landing from "./pages/Landing/Landing";
+// import { useGetUser } from "./hooks";
+
+// function App() {
+//   // eslint-disable-next-line
+//   const [{ user, isLoading, isError }, dispatch] = useGetUser();
+
+//   return (
+//     <BrowserRouter>
+//       <Switch>
+//         <Route path="/fridgelist">
+//           {user ? <Fridge user={user} dispatch={dispatch} /> : <Redirect to="/login" />}
+//         </Route>
+//         <Route path="/shoppinglist">
+//           {user ? <Shopping user={user} dispatch={dispatch} /> : <Redirect to="/login" />}
+//         </Route>
+//         <Route path="/login">
+//           {user ? <Redirect to="/shoppinglist" /> : <Login dispatch={dispatch}/>}
+//         </Route>
+//         <Route exact path="/">
+//           <Landing />
+//         </Route>
+//         <Redirect to="/" />
+//       </Switch>
+//     </BrowserRouter>
+//   );
+// }
+
+// export default App;
+
+
 export default App;

src/pages/Landing/Landing.js

@@ -5,7 +5,7 @@ const Landing = () => {
   const history = useHistory();
 
   const handleClick = () => {
-    history.push("/todos");
+    history.push("/fridge");
   };
 
   const links = [

src/pages/Todo/FridgeItem.js

@@ -0,0 +1,47 @@
+import api from "../../api/api";
+import { Server } from "../../utils/config";
+import { deleteButton } from "../icons";
+
+const FridgeItem = ({ item, setStale }) => {
+
+  const handleDelete = async (e, item) => {
+    console.log("Deleting Todo");
+    try {
+      await api.deleteDocument(Server.collectionID, item["$id"]);
+      setStale({ stale: true });
+    } catch (e) {
+      console.log("Error in deleting todo");
+    }
+  };
+
+  return (
+    <li className="flex justify-between items-center mt-4 px-4">
+      <div className="flex">
+        <div
+        //puts line through item if not bought
+          className={`capitalize ml-3 text-md font-medium ${
+            !item["isBought"] ? "line-through" : ""
+          }`}
+        >
+          {item["content"]}
+        </div>
+      </div>
+      <div
+        //puts line through item if not bought
+          className={`capitalize ml-3 text-md font-medium ${
+            !item["isBought"] ? "line-through" : ""
+          }`}
+        >
+          {item["boughtDate"]}
+        </div>
+      <button
+        onClick={(e) => handleDelete(e, item)}
+        className="focus:outline-none transition duration-75 ease-in-out transform hover:scale-125"
+      >
+        {deleteButton}
+      </button>
+    </li>
+  );
+};
+
+export default FridgeItem;

src/pages/Todo/FridgeList.js

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import api from "../../api/api";
+import { FetchState, useGetTodos } from "../../hooks";
+import { Server } from "../../utils/config";
+import Alert from "../Alert/Alert";
+import FridgeItem from "./FridgeItem";
+
+const Fridge = ({ user, dispatch }) => {
+  const [stale, setStale] = useState({ stale: false });
+  const [{ todos, isLoading, isError }] = useGetTodos(stale);
+  const [currentTodo, setCurrentTodo] = useState("");
+
+  const handleAddTodo = async (e) => {
+    e.preventDefault();
+    console.log("Adding Todo");
+    const data = {
+      content: currentTodo,
+      isBought: false,
+    };
+    console.log(data, user);
+    try {
+      await api.createDocument(
+        Server.collectionID,
+        data,
+        [`user:${user["$id"]}`],
+        [`user:${user["$id"]}`]
+      );
+      setStale({ stale: true });
+      setCurrentTodo("");
+    } catch (e) {
+      console.log("Error in adding todo");
+    }
+  };
+
+
+  const handleLogout = async (e) => {
+    dispatch({ type: FetchState.FETCH_INIT });
+    try {
+      await api.deleteCurrentSession();
+      dispatch({ type: FetchState.FETCH_SUCCESS, payload: null });
+    } catch (e) {
+      dispatch({ type: FetchState.FETCH_FAILURE });
+    }
+  }
+
+  return (
+    <>
+      <section className="container h-screen max-h-screen px-3 max-w-xl mx-auto flex flex-col">
+        {isError && <Alert color="red" message="Something went wrong..." />}
+        <div className="my-auto p-16 rounded-lg text-center">
+          <div className="font-bold text-3xl md:text-5xl lg:text-6xl">
+            📝 <br /> &nbsp; toTooooDoooos
+          </div>
+
+          <form onSubmit={handleAddTodo}>
+            <input
+              type="text"
+              className="w-full my-8 px-6 py-4 text-xl rounded-lg border-0 focus:ring-2 focus:ring-gray-800 transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110 hover:shadow-xl shadow-md"
+              placeholder="🤔   What to do today?"
+              value={currentTodo}
+              onChange={(e) => setCurrentTodo(e.target.value)}
+            ></input>
+          </form>
+
+          {isLoading && <h1> Loading .... </h1>}
+
+          <ul>
+            {todos.filter((item) => item["isBought"]).map((item) => (
+              <FridgeItem key={item["$id"]} item={item} setStale={setStale} />
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="absolute bottom-0 right-0 py-3 px-6 mr-8 mb-8">
+        <button onClick={handleLogout} className="mx-auto mt-4 py-3 px-12 font-semibold text-md rounded-lg shadow-md bg-white text-gray-900 border border-gray-900 hover:border-transparent hover:text-white hover:bg-gray-900 focus:outline-none">
+          Logout 👋
+        </button>
+      </section>
+    </>
+  );
+};
+
+export default Fridge;

src/pages/Todo/TodoItem.js → src/pages/Todo/ShoppingItem.js

@@ -5,7 +5,7 @@ import { deleteButton } from "../icons";
 const current = new Date();
 // const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
 
-const TodoItem = ({ item, setStale }) => {
+const ShoppingItem = ({ item, setStale }) => {
   const handleComplete = async (e, item) => {
     console.log("Marking Todo as complete");
     let data = {
@@ -66,4 +66,4 @@ const TodoItem = ({ item, setStale }) => {
   );
 };
 
-export default TodoItem;
+export default ShoppingItem;

src/pages/Todo/Todo.js → src/pages/Todo/ShoppingList.js

@@ -3,9 +3,9 @@ import api from "../../api/api";
 import { FetchState, useGetTodos } from "../../hooks";
 import { Server } from "../../utils/config";
 import Alert from "../Alert/Alert";
-import TodoItem from "./TodoItem";
+import ShoppingItem from "./ShoppingItem";
 
-const Todo = ({ user, dispatch }) => {
+const Shopping = ({ user, dispatch }) => {
   const [stale, setStale] = useState({ stale: false });
   const [{ todos, isLoading, isError }] = useGetTodos(stale);
   const [currentTodo, setCurrentTodo] = useState("");
@@ -56,7 +56,7 @@ const Todo = ({ user, dispatch }) => {
             <input
               type="text"
               className="w-full my-8 px-6 py-4 text-xl rounded-lg border-0 focus:ring-2 focus:ring-gray-800 transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110 hover:shadow-xl shadow-md"
-              placeholder="🤔   What to do today?"
+              placeholder="🤔   What to buy today?"
               value={currentTodo}
               onChange={(e) => setCurrentTodo(e.target.value)}
             ></input>
@@ -66,7 +66,7 @@ const Todo = ({ user, dispatch }) => {
 
           <ul>
             {todos.map((item) => (
-              <TodoItem key={item["$id"]} item={item} setStale={setStale} />
+              <ShoppingItem key={item["$id"]} item={item} setStale={setStale} />
             ))}
           </ul>
         </div>
@@ -81,4 +81,4 @@ const Todo = ({ user, dispatch }) => {
   );
 };
 
-export default Todo;
+export default Shopping;