{"id":19598524,"url":"https://github.com/kaplanh/task-traker","last_synced_at":"2025-02-26T15:16:13.734Z","repository":{"id":222906967,"uuid":"758686654","full_name":"kaplanh/Task-Traker","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-16T22:16:11.000Z","size":899,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-09T07:47:47.222Z","etag":null,"topics":["conditional-rendering","localstorage","props-drilling","react","react-event-handlers","useeffect-hook","usestate-hook"],"latest_commit_sha":null,"homepage":"https://task-traker-v1.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaplanh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-16T21:05:11.000Z","updated_at":"2024-02-16T22:18:42.000Z","dependencies_parsed_at":"2024-02-16T23:23:08.685Z","dependency_job_id":"9ce6f194-1dbd-4c3a-a7b8-9ffdbbae7b4a","html_url":"https://github.com/kaplanh/Task-Traker","commit_stats":null,"previous_names":["kaplanh/task-traker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTask-Traker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTask-Traker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTask-Traker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FTask-Traker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/Task-Traker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240876855,"owners_count":19871903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conditional-rendering","localstorage","props-drilling","react","react-event-handlers","useeffect-hook","usestate-hook"],"created_at":"2024-11-11T09:06:34.879Z","updated_at":"2025-02-26T15:16:13.713Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","readme":"# Task Traker\n\n[:point_right: Click here to see on browser](https://task-traker-v1.netlify.app/)\n\n![tasktraker](https://github.com/kaplanh/Task-Traker/assets/101884444/bdda2fdc-43e9-447f-aac9-9fb231901ad3)\n\n\n---\n\n| **What's used in this app ?**                         | **How use third party libraries**          | **Author**                                                     |\n| ----------------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------- |\n| [useEfect() Hook](https://react.dev/learn#using-hooks)|                                            | [Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/) |\n| [useState() Hook](https://react.dev/learn#using-hooks)|                                            | [Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/)                    |\n| [LocalStorage](https://www.w3schools.com/jsref/prop_win_localstorage.asp)|                         |                    |\n| [react-events](https://react.dev/learn#responding-to-events)|                                      |                    |\n| [React-Conditional rendering](https://react.dev/learn#conditional-rendering) |                     |                    |\n| [React-icons](https://react-icons.github.io/react-icons/)| npm i / yarn add react-icons               |                 |\n| [props-drilling](https://react.dev/learn#sharing-data-between-components)|                            |                 |\n| [Semantic-Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) |             |                 |\n| Deploy with [Netlify](https://app.netlify.com/teams/kaplanh/sites) |                                 |                 |\n\n---\n\n## How To Run This Project 🚀\n\n\u003cbr/\u003e\n\n### 💻 Install React 👇\n\n```bash\nyarn create react-app .  or npx create-react-app .\n```\n\n### 💻 Install Sass 👇\n\n```bash\nyarn add sass  or npm i sass\n```\n\n## 🔴 Delete these files and delete the imports👇\n\n    - App.test.js\n    - reportWebVitals.js\n    - setupTests.js\n    - favicon.ico\n    - logo192.png\n    - logo512.png\n    - manifest.json\n    - robots.txt\n\n### 💻 Start the project 👇\n\n```bash\nyarn start or npm start\n```\n\nOR\n\n-   \u003cstrong\u003eClone the Repo\u003c/strong\u003e\n\n    ```sh\n    git clone\n    ```\n\n-   \u003cstrong\u003eInstall NPM packages\u003c/strong\u003e\n\n    ```sh\n    npm install or yarn\n    ```\n\n-   \u003cstrong\u003eRun the project\u003c/strong\u003e\n\n    ```sh\n    npm start or yarn start\n    ```\n\n-   \u003cstrong\u003eOpen the project on your browser\u003c/strong\u003e\n\n    ```sh\n    http://localhost:3000/\n    ```\n\n-   ### \u003cstrong\u003eEnjoy! 🎉\u003c/strong\u003e\n\n---\n\n## Project Skeleton\n\n```\n Task Traker (folder)\n|\n|----public (folder)\n│     └── index.html\n|----src (folder)\n|    |--- components (folder)\n│    │       ├── AddTaskForm.jsx\n│    │       ├── Header.jsx\n│    │       ├── ShowTasks.jsx\n│    │\n|    |--- helpers (folder)\n|    |       |── StartData.jsx\n│    │\n│    |--- pages (folder)\n|    |      ├── Home.jsx\n|    |\n│    ├--- App.js\n│    │--- App.css\n│    |--- index.js\n│\n│\n|-- .gitignore\n|── package-lock.json\n├── package.json\n|── README.md\n|── yarn.lock\n\n\n```\n\n---\n\n### At the end of the project, the following topics are to be covered;\n\n- useEffect() \u0026 useState() \u0026 LocalStorage \u0026 Conditional rendering \n\n ```jsx\n     import React from \"react\";\n        import Header from \"../components/Header\";\n        import ShowTasks from \"../components/ShowTasks\";\n        import { useState, useEffect } from \"react\";\n        // import data from '../helper/starterData';\n\n        const Home = () =\u003e {\n            const [tasks, setTasks] = useState(\n                JSON.parse(localStorage.getItem(\"tasks\")) || []\n            );\n\n            useEffect(() =\u003e {\n                localStorage.setItem(\"tasks\", JSON.stringify(tasks));\n            }, [tasks]);\n\n            // console.log(tasks);\n            return (\n                \u003cdiv className=\"container\"\u003e\n                    \u003cHeader tasks={tasks} setTasks={setTasks} /\u003e\n                    {tasks.length \u003e 0 ? (\n                        \u003cShowTasks tasks={tasks} setTasks={setTasks} /\u003e\n                    ) : (\n                        \u003cp className=\"text-center\"\u003eNO TASK TO SHOW\u003c/p\u003e\n                    )}\n                \u003c/div\u003e\n                \n            );\n        };\n\n        export default Home;\n ```\n\n- conditional rendering \u0026 toggle\n\n    ```jsx\n        import AddTaskForm from \"./AddTaskForm\";\n        import { useState } from \"react\";\n\n        const Header = ({ tasks, setTasks }) =\u003e {\n            const [show, setShow] = useState(false);\n            const [btnStyle, setBtnStyle] = useState({\n                name: \"SHOW ADD TASK BAR\",\n                bgColor: \"purple\",\n            });\n\n            //! React, default olarak state'leri hemen degistirmeyebilir.\n            //! Ekstra render'lari azaltmak icin state'leri toplu (batch) bir sekilde gunceller.\n            //! Bir event handler icerisindeki ardasik state'ler event bitiminde toplu bir\n            //! sekilde guncellenmis olur.State'lerin guncelenmesi gelis sirasina gorere yapilir.\n            //! Ayni event icerisinde birbirine bagli state'leri kullanirken buna dikkat etmek gerkir.\n\n            //? https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates\n\n            const handleShow = () =\u003e {\n                if (show) {\n                    setBtnStyle({\n                        name: \"SHOW ADD TASK BAR\",\n                        bgColor: \"purple\",\n                    });\n                } else {\n                    setBtnStyle({\n                        name: \"CLOSE ADD TASK BAR\",\n                        bgColor: \"red\",\n                    });\n                }\n                setShow(!show);\n            };\n            // console.log(show);\n\n            return (\n                \u003cheader className=\"header\"\u003e\n                    \u003ch1\u003eTASK TRACKER\u003c/h1\u003e\n                    \u003cbutton\n                        onClick={handleShow}\n                        className=\"btn\"\n                        style={{ backgroundColor: btnStyle.bgColor }}\n                    \u003e\n                        {btnStyle.name}\n                    \u003c/button\u003e\n                    {show \u0026\u0026 \u003cAddTaskForm tasks={tasks} setTasks={setTasks} /\u003e}\n                \u003c/header\u003e\n            );\n        };\n\n        export default Header;\n    ```\n\n-  with filter deleting\n\n    ```jsx\n            import { FaTimesCircle } from \"react-icons/fa\";\n\n            const ShowTasks = ({ tasks, setTasks }) =\u003e {\n                console.log(tasks);\n                const toggleDone = (id) =\u003e {\n                    setTasks(\n                        tasks.map((task) =\u003e\n                            task.id === id ? { ...task, isDone: !task.isDone } : task\n                        )\n                    );\n                };\n\n                const deleteTask = (id) =\u003e {\n                    setTasks(tasks.filter((task) =\u003e task.id !== id));\n                };\n                return (\n                    \u003cdiv\u003e\n                        {tasks.map((task) =\u003e {\n                            const { id, task: text, day, isDone } = task;\n                            return (\n                                \u003cdiv\n                                    key={id}\n                                    className={`task ${isDone ? \"done\" : \"\"}`}\n                                    onDoubleClick={() =\u003e toggleDone(id)}\n                                \u003e\n                                    \u003ch3\u003e\n                                        {text}\n                                        \u003cFaTimesCircle\n                                            style={{ color: \"red\" }}\n                                            onClick={() =\u003e deleteTask(id)}\n                                        /\u003e\n                                    \u003c/h3\u003e\n                                    \u003ch6\u003e{day}\u003c/h6\u003e\n                                \u003c/div\u003e\n                            );\n                        })}\n                    \u003c/div\u003e\n                );\n            };\n\n            export default ShowTasks;\n    ```\n\n-   Semantic Commit Messages\n    See how a minor change to your commit message style can make you a better programmer.\n\n    Format: \u003ctype\u003e(\u003cscope\u003e): \u003csubject\u003e\n\n    \u003cscope\u003e is optional\n\n    -   Example\n\n    ```\n                feat: add hat wobble\n        ^--^  ^------------^\n        |     |\n        |     +-\u003e Summary in present tense.\n        |\n        +-------\u003e Type: chore, docs, feat, fix, refactor, style, or test.\n    ```\n\n- More Examples:\n    -   `feat`: (new feature for the user, not a new feature for build script)\n    -   `fix`: (bug fix for the user, not a fix to a build script)\n    -   `docs`: (changes to the documentation)\n    -   `style`: (formatting, missing semi colons, etc; no production code change)\n    -   `refactor`: (refactoring production code, eg. renaming a variable)\n    -   `test`: (adding missing tests, refactoring tests; no production code change)\n    -   `chore`: (updating grunt tasks etc; no production code change)\n\n---\n\n## Feedback and Collaboration\n\nI value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.\nI'm always open to collaboration and welcome the opportunity to work on exciting projects together.\nThank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!\n\n\u003cp align=\"center\"\u003e ⌛\u003cstrong\u003e Happy Coding \u003c/strong\u003e ✍ \u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Ftask-traker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Ftask-traker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Ftask-traker/lists"}