added all files in to lesson 6

package.json

@@ -2,7 +2,7 @@
   "name": "react-homework-template",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://goitacademy.github.io/react-homework-template/",
+  "homepage": "https://exluzive53.github.io/react-redux-AsyncThunk/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",

src/App.jsx

@@ -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>
+  );
+};

src/App.module.css

@@ -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;
+}

src/App.styled.js

@@ -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;
+  }
+`;

src/components/ErrorMessage.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ErrorMessage = ({ message }) => {
+  return <p className="error">{message}</p>;
+};
+
+export default ErrorMessage;

src/components/HeaderExapmleModules.jsx

@@ -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;

src/components/Loader.jsx

@@ -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;

src/components/PostList.jsx

@@ -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;

src/components/PostListItem.jsx

@@ -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;

src/components/SearchPostForm.jsx

@@ -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;

src/index.css

@@ -13,3 +13,17 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}

src/index.js

@@ -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>
 );

src/pages/HomePage.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const HomePage = () => {
+  return (
+    <div>
+      HomePage
+    </div>
+  );
+}
+
+export default HomePage;