Initial commit

sol-oliveira · Apr 11, 2021 · 5e92cd2 · 5e92cd2
1 parent 980220c
commit 5e92cd2
Show file tree

Hide file tree

Showing 12 changed files with 446 additions and 0 deletions.
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop  HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react",
+  "version": "1.0.0",
+  "description": "React Kanban",
+  "keywords": [
+    "react",
+    "starter"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "prop-types": "15.7.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0",
+    "usestate": "1.1.3"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,77 @@
+import "./styles.css";
+import React, { useState } from "react";
+import NavBar from "./components/NavBar/NavBar";
+import TaskList from "./components/TaskList/TaskList";
+
+let idAcc = 0;
+
+const generateId = () => {
+  idAcc = idAcc + 1;
+  return idAcc;
+};
+
+export default function App() {
+  const [tasks, setTasks] = useState([]);
+
+  const addTask = (title, state) => {
+    const newTask = {
+      id: generateId(),
+      title,
+      state
+    };
+    setTasks((existingTasks) => {
+      return [...existingTasks, newTask];
+    });
+  };
+
+  const updateTask = (id, title, state) => {
+    console.log("Update tasks sendo chamado dentro de APP");
+    setTasks((existingTasks) => {
+      return existingTasks.map((task) => {
+        if (task.id === id) {
+          return { ...task, title, state };
+        } else {
+          return task;
+        }
+      });
+    });
+  };
+
+  const deleteTask = (id) => {
+    setTasks((exitingTasks) => {
+      return exitingTasks.filter((task) => task.id !== id);
+    });
+  };
+
+  return (
+    <div className="App">
+      <NavBar />
+      <div className="container">
+        <TaskList
+          title="Pendente"
+          taskState="Pendente"
+          onAddTask={addTask}
+          tasks={tasks.filter((t) => t.state === "Pendente")}
+          onTaskUpdate={updateTask}
+          onDeleteTask={deleteTask}
+        />
+        <TaskList
+          title="Fazendo"
+          taskState="Fazendo"
+          onAddTask={addTask}
+          tasks={tasks.filter((t) => t.state === "Fazendo")}
+          onTaskUpdate={updateTask}
+          onDeleteTask={deleteTask}
+        />
+        <TaskList
+          title="Completa"
+          taskState="Completa"
+          onAddTask={addTask}
+          tasks={tasks.filter((t) => t.state === "Completa")}
+          onTaskUpdate={updateTask}
+          onDeleteTask={deleteTask}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js
@@ -0,0 +1,10 @@
+import React from "react";
+import "./navbar.css";
+
+export default function NavBar() {
+  return (
+    <nav className="navbar">
+      <span>React Kanban</span>
+    </nav>
+  );
+}
diff --git a/src/components/NavBar/navbar.css b/src/components/NavBar/navbar.css
@@ -0,0 +1,7 @@
+.navbar {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 8px;
+  color: white;
+  font-weight: bold;
+}
diff --git a/src/components/TaskItem/TaskItem.js b/src/components/TaskItem/TaskItem.js
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import "./task-item.css";
+
+export default function TaskItem({
+  id,
+  title,
+  taskState,
+  onTaskUpdate,
+  onDeleteTask
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editableTitle, setEditableTitle] = useState(title);
+
+  const onTitleChange = (event) => {
+    const newTitle = event.target.value;
+    setEditableTitle(newTitle);
+    onTaskUpdate(id, newTitle, taskState);
+  };
+
+  const onKeyPress = (event) => {
+    if (event.key === "Enter") {
+      setIsEditing(false);
+      if (editableTitle.length === 0) {
+        onDeleteTask(id);
+      }
+    }
+  };
+
+  const onTaskStateChange = (event) => {
+    onTaskUpdate(id, title, event.target.value);
+  };
+
+  if (isEditing) {
+    return (
+      <div className="task-item">
+        <input
+          type="text"
+          value={editableTitle}
+          onChange={onTitleChange}
+          onKeyPress={onKeyPress}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className="task-item">
+        <div onClick={(e) => setIsEditing(true)}>{editableTitle}</div>
+        <select onChange={onTaskStateChange} value={taskState}>
+          <option value="Pendente">Pendente</option>
+          <option value="Fazendo">Fazendo</option>
+          <option value="Completa">Completa</option>
+        </select>
+      </div>
+    );
+  }
+}
+
+TaskItem.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  taskState: PropTypes.string.isRequired,
+  onTaskUpdate: PropTypes.func.isRequired,
+  onDeleteTask: PropTypes.func.isRequired
+};
diff --git a/src/components/TaskItem/task-item.css b/src/components/TaskItem/task-item.css
@@ -0,0 +1,24 @@
+.task-item {
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
+  cursor: pointer;
+  margin-bottom: 8px;
+  width: 100%;
+  padding: 8px 4px;
+  color: #222;
+  font-size: 14px;
+}
+
+.task-item input[type="text"] {
+  border: none;
+  font-size: 14px;
+  display: block;
+  width: 100%;
+}
+
+.task-item select {
+  display: block;
+  width: 100%;
+  margin-top: 8px;
+}
diff --git a/src/components/TaskList/TaskList.js b/src/components/TaskList/TaskList.js
@@ -0,0 +1,50 @@
+import React from "react";
+import "./task-list.css";
+import PropTypes from "prop-types";
+
+import TaskItem from "../TaskItem/TaskItem";
+
+export default function TaskList({
+  title,
+  taskState,
+  onAddTask,
+  tasks,
+  onTaskUpdate,
+  onDeleteTask
+}) {
+  const addTask = () => {
+    onAddTask("Nova Tarefa", taskState);
+  };
+
+  return (
+    <div className="tasklist">
+      <div className="title">{title}</div>
+      <div className="content">
+        {tasks.map((task) => {
+          return (
+            <TaskItem
+              key={task.id}
+              id={task.id}
+              title={task.title}
+              taskState={task.state}
+              onTaskUpdate={onTaskUpdate}
+              onDeleteTask={onDeleteTask}
+            />
+          );
+        })}
+        {tasks.length === 0 && <div className="empty-list">Lista Vazia</div>}
+        <button onClick={addTask} className="btn">
+          Adicionar Tarefa
+        </button>
+      </div>
+    </div>
+  );
+}
+
+TaskList.propTypes = {
+  title: PropTypes.string.isRequired,
+  onAddTask: PropTypes.func.isRequired,
+  tasks: PropTypes.array.isRequired,
+  onTaskUpdate: PropTypes.func.isRequired,
+  onDeleteTask: PropTypes.func.isRequired
+};
diff --git a/src/components/TaskList/task-list.css b/src/components/TaskList/task-list.css
@@ -0,0 +1,49 @@
+.tasklist {
+  padding: 8px;
+  background-color: #5797b9;
+  border-radius: 2px;
+}
+
+.tasklist .title {
+  padding: 4px;
+  font-weight: bold;
+  background-color: rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.tasklist .content {
+  padding: 16px 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.tasklist .content .empty-list {
+  text-align: center;
+  border: 1px dashed white;
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.tasklist .btn {
+  margin-top: 8px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  color: white;
+  background: #00b8d4;
+  transition: background-color 0.3s;
+}
+
+.tasklist .btn:hover {
+  background-color: #0091a8;
+  cursor: pointer;
+}
+
+.tasklist .btn img {
+  width: 15px;
+  height: 15px;
+  margin-right: 4px;
+}