Redux implementations

=7.2.0

@@ -0,0 +1,8 @@
++ @babel/core@7.21.8
+updated 1 package and audited 1935 packages in 14.836s
+
+252 packages are looking for funding
+  run `npm fund` for details
+
+found 44 vulnerabilities (4 low, 16 moderate, 19 high, 5 critical)
+  run `npm audit fix` to fix them, or `npm audit` for details

package.json

@@ -3,16 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/core": "^7.21.8",
     "@capillarytech/cap-ui-library": "4.27.17",
     "@material-ui/core": "^4.12.4",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@primer/octicons-react": "^17.3.0",
+    "@reduxjs/toolkit": "^1.9.5",
+    "antd": "^3.13.2",
+    "axios": "^0.18.1",
+    "chalk": "^2.4.1",
     "nanoid": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
+    "react_redux": "^1.2.1",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -38,5 +45,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

src/App.css

@@ -118,13 +118,18 @@ body {
   font-size: 16px;
   margin-right: 10px;
   cursor: pointer;
+
 }
 
 .filter-button:hover {
   background-color: #c4c121;
   color: rgb(0, 0, 0);
 }
 
+.filter-button:active {
+  background-color: #5a21c4;
+  color: rgb(255, 255, 255);
+}
 .btn:hover {
   background-color: #4cafad;
   color: rgb(255, 255, 255);
@@ -214,4 +219,103 @@ body {
 
 .searchfilter {
   display: none;
-}
+}
+
+.profile-dropdown {
+  position:sticky;
+  display: inline-block;
+}
+
+.profile-dropdown figure {
+  display: inline-block;
+  margin: 5px;
+  vertical-align: middle;
+}
+
+.profile-dropdown:hover .profile-list {
+  display: block;
+}
+
+.profile-dropdown button {
+  background-color: cadetblue;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 4px;
+  color: rgb(250, 246, 246);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.profile-dropdown button:hover,
+.profile-dropdown button:focus {
+  background-color: #f2f2f2;
+  color: black;
+}
+
+.profile-list {
+  position: relative;
+  left: 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  padding: 0;
+  margin: 0;
+  right: 0;
+  top: 100%;
+  transform: translateX(0%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+}
+
+.profile-list li {
+  margin-right: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.profile-list li:hover {
+  background-color: #f2f2f2;
+}
+
+.profile-list li.active {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.profile-list button {
+  background-color: cadetblue;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 4px;
+  color: rgb(250, 246, 246);
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  text-align: center;
+  display: block;
+  width: 100%;
+}
+
+.profile-list button:hover,
+.profile-list button:focus {
+  background-color: #f2f2f2;
+  color: black;
+}
+
+.profile-dropdown figure.active {
+  background-color: #007bff;
+  color: #fff;
+}

src/App.js

@@ -6,13 +6,21 @@ import Todo from "./components/Todo"; //in-prog
 import { nanoid } from "nanoid";
 import { useState } from "react";
 import SearchBox from "./components/searchBox";
-import './App.css';
-import imgsrc from './assets/logo.svg'
+import Bank from "./components/Bank";
+import Profile from "./components/Profile";
+import Dropdown from "./components/dropdown";
 
+import './App.css';
+import imgsrc from './assets/logo.svg';
 //props=data=[]
 
 function App(props) {
+  const [pidList,setPidList]=useState(props.profile);
+
   const [filter, setFilter] = useState('All');
+  const [prof, setProf] = useState(pidList[0]);
+  const [showlist,setShowlist]=useState(props.tasks);
+  const [tasks,settsaks]=useState(props.tasks);
   const FILTER_MAP = {
     All: () => true,
     Active: (task) => !task.completed,
@@ -27,10 +35,16 @@ function App(props) {
       setFilter={setFilter}
     />
   ));
-  const [tasks, setTasks] = useState(props.tasks);
+  const PROFILE_MAP = {
+    Default: () => true,
+    Basic: (task) => task.pid===prof,
+  };
+console.log(`prof now is ${prof}`);
+
 
   function toggleTaskCompleted(id) {
-    const updatedTasks = tasks.map((task) => {
+    console.log(`completed: ${id}`)
+    const updatedTasks = showlist.map((task) => {
       // if this task has the same ID as the edited task
       if (id === task.id) {
         // use object spread to make a new object
@@ -39,12 +53,14 @@ function App(props) {
       }
       return task;
     });
-    setTasks(updatedTasks);
+    setShowlist(updatedTasks);
   }
-  var taskList = tasks
+  var taskList = showlist
     .filter(FILTER_MAP[filter])
+    .filter(PROFILE_MAP['Basic'])
     .map((task) => (
       <Todo
+        pid={prof}
         id={task.id}
         name={task.name}
         completed={task.completed}
@@ -62,43 +78,47 @@ function App(props) {
     const filteredTasks = tasks.filter((task) =>
       task.name.toLowerCase().includes(query.toLowerCase())
     );
-    setTasks(filteredTasks);
+    setShowlist(filteredTasks);
   }
 
-
   function addTask(name, date, descript) {
-    const newTask = { id: nanoid(), name, deadline: date, description: descript, completed: false };
-    setTasks([...tasks, newTask]);
+    const newTask = { id: nanoid(), name, deadline: date, description: descript,  pid: prof,completed: false };
+    console.log(showlist);
+    setShowlist([...showlist, newTask]);
   }
   function deleteTask(id) {
     const remainingTasks = tasks.filter((task) => id !== task.id);
-    setTasks(remainingTasks);
+    setShowlist(remainingTasks);
   }
   function editTask(id, newName, newDeadline) {
+    console.log(`editTask: ${id}`)
     const editedTaskList = tasks.map((task) => {
       // if this task has the same ID as the edited task
       if (id === task.id) {
         //
-        return { ...task, name: newName, deadline: new Date(newDeadline) }
+        return { ...task, name: newName, deadline: newDeadline }
       }
       return task;
     });
-    setTasks(editedTaskList);
+    setShowlist(editedTaskList);
   }
 
 
   const tasksNoun = taskList.length !== 1 ? 'tasks' : 'task';
   const headingText = `${taskList.length} ${tasksNoun} remaining`;
 
-
+console.log(showlist);
   return (
     <div className="container">
+      <Dropdown profiles={pidList} setProf={setProf}/>
+      <Profile pidList={pidList}/>
       <figure align="center">
         <img src={imgsrc} alt="Logo"></img>
         <figcaption>ToDo App</figcaption>
       </figure>
+      <Bank />
       <div><SearchBox handleSearch={handleSearch} /></div>
-      <Form className="task-item" addTask={addTask} />
+      <Form className="task-item" addTask={addTask} pid={prof}/>
       <br />
       <div className="filter-buttons">
         {filterList}

src/components/Bank.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useSelector, useDispatch } from 'react-redux';
+import {actionCreators } from '../state/index';
+
+function Bank(props) {
+  const dispatch = useDispatch();
+  const data = useSelector(state => state.amount);
+  console.log(data)
+
+  return (
+   <><button className="mocke" onClick={()=>{dispatch(actionCreators.depositMoney(10))}}>Deposi 10</button>
+</>
+  );
+}
+
+export default Bank;