component', () => {
233 | const { getByTestId } = render(
234 |
235 |
236 |
237 | );
238 | const container = getByTestId('users-route');
239 |
240 | expect(container).toBeDefined();
241 | });
242 | });
243 |
244 |
--------------------------------------------------------------------------------
/src/assets/img/instagram-glyph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codenation-dev/react-instagram/2dc576d1dedf63cfd86c45ca5c2ce8371cdbb4d8/src/assets/img/instagram-glyph.png
--------------------------------------------------------------------------------
/src/assets/img/instagram-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './Loading.scss';
4 |
5 | const Loading = () => (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Carregando
17 |
17 |
18 |
19 |
20 |
21 |
{userInfo.name}
22 |
38 |
39 |
40 | {userInfo && (
41 |
63 | )}
64 |
65 | );
66 | };
67 |
68 | export default Post;
69 |
--------------------------------------------------------------------------------
/src/components/Post/Post.scss:
--------------------------------------------------------------------------------
1 | .post {
2 | background-color: #08111E;
3 | display: flex;
4 | flex-direction: column;
5 | margin-bottom: 30px;
6 | overflow: hidden;
7 | }
8 |
9 | .post__header {
10 | align-items: center;
11 | display: flex;
12 | justify-content: space-between;
13 | padding: 8px;
14 | }
15 |
16 | .post__header .user {
17 | display: flex;
18 | align-items: center;
19 | }
20 |
21 | .post__header .user__thumb {
22 | height: 40px;
23 | margin-right: 8px;
24 | border: 1px solid #FF991C;
25 | width: 40px;
26 | }
27 |
28 | .follow-btn {
29 | color: #858D93;
30 | font-weight: 600;
31 | font-size: 1.2rem;
32 |
33 | &.is-following {
34 | color: #ED2168;
35 | }
36 | }
37 |
38 | .post__header .user__name {
39 | font-size: 1.2rem;
40 | font-weight: bold;
41 | color: white;
42 | text-decoration: none;
43 | }
44 |
45 | .post__context {
46 | font-size: 1.4rem;
47 | }
48 |
49 | .post__figure {
50 | border-radius: 30px;
51 | height: auto;
52 | margin: 0;
53 | overflow: hidden;
54 | width: 100%;
55 | }
56 |
57 | .post__figure img {
58 | width: 100%;
59 | }
60 |
61 | .post__controls {
62 | width: 100%;
63 | display: flex;
64 | justify-content: flex-start;
65 | align-items: center;
66 | padding: 4px 0;
67 | }
68 |
69 | .post__control {
70 | color: #858D93;
71 | font-size: 2.4rem;
72 | margin-right: 5px;
73 | position: relative;
74 | }
75 |
76 | .fas.fa-heart {
77 | color: #ED2168;
78 | }
79 |
80 | .post__status {
81 | display: flex;
82 | padding: 0;
83 | line-height: 1.4em;
84 |
85 | span {
86 | color: #858D93;
87 | }
88 | }
89 |
90 | .post__status .user {
91 | display: flex;
92 | justify-content: flex-start;
93 | align-items: center;
94 | }
95 |
96 | .post__status .user span {
97 | font-size: 1.2rem;
98 | }
99 |
100 | .post__status .user__thumb {
101 | height: 30px;
102 | width: 30px;
103 | margin-right: 8px;
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/Post/index.jsx:
--------------------------------------------------------------------------------
1 | import Post from './Post';
2 |
3 | export default Post;
4 |
--------------------------------------------------------------------------------
/src/components/Story/Story.jsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from "react";
2 |
3 | import { Link } from 'react-router-dom';
4 |
5 | import './Story.scss';
6 |
7 | const Story = ({ story, user, handleClose }) => {
8 | const [metadata, setMetadata] = useState(null);
9 | const [currentTime, setCurrentTime] = useState(null);
10 |
11 | const updateProgress = useCallback(
12 | () => {
13 | if (metadata?.duration !== null && currentTime !== null) {
14 | const elapsedTime = ((currentTime / metadata.duration) * 100);
15 |
16 | return `${elapsedTime.toFixed(2)}%`;
17 | }
18 |
19 | return '0%';
20 | }, [metadata, currentTime]);
21 |
22 | return (
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
{user.name}
32 |
41 |
42 |
48 |
52 |
53 |
69 |
70 | )}
71 |
72 | );
73 | };
74 |
75 | export default Story;
76 |
--------------------------------------------------------------------------------
/src/components/Story/Story.scss:
--------------------------------------------------------------------------------
1 | .story {
2 | background-color: #08111E;
3 | display: flex;
4 | flex-direction: column;
5 | height: 100vh;
6 | left: 0;
7 | position: fixed;
8 | top: 0;
9 | width: 100%;
10 | z-index: 9999;
11 | }
12 |
13 | .story__header {
14 | overflow: hidden;
15 | padding: 16px;
16 | align-items: center;
17 | display: flex;
18 | justify-content: space-between;
19 | }
20 |
21 | .story__progress {
22 | background-color: rgba(255, 255, 255, .05);
23 | border-radius: 4px;
24 | height: 4px;
25 | overflow: hidden;
26 | width: 100%;
27 | padding: 1px;
28 | }
29 |
30 | .story__progress__elapsed {
31 | transition: width ease-in-out 0.05s;
32 | width: 0;
33 | height: 1px;
34 | background: linear-gradient(to right, #FF991C 0%, #D51589 100%);
35 | }
36 |
37 | .story__close {
38 | font-size: 1.6rem;
39 | color: #858d93;
40 | }
41 |
42 | .story__header .user {
43 | display: flex;
44 | align-items: center;
45 | }
46 |
47 | .story__header .user__thumb {
48 | height: 40px;
49 | margin-right: 8px;
50 | border: 1px solid #FF991C;
51 | width: 40px;
52 | }
53 |
54 | .story__header .user__name {
55 | font-size: 1.2rem;
56 | font-weight: bold;
57 | color: white;
58 | text-decoration: none;
59 | }
60 |
61 | .story__video__wrapper {
62 | background-color: black;
63 | height: calc(100vh - 104px);
64 | overflow: hidden;
65 | border: 5px solid #16202b;
66 | padding: 0;
67 | border-radius: 30px;
68 | position: relative;
69 | width: 100%;
70 | margin: 16px 0;
71 | };
72 |
73 | .video-player {
74 | position: absolute;
75 | width: 100%;
76 | max-width: 100%;
77 | height: 100%;
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/Story/index.jsx:
--------------------------------------------------------------------------------
1 | import Story from './Story';
2 |
3 | export default Story;
4 |
--------------------------------------------------------------------------------
/src/components/SuccessMessage/SuccessMessage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Link } from 'react-router-dom';
4 |
5 | import './SuccessMessage.scss';
6 |
7 | const SuccessMessage = () => (
8 |
9 |
40 |
41 |
Usuário Cadastrado!
42 |
43 |
44 |
Visite a página users para visualizar o novo usuário
45 |
46 |
13 | {avatar
14 | ?
15 | :
16 | }
17 |
{name}
20 |
21 |
22 |
23 | )
24 | };
25 |
26 | export default User;
27 |
--------------------------------------------------------------------------------
/src/components/User/index.jsx:
--------------------------------------------------------------------------------
1 | import User from './User';
2 |
3 | export default User;
4 |
--------------------------------------------------------------------------------
/src/containers/App/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BrowserRouter } from 'react-router-dom';
3 |
4 | import Topbar from '../../components/Topbar';
5 |
6 | import Routes from '../../routes';
7 |
8 | import './App.scss';
9 |
10 | const App = () => (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/src/containers/App/App.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
2 |
3 | *,
4 | *:after,
5 | *:before {
6 | box-sizing: border-box;
7 | }
8 |
9 | html {
10 | font-size: 10px;
11 | }
12 |
13 | body {
14 | padding-top: 56px;
15 | font-family: 'Open Sans', sans-serif;
16 | background-color: #08111E;
17 | color: #fff;
18 | }
19 |
20 | a {
21 | text-decoration: none;
22 | color: #fff;
23 | font-weight: bold;
24 | }
25 |
26 | button {
27 | background-color: transparent;
28 | border: none;
29 | box-shadow: none;
30 | outline: none;
31 | -webkit-tap-highlight-color: rgba(0,0,0,0);
32 | }
33 |
34 | .container {
35 | margin: 0 auto;
36 | position: relative;
37 | width: 100%;
38 | }
39 |
40 | @media screen and (min-width: 728px) {
41 | .container {
42 | width: 600px;
43 | }
44 | }
45 |
46 | .user__thumb {
47 | display: flex;
48 | border-radius: 100%;
49 | overflow: hidden;
50 | }
51 |
52 | .user__thumb__wrapper {
53 | border-radius: 100%;
54 | border: 2px solid #16202B;
55 | display: inline-block;
56 | overflow: hidden;
57 | }
58 |
59 | .user__thumb img {
60 | height: 100%;
61 | width: 100%;
62 | }
63 |
64 | .user__thumb--hasNew {
65 | background: linear-gradient(45deg, #D51589 0%, #FF991C 100%);
66 | }
67 |
--------------------------------------------------------------------------------
/src/containers/App/index.jsx:
--------------------------------------------------------------------------------
1 | import App from './App';
2 |
3 | export default App;
4 |
--------------------------------------------------------------------------------
/src/containers/Posts/Posts.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Post from '../../components/Post';
4 |
5 | const Posts = ({ posts, getUserHandler }) => (
6 |
7 |
8 | { posts.length > 0 && posts.map((post) => (
9 |
14 | ))
15 | }
16 |
17 |
27 | {stories.map((story, index) => {
28 | const profileData = getUserHandler(story.userId);
29 |
30 | return (
31 |
40 | )})
41 | }
42 |
61 |
62 |
63 |
64 | {avatar
65 | ?
66 | :
67 | }
68 |
69 |
70 | {name && (
71 |
72 | {name}
73 | @{username}
74 |
75 | )}
76 |
77 |
78 |
9 |
10 | { posts.length > 0
11 | ? posts.map((post) => (
12 |
16 | ))
17 | : (
18 |
19 | Não há publicações deste usuário
20 | 😥
21 |
22 | )
23 | }
24 |
25 |
9 |
10 |
11 |
12 | { avatar.length > 0
13 | ?
14 | :
15 | }
16 |
17 |
18 | {name && (
19 |
20 | {name}
21 | @{username}
22 |
23 | )}
24 |
25 |
26 |
49 | {(users.length > 0 && stories.length > 0) && (
50 |
54 | )}
55 |
56 | {users.length !== usersFetched
57 | ? (
)
58 | : (
59 |
)
63 | }
64 |
7 |
8 |
9 | );
10 |
11 | export default NewUserRoute;
12 |
--------------------------------------------------------------------------------
/src/routes/NewUserRoute/index.jsx:
--------------------------------------------------------------------------------
1 | import NewUserRoute from './NewUserRoute';
2 |
3 | export default NewUserRoute;
4 |
--------------------------------------------------------------------------------
/src/routes/ProfileRoute/ProfileRoute.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | import UserProfile from '../../containers/UserProfile';
4 | import UserPosts from '../../containers/UserPosts';
5 |
6 | import Loading from '../../components/Loading';
7 |
8 | const ProfileRoute = () => {
9 | const [name, setName] = useState('');
10 | const [id, setUserId] = useState('');
11 | const [avatar, setAvatar] = useState('');
12 | const [username, setUsername] = useState('');
13 | const [email, setEmail] = useState('');
14 | const [userPosts, setUserPosts] = useState([]);
15 | const [isLoading, setIsLoading] = useState(true);
16 |
17 | useEffect(
18 | () => {
19 | const { pathname } = window.location;
20 | const param = pathname.split("/")[2];
21 |
22 | fetch(`https://5e7d0266a917d70016684219.mockapi.io/api/v1/users?search=${param}`)
23 | .then(response => response.json())
24 | .then(profileData => {
25 | setAvatar(profileData[0].avatar);
26 | setEmail(profileData[0].email);
27 | setName(profileData[0].name);
28 | setUsername(profileData[0].username);
29 | setUserId(profileData[0].id);
30 | });
31 | }, []);
32 |
33 | useEffect(() => {
34 | if (id) {
35 | fetch(`https://5e7d0266a917d70016684219.mockapi.io/api/v1/users/${id}/posts`)
36 | .then(response => response.json())
37 | .then(posts => {
38 | setUserPosts(posts);
39 | setIsLoading(false)
40 | });
41 | }
42 | }, [id]);
43 |
44 | return (
45 |
46 |
52 |
53 | {isLoading
54 | ? ()
55 | :
56 | }
57 |
58 | );
59 | };
60 |
61 | export default ProfileRoute;
62 |
--------------------------------------------------------------------------------
/src/routes/ProfileRoute/index.jsx:
--------------------------------------------------------------------------------
1 | import ProfileRoute from './ProfileRoute';
2 |
3 | export default ProfileRoute;
4 |
--------------------------------------------------------------------------------
/src/routes/UsersRoute/UsersRoute.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | import UsersList from '../../containers/UsersList/UsersList';
4 |
5 | const UsersRoute = () => {
6 | const [users, setUsers] = useState([]);
7 |
8 | useEffect(() => {
9 | fetch('https://5e7d0266a917d70016684219.mockapi.io/api/v1/users')
10 | .then((res) => res.json())
11 | .then(data => setUsers(data));
12 | }, []);
13 |
14 | return (
15 |
16 |
17 |
18 | );
19 | };
20 |
21 | export default UsersRoute;
22 |
--------------------------------------------------------------------------------
/src/routes/UsersRoute/index.jsx:
--------------------------------------------------------------------------------
1 | import UsersRoute from './UsersRoute';
2 |
3 | export default UsersRoute;
4 |
--------------------------------------------------------------------------------
/src/routes/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Switch } from 'react-router-dom';
3 |
4 | import FeedRoute from './FeedRoute';
5 | import UsersRoute from './UsersRoute';
6 | import ProfileRoute from './ProfileRoute';
7 | import NewUserRoute from './NewUserRoute';
8 |
9 | const Routes = () => (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 |
29 | export default Routes;
30 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------