Skip to content

Commit

Permalink
Update async effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@pepopowitz
pepopowitz committed Apr 4, 2019
1 parent 4929de4 commit ef6b14f
Show file tree
Hide file tree
Showing 16 changed files with 105 additions and 55 deletions.
2 changes: 2 additions & 0 deletions exercise-10/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,3 +166,5 @@ You can verify this by making a change in `data/db.json`, and making sure the ch
### Extra Credit

- Read more about [the `useEffect` hook](https://overreacted.io/a-complete-guide-to-useeffect/).

- Read (a lot!) about [loading data with `useEffect`](https://www.robinwieruch.de/react-hooks-fetch-data/).
20 changes: 13 additions & 7 deletions exercise-10/SOLUTIONS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,12 @@ export default function FriendsEntry() {
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down Expand Up @@ -99,10 +102,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
11 changes: 7 additions & 4 deletions exercise-10/complete/friend-detail/FriendDetail.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-10/complete/friends/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down
11 changes: 7 additions & 4 deletions exercise-11/complete/friend-detail/FriendDetail.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-11/complete/friends/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down
11 changes: 7 additions & 4 deletions exercise-11/friend-detail/FriendDetail.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-11/friends/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down
11 changes: 7 additions & 4 deletions exercise-13/friend-detail/FriendDetail.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-13/friends/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-15/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,12 @@ The side effect we need to run in this component calls out to an API to retrieve
In our modern component, we are using `useEffect` to perform this side-effect. It calls out to `getFriendsFromApi` to get the list of friends, then calls the state modifier `setFriends` with the result.

```jsx
useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);
```

Expand Down
9 changes: 6 additions & 3 deletions exercise-15/modern/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down
11 changes: 7 additions & 4 deletions exercise-16/friend-detail/FriendDetail.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-16/friends/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down
11 changes: 7 additions & 4 deletions exercise-17/friend-detail/FriendDetail.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import FriendDetail from './FriendDetail';
export default function(props) {
const [friend, setFriend] = useState(undefined);

useEffect(async () => {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
useEffect(() => {
async function load() {
const id = props.match.params.id;
const friend = await getFriendFromApi(id);
setFriend(friend);
}
load();
}, [props.match.id]);

return <FriendDetail friend={friend} />;
Expand Down
9 changes: 6 additions & 3 deletions exercise-17/friends/Friends.entry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import Friends from './Friends';
export default function FriendsEntry() {
const [friends, setFriends] = useState([]);

useEffect(async () => {
const friends = await getFriendsFromApi();
setFriends(friends);
useEffect(() => {
async function load() {
const friends = await getFriendsFromApi();
setFriends(friends);
}
load();
}, []);

return <Friends friends={friends} />;
Expand Down

0 comments on commit ef6b14f

Please sign in to comment.