Skip to content
This repository has been archived by the owner on Jan 13, 2023. It is now read-only.

Commit

Permalink
Switch example API to from GitHub to Typicode JSON example api
Browse files Browse the repository at this point in the history
  • Loading branch information
robinheinze committed Sep 18, 2018
1 parent 3a02d7d commit 5855eb2
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 13 deletions.
2 changes: 1 addition & 1 deletion boilerplate/src/services/api/api-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@ export interface ApiConfig {
* The default configuration for the app.
*/
export const DEFAULT_API_CONFIG: ApiConfig = {
url: env.API || "https://api.github.com",
url: env.API || "https://jsonplaceholder.typicode.com",
timeout: 10000,
}
44 changes: 37 additions & 7 deletions boilerplate/src/services/api/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,48 @@ export class Api {
baseURL: this.config.url,
timeout: this.config.timeout,
headers: {
Accept: "application/vnd.github.v3+json",
Accept: "application/json",
},
})
}

/**
* Gets a list of repos.
* Gets a list of users.
*/
async getRepo(repo: string): Promise<Types.GetRepoResult> {
async getUsers(): Promise<Types.GetUsersResult> {
// make the api call
const response: ApiResponse<any> = await this.apisauce.get(`/repos/${repo}`)
const response: ApiResponse<any> = await this.apisauce.get(`/users`)

// the typical ways to die when calling an api
if (!response.ok) {
const problem = getGeneralApiProblem(response)
if (problem) return problem
}

const convertUser = raw => {
return {
id: raw.id,
name: raw.name,
}
}

// transform the data into the format we are expecting
try {
const rawUsers = response.data
const resultUsers: Types.User[] = rawUsers.map(convertUser)
return { kind: "ok", users: resultUsers }
} catch {
return { kind: "bad-data" }
}
}

/**
* Gets a single user by ID
*/

async getUser(id: string): Promise<Types.GetUserResult> {
// make the api call
const response: ApiResponse<any> = await this.apisauce.get(`/users/${id}`)

// the typical ways to die when calling an api
if (!response.ok) {
Expand All @@ -59,12 +90,11 @@ export class Api {

// transform the data into the format we are expecting
try {
const resultRepo: Types.Repo = {
const resultUser: Types.User = {
id: response.data.id,
name: response.data.name,
owner: response.data.owner.login,
}
return { kind: "ok", repo: resultRepo }
return { kind: "ok", user: resultUser }
} catch {
return { kind: "bad-data" }
}
Expand Down
6 changes: 3 additions & 3 deletions boilerplate/src/services/api/api.types.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { GeneralApiProblem } from "./api-problem"

export interface Repo {
export interface User {
id: number
name: string
owner: string
}

export type GetRepoResult = { kind: "ok"; repo: Repo } | GeneralApiProblem
export type GetUsersResult = { kind: "ok"; users: User[] } | GeneralApiProblem
export type GetUserResult = { kind: "ok"; user: User } | GeneralApiProblem
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export class SecondExampleScreen extends React.Component<SecondExampleScreenProp
// Don't do API like this, use store's API
const demo = new Api()
demo.setup()
demo.getRepo("infinitered/ignite")
demo.getUser("1")
// Let's do some async storage stuff
await save("Cool Name", "Boaty McBoatface")
}
Expand Down Expand Up @@ -138,7 +138,7 @@ export class SecondExampleScreen extends React.Component<SecondExampleScreenProp
textStyle={DEMO_TEXT}
tx="secondExampleScreen.reactotron"
onPress={this.demoReactotron}
/>
/>
</View>
<Image source={logoIgnite} style={IGNITE} />
<View style={LOVE_WRAPPER}>
Expand Down

0 comments on commit 5855eb2

Please sign in to comment.