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
a6508bc
commit 5f98e81
Showing
22 changed files
with
771 additions
and
5 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
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,21 @@ | ||
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 { persistor, store } from 'redux/store'; | ||
|
||
import './index.css'; | ||
import { PersistGate } from 'redux-persist/integration/react'; | ||
|
||
ReactDOM.createRoot(document.getElementById('root')).render( | ||
<React.StrictMode> | ||
<App /> | ||
</React.StrictMode> | ||
<BrowserRouter> | ||
<Provider store={store}> | ||
<PersistGate persistor={persistor}> | ||
<App /> | ||
</PersistGate> | ||
</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; |
Oops, something went wrong.