generated from goitacademy/react-homework-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1432a7d
commit 08d7a6c
Showing
21 changed files
with
671 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { Suspense, lazy } from 'react'; | ||
import { Route, Routes } from 'react-router-dom'; | ||
|
||
// import HomePage from 'pages/HomePage'; | ||
// import PostsPage from 'pages/PostsPage'; | ||
// import SearchPage from 'pages/SearchPage'; | ||
// import PostDetailsPage from 'pages/PostDetailsPage'; | ||
|
||
import { StyledAppContainer, StyledNavLink } from 'App.styled'; | ||
import Loader from 'components/Loader'; | ||
|
||
const HomePage = lazy(() => import('pages/HomePage')); | ||
const PostsPage = lazy(() => import('pages/PostsPage')); | ||
const SearchPage = lazy(() => import('pages/SearchPage')); | ||
const PostDetailsPage = lazy(() => import('pages/PostDetailsPage')); | ||
|
||
/* | ||
Маршрутизація: | ||
<a href="www.google.com">Google</a> - будь-які посилання на зовнішні ресурси, | ||
поза нашим додатком | ||
<Link to="/some-route">Some page</Link> | ||
<NavLink to="/some-route"> Some page</NavLink> - для маршутизації по нашому додатку | ||
1. Зміна адресної строки браузера. | ||
2. Підготувати Route для відображення, тієї чи іншої сторінки | ||
<Route path="/some-route" element={<HomePage />} /> | ||
*/ | ||
|
||
export const App = () => { | ||
return ( | ||
<StyledAppContainer> | ||
<header> | ||
<nav> | ||
<StyledNavLink className="header-link" to="/"> | ||
Home | ||
</StyledNavLink> | ||
<StyledNavLink className="header-link" to="/posts"> | ||
Posts | ||
</StyledNavLink> | ||
<StyledNavLink className="header-link" to="/search"> | ||
Search | ||
</StyledNavLink> | ||
</nav> | ||
</header> | ||
|
||
<Suspense fallback={<Loader />}> | ||
<Routes> | ||
<Route path="/" element={<HomePage />} /> | ||
<Route path="/posts" element={<PostsPage />} /> | ||
<Route path="/search" element={<SearchPage />} /> | ||
{/* /posts/d12dWAF@ */} | ||
<Route path="/post-details/:postId/*" element={<PostDetailsPage />} /> | ||
</Routes> | ||
</Suspense> | ||
</StyledAppContainer> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
.header-link { | ||
color: black; | ||
border: 1px solid black; | ||
border-radius: 10px; | ||
display: inline-block; | ||
padding: 20px; | ||
font-size: 22px; | ||
text-decoration: none; | ||
margin-right: 15px; | ||
|
||
transition: all 0.3s; | ||
} | ||
|
||
.header-link.active { | ||
border: 1px solid white; | ||
background-color: black; | ||
color: white; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { NavLink } from 'react-router-dom'; | ||
import styled from 'styled-components'; | ||
|
||
export const StyledAppContainer = styled.div` | ||
max-width: 1200px; | ||
width: 100%; | ||
margin: 0 auto; | ||
padding: 0px 15px; | ||
.title { | ||
text-transform: uppercase; | ||
text-decoration: overline; | ||
color: brown; | ||
transition: all 0.3s; | ||
&:hover, | ||
&:focus { | ||
background-color: yellow; | ||
color: blue; | ||
} | ||
} | ||
.postList { | ||
padding: 0; | ||
list-style-type: none; | ||
display: flex; | ||
flex-direction: column; | ||
gap: 25px; | ||
} | ||
.postListItem { | ||
padding: 20px; | ||
border: 1px solid black; | ||
border-radius: 20px; | ||
} | ||
.error { | ||
padding: 20px; | ||
font-size: 24px; | ||
border: 1px solid black; | ||
background-color: red; | ||
color: white; | ||
} | ||
.header-link { | ||
} | ||
`; | ||
|
||
export const StyledNavLink = styled(NavLink)` | ||
color: black; | ||
border: 1px solid black; | ||
border-radius: 10px; | ||
display: inline-block; | ||
padding: 20px; | ||
font-size: 22px; | ||
text-decoration: none; | ||
margin-right: 15px; | ||
transition: all 0.3s; | ||
&.active { | ||
border: 1px solid white; | ||
background-color: black; | ||
color: white; | ||
} | ||
`; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react'; | ||
|
||
const ErrorMessage = ({ message }) => { | ||
return <p className="error">{message}</p>; | ||
}; | ||
|
||
export default ErrorMessage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import React from 'react'; | ||
import { NavLink } from 'react-router-dom'; | ||
import css from 'App.module.css'; | ||
|
||
const HeaderExapmleModules = () => { | ||
return ( | ||
<header> | ||
<nav> | ||
<NavLink | ||
className={({ isActive }) => | ||
`${css['header-link']} ${isActive ? css.active : ''}` | ||
} | ||
to="/" | ||
> | ||
Home | ||
</NavLink> | ||
<NavLink | ||
className={({ isActive }) => | ||
`${css['header-link']} ${isActive ? css.active : ''}` | ||
} | ||
to="/posts" | ||
> | ||
Posts | ||
</NavLink> | ||
<NavLink | ||
className={({ isActive }) => | ||
`${css['header-link']} ${isActive ? css.active : ''}` | ||
} | ||
to="/search" | ||
> | ||
Search | ||
</NavLink> | ||
</nav> | ||
</header> | ||
); | ||
}; | ||
|
||
export default HeaderExapmleModules; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import React from 'react'; | ||
import { ColorRing } from 'react-loader-spinner'; | ||
|
||
const Loader = () => { | ||
return ( | ||
<div> | ||
<ColorRing | ||
visible={true} | ||
height="80" | ||
width="80" | ||
ariaLabel="blocks-loading" | ||
wrapperStyle={{}} | ||
wrapperClass="blocks-wrapper" | ||
colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']} | ||
/> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Loader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react'; | ||
import PostListItem from './PostListItem'; | ||
|
||
const PostList = ({ posts }) => { | ||
const showPosts = Array.isArray(posts) && posts.length; | ||
|
||
return ( | ||
<ul className="postList"> | ||
{showPosts && | ||
posts.map(post => { | ||
return ( | ||
<PostListItem | ||
id={post.id} | ||
title={post.title} | ||
userId={post.userId} | ||
body={post.body} | ||
key={post.id} | ||
/> | ||
); | ||
})} | ||
</ul> | ||
); | ||
}; | ||
|
||
export default PostList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
const PostListItem = ({ id, title, userId, body }) => { | ||
return ( | ||
<li className="postListItem"> | ||
<Link to={`/post-details/${id}`}> | ||
<span>Id: {id}</span> | ||
<h3>Title: {title}</h3> | ||
<h4>User Id: {userId}</h4> | ||
<p>Body: {body}</p> | ||
</Link> | ||
</li> | ||
); | ||
}; | ||
|
||
export default PostListItem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
|
||
const SearchPostForm = ({ handleSearchSubmit, fetchAllPosts }) => { | ||
return ( | ||
<form onSubmit={handleSearchSubmit}> | ||
<label> | ||
<p>Enter post ID to find in database:</p> | ||
<input type="text" name="searchPostId" placeholder="Enter postID" /> | ||
<button type="submit">Search</button> | ||
<button onClick={() => fetchAllPosts()} type="button"> | ||
Reset | ||
</button> | ||
</label> | ||
</form> | ||
); | ||
}; | ||
|
||
export default SearchPostForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,18 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom/client'; | ||
import { App } from 'components/App'; | ||
import { BrowserRouter } from 'react-router-dom'; | ||
import { Provider } from 'react-redux'; | ||
|
||
import { App } from 'App'; | ||
|
||
import { store } from 'redux/store'; | ||
|
||
import './index.css'; | ||
|
||
ReactDOM.createRoot(document.getElementById('root')).render( | ||
<React.StrictMode> | ||
<App /> | ||
</React.StrictMode> | ||
<BrowserRouter> | ||
<Provider store={store}> | ||
<App /> | ||
</Provider> | ||
</BrowserRouter> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react'; | ||
|
||
const HomePage = () => { | ||
return ( | ||
<div> | ||
HomePage | ||
</div> | ||
); | ||
} | ||
|
||
export default HomePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import ErrorMessage from 'components/ErrorMessage'; | ||
import Loader from 'components/Loader'; | ||
import React, { useEffect, useState } from 'react'; | ||
import { useParams } from 'react-router-dom'; | ||
import { findPostCommentsById } from 'services/api'; | ||
|
||
const PostCommentsPage = () => { | ||
const { postId } = useParams(); | ||
const [comments, setComments] = useState(null); | ||
const [isLoading, setIsLoading] = useState(false); | ||
const [error, setError] = useState(null); | ||
|
||
useEffect(() => { | ||
if (!postId) return; | ||
|
||
const fetchAllPosts = async () => { | ||
try { | ||
setIsLoading(true); | ||
const commentsData = await findPostCommentsById(postId); | ||
|
||
setComments(commentsData); | ||
} catch (error) { | ||
setError(error.message); | ||
} finally { | ||
setIsLoading(false); | ||
} | ||
}; | ||
|
||
fetchAllPosts(); | ||
}, [postId]); | ||
|
||
return ( | ||
<div> | ||
{isLoading && <Loader />} | ||
{error && <ErrorMessage message={error} />} | ||
{comments !== null && ( | ||
<ul> | ||
{comments.map(comment => { | ||
return ( | ||
<li key={comment.id}> | ||
<h3>Name: {comment.name}</h3> | ||
<h4>Email: {comment.email}</h4> | ||
<p>Body: {comment.body}</p> | ||
</li> | ||
); | ||
})} | ||
</ul> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default PostCommentsPage; |
Oops, something went wrong.