Skip to content

Commit 9e6392f

Browse files
lnmunhozlnmunhoz
committed
Search repos
1 parent f61c8ac commit 9e6392f

File tree

6 files changed

+258
-101
lines changed

6 files changed

+258
-101
lines changed

‎README.md

Lines changed: 29 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,48 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
## Goals
22

3-
## Available Scripts
3+
Integrate our frontend with a real world GraphQL server!
44

5-
In the project directory, you can run:
5+
## Requirements
66

7-
### `npm start`
7+
- Git
8+
- Npm
9+
- Your favorite IDE (VSCode)
10+
- Github Account
811

9-
Runs the app in the development mode.<br>
10-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
12+
## Intro
1113

12-
The page will reload if you make edits.<br>
13-
You will also see any lint errors in the console.
14+
### Why Apollo
1415

15-
### `npm test`
16+
Apollo Client is the best way to use GraphQL to build client applications. The client is designed to help you quickly build a UI that fetches data with GraphQL, and can be used with any JavaScript front-end.
1617

17-
Launches the test runner in the interactive watch mode.<br>
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
18+
### React
1919

20-
### `npm run build`
20+
### Github GraphQL API
2121

22-
Builds the app for production to the `build` folder.<br>
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
22+
GitHub chose GraphQL for our API v4 because it offers significantly more flexibility for our integrators. The ability to define precisely the data you want—and only the data you want—is a powerful advantage over the REST API v3 endpoints. GraphQL lets you replace multiple REST requests with a single call to fetch the data you specify.
2423

25-
The build is minified and the filenames include the hashes.<br>
26-
Your app is ready to be deployed!
24+
## 🏁 Get Started
2725

28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
26+
Open a terminal
2927

30-
### `npm run eject`
28+
Fork and clone this repository
3129

32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
30+
```
31+
git clone https://github.com/${you}/react-apollo-workshop
32+
```
3333

34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
34+
Navigate to the created folder
3535

36-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
36+
```
37+
cd react-apollo-workshop
38+
```
3739

38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
40+
## Setting up Apollo
3941

40-
## Learn More
42+
```
43+
npm install --save react-apollo apollo-boost graphql
44+
```
4145

42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
46+
## Bonus
4347

44-
To learn React, check out the [React documentation](https://reactjs.org/).
45-
46-
### Code Splitting
47-
48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49-
50-
### Analyzing the Bundle Size
51-
52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53-
54-
### Making a Progressive Web App
55-
56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57-
58-
### Advanced Configuration
59-
60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61-
62-
### Deployment
63-
64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65-
66-
### `npm run build` fails to minify
67-
68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
48+
- Autocomplete VSCode GraphQL?

‎src/App.js

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useCallback, useState } from "react";
22
import Layout from "./Layout";
33
import { Query } from "react-apollo";
44
import { gql } from "apollo-boost";
@@ -8,8 +8,15 @@ import {
88
Avatar,
99
Typography,
1010
List,
11-
ListItemText
11+
ListItemText,
12+
ListItemSecondaryAction,
13+
Chip,
14+
CircularProgress,
15+
Paper
1216
} from "@material-ui/core";
17+
import SearchBar from "./ui/SearchBar";
18+
import Repository from "./ui/Repository";
19+
import Loading from "./ui/Loading";
1320

1421
const MY_QUERY = gql`
1522
query {
@@ -19,27 +26,6 @@ const MY_QUERY = gql`
1926
}
2027
`;
2128

22-
const GET_REPOSITORY = gql`
23-
query {
24-
repository(owner: "lnmunhoz", name: "react-apollo-workshop") {
25-
id
26-
name
27-
issues(first: 10) {
28-
nodes {
29-
id
30-
title
31-
bodyText
32-
closed
33-
author {
34-
login
35-
avatarUrl
36-
}
37-
}
38-
}
39-
}
40-
}
41-
`;
42-
4329
const MyUsername = () => (
4430
<Query query={MY_QUERY}>
4531
{({ data, loading }) => {
@@ -49,32 +35,41 @@ const MyUsername = () => (
4935
</Query>
5036
);
5137

52-
const Repository = () => (
53-
<Query query={GET_REPOSITORY}>
54-
{({ data, loading }) => {
55-
if (loading) return <p>Loading...</p>;
56-
57-
const repository = data.repository;
58-
const issues = repository.issues.nodes;
38+
const SearchRepos = ({ searchText }) => (
39+
<Query
40+
variables={{
41+
query: searchText
42+
}}
43+
query={gql`
44+
query SearchRepos($query: String!) {
45+
search(first: 10, type: REPOSITORY, query: $query) {
46+
nodes {
47+
__typename
48+
... on Repository {
49+
id
50+
name
51+
viewerHasStarred
52+
stargazers {
53+
totalCount
54+
}
55+
owner {
56+
avatarUrl
57+
login
58+
}
59+
}
60+
}
61+
}
62+
}
63+
`}
64+
>
65+
{({ data, loading, error }) => {
66+
if (loading) return <Loading />;
67+
if (error) return <p>{error.message}</p>;
5968

6069
return (
6170
<List>
62-
{issues.map(issue => (
63-
<ListItem alignItems="flex-start" key={issue.id}>
64-
<ListItemAvatar>
65-
<Avatar alt="Remy Sharp" src={issue.author.avatarUrl} />
66-
</ListItemAvatar>
67-
<ListItemText
68-
primary={issue.title}
69-
secondary={
70-
<React.Fragment>
71-
<Typography component="span" color="textPrimary">
72-
{issue.bodyText}
73-
</Typography>
74-
</React.Fragment>
75-
}
76-
/>
77-
</ListItem>
71+
{data.search.nodes.map(repo => (
72+
<Repository {...repo} />
7873
))}
7974
</List>
8075
);
@@ -83,9 +78,19 @@ const Repository = () => (
8378
);
8479

8580
function App() {
81+
const [searchText, setSearchText] = useState("react");
82+
const [isSearching, setIsSearching] = useState(false);
83+
8684
return (
8785
<Layout>
88-
<Repository />
86+
<SearchBar
87+
searchText={searchText}
88+
onSearch={text => setSearchText(text)}
89+
onSearchFocus={() => setIsSearching(true)}
90+
onSearchBlur={() => setIsSearching(false)}
91+
/>
92+
93+
<SearchRepos searchText={searchText} />
8994
</Layout>
9095
);
9196
}

‎src/Layout.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,17 @@ class App extends React.Component {
4949
return (
5050
<React.Fragment>
5151
<CssBaseline />
52-
<AppBar position="static">
52+
{children}
53+
{/* <AppBar position="static">
5354
<Toolbar>
5455
<Typography variant="h6" color="inherit" flex>
5556
React + GraphQL Workshop
5657
</Typography>
5758
</Toolbar>
58-
</AppBar>
59-
<main className={classes.layout}>
60-
<Paper className={classes.paper}>{children}</Paper>
61-
</main>
59+
</AppBar> */}
60+
{/* <main className={classes.layout}> */}
61+
{/* <Paper className={classes.paper}>{children}</Paper> */}
62+
{/* </main> */}
6263
</React.Fragment>
6364
);
6465
}

‎src/ui/Loading.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { CircularProgress } from "@material-ui/core";
2+
import React from "react";
3+
4+
export default function Loading() {
5+
return (
6+
<CircularProgress
7+
style={{ margin: "0 auto", display: "block", marginTop: 10 }}
8+
/>
9+
);
10+
}

‎src/ui/Repository.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {
2+
Avatar,
3+
Chip,
4+
ListItem,
5+
ListItemAvatar,
6+
ListItemSecondaryAction,
7+
ListItemText,
8+
Typography
9+
} from "@material-ui/core";
10+
import React from "react";
11+
12+
export default function Repository({ id, owner, name, stargazers }) {
13+
return (
14+
<React.Fragment>
15+
<ListItem alignItems="flex-start">
16+
<ListItemAvatar>
17+
<Avatar alt={owner.login} src={owner.avatarUrl} />
18+
</ListItemAvatar>
19+
<ListItemText
20+
primary={name}
21+
secondary={
22+
<React.Fragment>
23+
<Typography component="span" color="textPrimary">
24+
{owner.login}
25+
</Typography>
26+
</React.Fragment>
27+
}
28+
/>
29+
<ListItemSecondaryAction>
30+
<Chip label={stargazers.totalCount + " Stars"} />
31+
</ListItemSecondaryAction>
32+
</ListItem>
33+
</React.Fragment>
34+
);
35+
}

0 commit comments

Comments
 (0)