{"id":16595912,"url":"https://github.com/denisraymer/staggering-search","last_synced_at":"2025-10-19T21:08:34.973Z","repository":{"id":123369674,"uuid":"321290636","full_name":"denisraymer/staggering-search","owner":"denisraymer","description":"Testing the GitHub API on your own skin","archived":false,"fork":false,"pushed_at":"2020-12-21T11:49:09.000Z","size":747,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T01:07:55.086Z","etag":null,"topics":["github-api","react-hooks","reactjs","rodal"],"latest_commit_sha":null,"homepage":"https://denisraymer.github.io/staggering-search","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/denisraymer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2020-12-14T09:04:34.000Z","updated_at":"2023-03-08T22:12:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"5093b83e-eb89-42b6-af54-678a0194eca8","html_url":"https://github.com/denisraymer/staggering-search","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/denisraymer/staggering-search","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisraymer%2Fstaggering-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisraymer%2Fstaggering-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisraymer%2Fstaggering-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisraymer%2Fstaggering-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denisraymer","download_url":"https://codeload.github.com/denisraymer/staggering-search/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisraymer%2Fstaggering-search/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000722,"owners_count":26082894,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["github-api","react-hooks","reactjs","rodal"],"created_at":"2024-10-11T23:51:52.097Z","updated_at":"2025-10-09T01:12:04.437Z","avatar_url":"https://github.com/denisraymer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- PROJECT LOGO --\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://denisraymer.github.io/staggering-search\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/denisraymer/staggering-search/3219d2e7ce954646ce282e76bf540d13746022b2/src/assets/images/logo.svg\" alt=\"Logo\" width=\"350\"\u003e\n    \u003c/a\u003e\n\n  \u003cp align=\"center\"\u003e\n    We check the work with the GitHub API on our own skin\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://denisraymer.github.io/staggering-search/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/denisraymer/staggering-search/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/denisraymer/staggering-search/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\n\u003c/p\u003e\n\n## О проекте\n\nЭто приложение со списком пользователей, полученных из GitHub REST API. В проекте реализован поиск по имени, логину и\nместоположению. Добавлены дополнительные данные, такие как: подписчики, подписки, биография, ссылка на блог, почта и\nтвиттер.\n\n### Использовал\n\n* [GitHub REST API](https://docs.github.com/en/free-pro-team@latest/rest)\n* [React Bootstrap](https://react-bootstrap.github.io/)\n* [React Hooks](https://ru.reactjs.org/docs/hooks-intro.html)\n* [gh-pages](https://github.com/tschaub/gh-pages)\n* [React](https://ru.reactjs.org/)\n* [Rodal](https://github.com/chenjiahan/rodal)\n* [Axios](https://github.com/axios/axios)\n\n## Про код\n\nПроект поделил на компоненты список пользователей, форма поиска пользователей, модальное окно для других данных. Для\nполучения списка пользователей и создания подходящего массива с данными использую хук `useGetUserData`, для поиска\nиспользую хук `useSearchForm`. Все компоненты связал общим контекстом `ListUsersContext`, который поставляет данные в\nдочерние компоненты.\n\n### Хук useGetUserData\n\nСначала хук получает данные из API со списком пользователей с логинами, на основе которых получает данные каждого из них\nи формирует новый массив со списком всех необходимых пользователей. Это сделано потому, что API не предоставляет\nподробные данные о профиле пользователя; их можно получить только по отдельному запросу.\n\n* Получение списка логинов пользователей\n    ```\n    useEffect(function () {\n        getUsers('users', setResponse, setError);\n    }, []);\n    ```\n\n* Получение пользователей по логину и добавления в новый массив\n    ```\n    useEffect(function () {\n        if (isLoading \u0026\u0026 response !== null) {\n            function getUser(data) {\n                return setUserData(prevState =\u003e [...prevState, data]);\n            }\n\n            response.map(item =\u003e getUsers(`users/${item.login}`, getUser, setError));\n\n            setIsLoading(false);\n        }\n    }, [isLoading, response]);\n    ```\n\n### Компонент ListUsersContext\n\nЗдесь организована связка формы поиска и списка пользователей. Здесь выполняется фильтрация введенных данных и создание\nнеобходимого массива с данными, который передается в дочерние компоненты.\n\n* Проведение выборки из массива с данными\n  ```\n    function validate(user, value) {\n        return user.toLowerCase().includes(value.toLowerCase().trim());\n    }\n\n    function searchUsers(userData) {\n        return userData.filter((user) =\u003e {\n            if (user.login !== null \u0026\u0026 user.name !== null \u0026\u0026 user.location !== null) {\n                return validate(user.login, inputValueSearch) || validate(user.name, inputValueSearch) || validate(user.location, inputValueSearch);\n            }\n        });\n    }\n  ```\n\n## Заключение\n\nЗдесь основные вещи которые на мой взгляд нуждаются в комментариях.\n\n## Contributing\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisraymer%2Fstaggering-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenisraymer%2Fstaggering-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisraymer%2Fstaggering-search/lists"}