{"id":18264747,"url":"https://github.com/reactcomponentkit/userlist","last_synced_at":"2025-04-09T01:41:59.035Z","repository":{"id":137746086,"uuid":"146319208","full_name":"ReactComponentKit/UserList","owner":"ReactComponentKit","description":"UserList is a example for ReactComponentKit. It is focus on requesting api asynchronously.","archived":false,"fork":false,"pushed_at":"2019-09-15T10:50:59.000Z","size":4990,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T19:53:52.792Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Swift","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/ReactComponentKit.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":"2018-08-27T15:44:51.000Z","updated_at":"2019-09-15T10:50:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"71afeaed-62dd-41b8-82cc-1ed7294d4cdd","html_url":"https://github.com/ReactComponentKit/UserList","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactComponentKit%2FUserList","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactComponentKit%2FUserList/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactComponentKit%2FUserList/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReactComponentKit%2FUserList/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReactComponentKit","download_url":"https://codeload.github.com/ReactComponentKit/UserList/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247958710,"owners_count":21024821,"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":"2024-11-05T11:15:48.832Z","updated_at":"2025-04-09T01:41:59.012Z","avatar_url":"https://github.com/ReactComponentKit.png","language":"Swift","readme":"# UserList\nUserList is a example for ReactComponentKit. It is focus on requesting api asynchronously.\n\n![](./art/video.gif)\n\n## Completed\n\n- [x] Load Users\n- [x] Delete User\n- [x] Update User\n- [x] Add New User\n- [x] Make and Show Loding Component when app is requesting an api.\n- [x] Make and Show Error Component when the app has occurred some error.\n\n\n## Define Actions\n\nWe'll define four actions for UserList app. \n\n### LoadUsersAction\n\nIt loads user list from `https://jsonplaceholder.typicode.com` REST api. \n\n```swift\nstruct LoadUsersAction: Action {\n    \n}\n```\n\n### AddNewUserAction\n\nIt adds the new user to `https://jsonplaceholder.typicode.com` server.\n\n```swift\nstruct AddNewUserAction: Action {\n    let user: User\n    \n    init(user: User) {\n        self.user = user\n    }\n}\n```\n\n### UpdateUserAction\n\nIt updates the current user's attribute to `https://jsonplaceholder.typicode.com` server.\n\n```swift\nstruct UpdateUserAction: Action {\n    \n    let user: User\n    \n    init(user: User) {\n        self.user = user\n    }\n}\n```\n\n### DeleteUserAction\n\nIt deletes a user from `https://jsonplaceholder.typicode.com` server.\n\n```swift\nstruct DeleteUserAction: Action {\n    let user: User\n    \n    init(user: User) {\n        self.user = user\n    }\n}\n```\n\n## Define State, ViewModel and Action Flow\n\n`loadUsers` and other reducers are the async reducer. Async reducer can run itself on await or async manner.\n\n```swift\nenum ViewState {\n    case none\n    case loading\n    case requesting\n    case list\n    case error\n}\n\nstruct UserListState: State {\n    var viewState: ViewState = .none\n    var users: [User] = []\n    var sections: [DefaultSectionModel] = []\n    var error: RCKError? = nil\n}\n\nclass UserListViewModel: RCKViewModel\u003cUserListState\u003e {\n    \n    let viewState = Output\u003cViewState\u003e(value: .loading)\n    let sections =  Output\u003c[DefaultSectionModel]\u003e(value: [])\n    \n    override func setupStore() {\n        initStore { store in\n            store.initial(state: UserListState())\n            store.beforeActionFlow(logAction)\n            \n            store.flow(action: LoadUsersAction.self)\n                .flow(\n                    awaitFlow(loadUsers),\n                    { state, _ in makeCollectionViewSectionModels(state: state) }\n                )\n            \n            store.flow(action: AddNewUserAction.self)\n                .flow(\n                    awaitFlow(addNewUser),\n                    { state, _ in makeCollectionViewSectionModels(state: state) }\n                )\n            \n            store.flow(action: DeleteUserAction.self)\n                .flow(\n                    awaitFlow(deleteUser),\n                    { state, _ in makeCollectionViewSectionModels(state: state) }\n                )\n            \n            store.flow(action: UpdateUserAction.self)\n                .flow(\n                    awaitFlow(updateUser),\n                    { state, _ in makeCollectionViewSectionModels(state: state) }\n                )\n        }\n    }\n        \n    override func on(newState: UserListState) {\n        sections.accept(newState.sections)\n        viewState.accept(.list)\n    }\n    \n    override func on(error: RCKError) {\n        viewState.accept(.error)\n    }\n    \n    \n    func newUser() -\u003e User {\n        return withState { state in\n            let id = state.users.count + 1\n            let name = \"\\(Faker().name.firstName()) \\(Faker().name.lastName())\"\n            let username = Faker().name.name()\n            let email = Faker().internet.email()\n            let phone = Faker().phoneNumber.phoneNumber()\n            return User(id: id, name: name, username: username, email: email, phone: phone)\n        }\n    }\n}\n```\n\n## The MIT License \n\nMIT License\n\nCopyright (c) 2018 Sungcheol Kim, https://github.com/ReactComponentKit/UserList\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactcomponentkit%2Fuserlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactcomponentkit%2Fuserlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactcomponentkit%2Fuserlist/lists"}