{"id":25781783,"url":"https://github.com/tobisamcode/react-blog","last_synced_at":"2025-02-27T07:32:07.533Z","repository":{"id":52492895,"uuid":"520986728","full_name":"tobisamcode/react-blog","owner":"tobisamcode","description":null,"archived":false,"fork":false,"pushed_at":"2022-08-12T00:24:03.000Z","size":549,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-10T00:56:13.691Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/tobisamcode.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}},"created_at":"2022-08-03T18:13:46.000Z","updated_at":"2022-08-18T15:42:37.000Z","dependencies_parsed_at":"2022-08-13T02:00:51.967Z","dependency_job_id":null,"html_url":"https://github.com/tobisamcode/react-blog","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobisamcode%2Freact-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobisamcode%2Freact-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobisamcode%2Freact-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobisamcode%2Freact-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobisamcode","download_url":"https://codeload.github.com/tobisamcode/react-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240993712,"owners_count":19890418,"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":[],"created_at":"2025-02-27T07:30:38.179Z","updated_at":"2025-02-27T07:32:07.519Z","avatar_url":"https://github.com/tobisamcode.png","language":"JavaScript","readme":"## lessons learnt\n\n- React Custom Hooks with Axios Async useEffect\n\n```javascript import axios from \"axios\";\nimport { useEffect, useState } from \"react\";\n\nfunction useAxiosFetch(dataUrl) {\n  const [data, setData] = useState([]);\n  const [fetchError, setFetchError] = useState(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  useEffect(() =\u003e {\n    let isMounted = true;\n    const source = axios.CancelToken.source(); // cancellation token for axios\n\n    const fetchData = async (url) =\u003e {\n      setIsLoading(true);\n      try {\n        const response = await axios.get(url, {\n          cancelToken: source.token\n        });\n\n        if (isMounted) {\n          setData(response.data);\n          setFetchError(null);\n        }\n      } catch (err) {\n        if (isMounted) {\n          setFetchError(err.message);\n          setData([]);\n        }\n      } finally {\n        isMounted \u0026\u0026 setTimeout(() =\u003e setIsLoading(false), 2000);\n      }\n    };\n\n    fetchData(dataUrl);\n\n    const cleanUp = () =\u003e {\n      console.log(\"clean up function\");\n      isMounted = false;\n      source.cancel();\n    };\n\n    return cleanUp;\n  });\n\n  return { data, fetchError, isLoading };\n}\n\nexport default useAxiosFetch;\n```\n\n## watch json server\n\n1. Firstly, run this command to globally install json-server\n   `sudo npm install -g json-server`\n2. Move to your local folder(like my-app) and run this command\n   `npm install json-server`\n3. Open a new Terminal in the same folder\n   `json-server --watch db.json --port 3004 `\n\n## Display blogs if thery exist and if not display none\n\n```javascript\nconst Home = ({ posts, fetchError, isLoading }) =\u003e {\n  return (\n    \u003cmain className=\"Home\"\u003e\n      {\" \"}\n      {posts.length ? (\n        \u003cFeed posts={posts} /\u003e\n      ) : (\n        \u003cp style={{ marginTop: \"2rem\" }}\u003eNo posts to display\u003c/p\u003e\n      )}{\" \"}\n    \u003c/main\u003e\n  );\n};\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobisamcode%2Freact-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobisamcode%2Freact-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobisamcode%2Freact-blog/lists"}