{"id":20401175,"url":"https://github.com/sohanemon/genius-car-client","last_synced_at":"2026-05-18T15:37:22.734Z","repository":{"id":62729120,"uuid":"562056339","full_name":"sohanemon/genius-car-client","owner":"sohanemon","description":"readme: axios, react-hook-form, promise handling","archived":false,"fork":false,"pushed_at":"2026-05-16T07:46:29.000Z","size":29819,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-05-16T09:47:18.478Z","etag":null,"topics":["axios","promise","react","react-hook-form","react-hooks","swiper"],"latest_commit_sha":null,"homepage":"https://ultra-genius-car.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/sohanemon.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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-11-05T06:54:05.000Z","updated_at":"2022-12-30T14:53:26.000Z","dependencies_parsed_at":"2023-01-22T15:46:03.002Z","dependency_job_id":null,"html_url":"https://github.com/sohanemon/genius-car-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sohanemon/genius-car-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fgenius-car-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fgenius-car-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fgenius-car-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fgenius-car-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohanemon","download_url":"https://codeload.github.com/sohanemon/genius-car-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohanemon%2Fgenius-car-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33183249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["axios","promise","react","react-hook-form","react-hooks","swiper"],"created_at":"2024-11-15T04:48:13.661Z","updated_at":"2026-05-18T15:37:22.709Z","avatar_url":"https://github.com/sohanemon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Initial setup\n\n```sh\ncd src\nrm App.css\nmkdir components contexts hooks pages layouts routes\ntouch layouts/main.jsx\ntouch routes/router.jsx\n```\n\n## Awesome navItems mapping\n\n```js\nconst navItems = [\n  \u003cLink to='/'\u003eHome\u003c/Link\u003e,\n  \u003ca href='#about'\u003eAbout\u003c/a\u003e,\n  \u003ca href='#services'\u003eservices\u003c/a\u003e,\n  \u003cLink to={\"/orders\"}\u003eOrders\u003c/Link\u003e,\n];\n```\n\n## Disable next button on swiper\n\n- to re-render create a state\n\n```js\nconst [index, setIndex] = useState(0);\nconst swipe = useSwiper();\nswipe.on(\"slideChange\", () =\u003e {\n  setIndex(swipe.realIndex);\n});\n```\n\n- now apply as follow\n\n```js\n\u003cBsArrowLeft\n  className={`${\n    index === 0 ? \"cursor-not-allowed bg-black/50\" : \"bg-red-600\"\n  } text-xl text-white h-12 w-12 p-3 rounded-full`}\n/\u003e\n\u003cBsArrowRight\n    className={`${\n    index === banners.length - 1\n        ? \"cursor-not-allowed bg-black/50\"\n        : \"bg-red-600\"\n    } text-xl text-white h-12 w-12 p-3 rounded-full`}\n/\u003e\n```\n\n## import image with require\n\n- use default parameter\n\n```js\nconst image = require(\"../assets/images/location/Group 32.svg\").default;\n```\n\n\u003e as being a part of es6 `require()` returns a module. As it is not a normal javascript but bundled by webpack, we will found our output at a folder like `/static/*/*.*`. Which is actually at `require().default`\n\n\u003e remember sometimes `.default` is not required. `require()` itself returns a static location\n\n## using react-hook-form\n\n- prebuilt component\n\n```js\nfunction InputField({ register, title }) {\n  return (\n    \u003cdiv className='flex flex-col gap-4'\u003e\n      \u003clabel\n        className='text-lg font-semibold text-gray-700 capitalize'\n        htmlFor={title}\n      \u003e\n        {title}\n      \u003c/label\u003e\n      \u003cinput\n        className='border-2 placeholder:font-semibold py-4 px-6 rounded-lg outline-gray-500'\n        type={title}\n        id={title}\n        {...register(title)}\n        placeholder={`Your ${title}`}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n- and pass as follow\n\n```js\n\u003cInputField register={register} title='email' /\u003e\n          \u003cInputField register={register} title='password' /\u003e\n```\n\n### to use default values\n\n- create a default value\n\n```js\nlet defaultValues = {};\ndefaultValues.firstName = \"Sohan\";\ndefaultValues.lastName = \"Emon\";\nreset({ ...defaultValues });\n```\n\n- or start as following\n\n```js\nconst { reset, register } = useForm();\n\nuseEffect(() =\u003e {\n  reset({ firstName: \"sohan\", lastName: \"emon\" });\n}, []);\n\nreturn (\n  \u003cdiv className='App'\u003e\n    \u003cinput {...register(\"firstName\")} placeholder='First Name' /\u003e\n    \u003cinput {...register(\"lastName\")} placeholder='Last Name' /\u003e\n  \u003c/div\u003e\n);\n```\n\n## Axios\n\n\u003e JSON.stringify is not required with axios\n\n- passing to body `axios.post(uri,data)`\n\n```js\naxios.post(`${process.env.REACT_APP_host}/orders`, { dev: \"emon\" });\n```\n\n- passing to header `axios.get(uri,config)`\n\n```js\naxios.get(`${process.env.REACT_APP_host}/orders`, {\n  headers: { name: \"emon\" },\n});\n```\n\n- for passing both header and body `axios.post(uri, data, config)`\n\n```js\naxios.get(\n  `${process.env.REACT_APP_host}/orders/?email=${user?.email}`,\n  { dev: \"emon\" },\n  {\n    headers: { name: \"emon\" },\n  }\n);\n```\n### Axios instance 🚀🚀🚀\n- create an instance\n```js\nexport const client = axios.create({\n  baseURL: process.env.REACT_APP_server,\n  timeout: 5000,\n  headers: { authorization: \"Bearer\" },\n});\n```\n- now use from any where\n```js\nclient.get().then((res) =\u003e console.log(res));\n```\nor\n```js\nclient.post(\"/service\", data).then((res) =\u003e console.log(res));\n```\n\n### ImgBB with Axios\n```js\naxios\n      .post(\n        `https://api.imgbb.com/1/upload?expiration=600\u0026key=${process.env.REACT_APP_imgbb_api}`,\n        formData\n      )\n// where formData is formData.append(\"image\", data.image[0]);\n```\n### reset/empty field on submit in rhf\n\n```js\nconst onSubmit = (data, e) =\u003e {\n  e.target.reset();\n};\n```\n\n## handling Promises\n\n- `Promise` constructor receives a callback function and the callback function receives `res()` and `rej()`\n\n```js\nconst prom = new Promise((resolve, reject) =\u003e {\n  const provider = new GoogleAuthProvider();\n\n  signInWithPopup(auth, provider)\n    .then((result) =\u003e {\n      resolve(\"logged\");\n    })\n    .catch((error) =\u003e {\n      reject(\"out\");\n    });\n});\n\nprom.then(() =\u003e {});\n```\n\n\u003e this promise may be invoked automatically.\n\n- we should use as follow\n\n```js\nconst funPromise = () =\u003e\n  new Promise((resolve, reject) =\u003e {\n    const provider = new GoogleAuthProvider();\n\n    signInWithPopup(auth, provider)\n      .then((result) =\u003e {\n        resolve(\"logged\");\n      })\n      .catch((error) =\u003e {\n        reject(\"out\");\n      });\n  });\nfunPromise.then(() =\u003e {});\n```\n\n\u003e a better way to handle promise\n\n## react-router loads a page from its middle of content\n\n- use following hook\n\n```js\nconst useScrollToTop = () =\u003e {\n  useEffect(() =\u003e {\n    window.scrollTo(0, 0);\n    return () =\u003e {};\n  }, []);\n};\nexport default useScrollToTop;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fgenius-car-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohanemon%2Fgenius-car-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohanemon%2Fgenius-car-client/lists"}