refactoring

src/API/PostService.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 
 export default class PostService {
+
     static async getAll(limit = 10, page = 1) {
         const response = await axios(`https://jsonplaceholder.typicode.com/posts`, {
             params: {
@@ -12,14 +13,12 @@ export default class PostService {
     }
 
     static async getById(id) {
-        const response = await axios(`https://jsonplaceholder.typicode.com/posts/${id}`
-        )
+        const response = await axios(`https://jsonplaceholder.typicode.com/posts/${id}`)
         return response;
     }
 
     static async getCommentsByPostId(id) {
-        const response = await axios(`https://jsonplaceholder.typicode.com/posts/${id}/comments`
-        )
+        const response = await axios(`https://jsonplaceholder.typicode.com/posts/${id}/comments`)
         return response;
     }
 }

src/components/PostItem.jsx

@@ -18,7 +18,7 @@ const PostItem = (props) => {
             <div className="post__btns">
                 <MyButton onClick={() => props.remove(props.post)}>Delete</MyButton>
             </div>
-      </div>
+        </div>
     )
 }
 

src/components/UI/modal/MyModal.jsx

@@ -4,19 +4,26 @@ import classes from './MyModal.module.css';
 
 const MyModal = ({children, visible, setVisible}) => {
 
-    const rootClasses = [classes.myModal];
+  const rootClasses = [classes.myModal];
 
-    if (visible) {
-        rootClasses.push(classes.active);
-    }
+  if (visible) {
+    rootClasses.push(classes.active);
+  }
 
-    return (
-      <div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
-        <div className={classes.myModalContent} onClick={(e) => e.stopPropagation()}>
-            {children}
-        </div>
-      </div>  
-    )
+
+  return (
+    <div 
+      className={rootClasses.join(' ')} 
+      onClick={() => setVisible(false)}
+    >
+      <div 
+        className={classes.myModalContent} 
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>  
+  )
 }
 
 export default MyModal;

src/components/UI/navbar/Navbar.jsx

@@ -1,31 +1,32 @@
-import React, {useContext} from 'react';
 import '../../../styles/App.css';
+import React, {useContext} from 'react';
 import {Link} from 'react-router-dom'
 import MyButton from '../button/MyButton';
 import {AuthContext} from '../../../context/index';
 
+
 const Navbar = () => {
-  const {isAuth, setIsAuth} = useContext(AuthContext); 
+  const {setIsAuth} = useContext(AuthContext); 
 
   const logout = () => {
     setIsAuth(false);
     localStorage.removeItem('auth');
   }
 
 
-    return (
-      <div className="navbar">
-        <MyButton
-          onClick={logout}
-        >
-          Logout
-        </MyButton>
-        <div className='navbar__links'>
-          <Link to='/about'>About app</Link>
-          <Link to='/posts'>Posts</Link>
-        </div>
+  return (
+    <div className="navbar">
+      <MyButton
+        onClick={logout}
+      >
+        Logout
+      </MyButton>
+      <div className='navbar__links'>
+        <Link to='/about'>About app</Link>
+        <Link to='/posts'>Posts</Link>
       </div>
-    )
+    </div>
+  )
 }
 
 export default Navbar;

src/context/index.js

@@ -1,4 +1,3 @@
 import { createContext } from'react';
 
-
 export const AuthContext = createContext(null)

src/hooks/useObserver.jsx

@@ -8,13 +8,12 @@ export const useObserver = (ref, canLoad, isLoading, callback) => {
         if (isLoading) return;
         if (observer.current) observer.current.disconnect();
 
-        var cb = function(entries, observer) {
+        var cb = function(entries) {
             if (entries[0].isIntersecting && canLoad) {
                 callback()
             }
         }
         observer.current = new IntersectionObserver(cb);
         observer.current.observe(ref.current);
     }, [isLoading])
-
 }

src/hooks/usePosts.js

@@ -2,14 +2,14 @@ import {useMemo} from 'react';
 
 export const useSortedPosts = (posts, sort) => {
 
-    const sortedPosts = useMemo(() => {
-        if (sort) {
-          return [...posts].sort((a, b) => a[sort].localeCompare(b[sort]))
-        }
-        return posts;
-      }, [sort, posts])
+  const sortedPosts = useMemo(() => {
+    if (sort) {
+      return [...posts].sort((a, b) => a[sort].localeCompare(b[sort]))
+    }
+    return posts;
+  }, [sort, posts])
 
-    return sortedPosts;
+  return sortedPosts;
 }
 
 export const usePosts = (posts, sort, query) => {

src/pages/Error.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-const Error = () => {
 
 
+const Error = () => {
+
     return (
         <div>
             <h1 style={{color: 'red'}}>The page does not exist!</h1>

src/pages/Login.jsx

@@ -1,7 +1,8 @@
 import React, {useContext} from 'react';
-import {AuthContext} from '../context/index'
 import MyInput from '../components/UI/input/MyInput';
 import MyButton from '../components/UI/button/MyButton';
+import {AuthContext} from '../context/index'
+
 
 const Login = () => {
     const {setIsAuth} = useContext(AuthContext);
@@ -16,8 +17,18 @@ const Login = () => {
         <div>
             <h1>Login page</h1>
             <form onSubmit={login}>
-                <MyInput type="text" name="username" placeholder="Login"/>
-                <MyInput type="password" name="password" placeholder="Password"/>
+                <MyInput 
+                    type="text" 
+                    name="username"
+                    value="root" 
+                    placeholder="Login"
+                />
+                <MyInput 
+                    type="password"
+                    name="password" 
+                    value="root" 
+                    placeholder="Password"    
+                />
                 <MyButton>Login</MyButton>
             </form>
         </div>

src/pages/PostIdPage.jsx

@@ -9,12 +9,12 @@ const PostIdPage = () => {
     const [post, setPost] = useState({});
     const [comments, setComments] = useState([]);
 
-    const [fetchPostById, isLoading, error] = useFetching( async(id) => {
+    const [fetchPostById, isLoading] = useFetching( async(id) => {
         const response = await PostService.getById(id);
         setPost(response.data);
     }) 
 
-    const [fetchComments, isComLoading, comError] = useFetching( async(id) => {
+    const [fetchComments, isComLoading] = useFetching( async(id) => {
         const response = await PostService.getCommentsByPostId(id);
         setComments(response.data);
     }) 
@@ -38,11 +38,10 @@ const PostIdPage = () => {
                 ? <Loader />
                 : <div>
                     {comments.map(comm => 
-                       <div key={comm.id} style={{marginTop: "15px"}}>
+                        <div key={comm.id} style={{marginTop: "15px"}}>
                             <h5>{comm.email}</h5>
                             <div>{comm.body}</div>
                         </div>
-
                     )}
                 </div>
             }

src/pages/Posts.jsx

@@ -7,12 +7,12 @@ import MyModal from '.././components/UI/modal/MyModal';
 import MyButton from '../components/UI/button/MyButton';
 import Loader from '../components/UI/loader/Loader';
 import MyPagination from '../components/UI/pagination/Pagination';
-import { usePosts } from '../hooks/usePosts';
+import MySelect from '../components/UI/select/MySelect';
 import PostService from '../API/PostService';
-import { useFetching } from '../hooks/useFetching';
 import { getPageCount } from '../utils/pages';
+import { usePosts } from '../hooks/usePosts';
+import { useFetching } from '../hooks/useFetching';
 import { useObserver } from '../hooks/useObserver';
-import MySelect from '../components/UI/select/MySelect';
 
 
 function Posts () {
@@ -55,52 +55,55 @@ function Posts () {
 
   return (
     <div className="App">
-    <MyButton
-      style={{margin: '15px 0'}}
-      onClick={() => setModal(true)}
-    >
-      Create post
-    </MyButton>
-      <MyModal
-        visible={modal}
-        setVisible={setModal}  
-      >
-        <PostForm create={createPost} />
-      </MyModal>
-      <hr style={{margin: '15px 0'}}/>
-      <PostFilter 
-        filter={filter}
-        setFilter={setFilter}
-      />
-      <MySelect 
-        value={limit}
-        onChange={value => setLimit(value)}
-        defaultValue="Number of posts per page"
-        options={[
-            {value: 5, name: '5'},
-            {value: 10, name: '10'},
-            {value: 25, name: '25'},
-            {value: -1, name: 'all'},
-
-        ]}
-      />
-      {postError &&
-        <h1>Error {postError}</h1>
-      }
-      <PostList posts={sortedAndSearchedPosts} remove={removePost} title="List of JavaScript" />
-      <div ref={lastElement} style={{height: 20, background: 'red'}} />
+        <MyButton
+            style={{margin: '15px 0'}}
+            onClick={() => setModal(true)}
+        >
+            Create post
+        </MyButton>
+        <MyModal
+            visible={modal}
+            setVisible={setModal}  
+        >
+            <PostForm create={createPost} />
+        </MyModal>
+
+        <hr style={{margin: '15px 0'}}/>
+
+        <PostFilter 
+            filter={filter}
+            setFilter={setFilter}
+        />
+        <MySelect 
+            value={limit}
+            onChange={value => setLimit(value)}
+            defaultValue="Number of posts per page"
+            options={[
+                {value: 5, name: '5'},
+                {value: 10, name: '10'},
+                {value: 25, name: '25'},
+                {value: -1, name: 'all'},
+            ]}
+        />
+        {postError &&
+            <h1>Error {postError}</h1>
+        }
+        <PostList posts={sortedAndSearchedPosts} remove={removePost} title="List of mockdata" />
+        <div ref={lastElement} style={{height: 20, background: 'red'}} />
 
-      {isPostsLoading && 
-        <div style={{display: 'flex', justifyContent: 'center', marginTop: '50px'}}><Loader /></div>
-      }
-
-      <MyPagination 
-        page={page}
-        changePage={changePage}
-        totalPages={totalPages}
-      />
+        {isPostsLoading && 
+            <div style={{display: 'flex', justifyContent: 'center', marginTop: '50px'}}>
+                <Loader />
+            </div>
+        }
+
+        <MyPagination 
+            page={page}
+            changePage={changePage}
+            totalPages={totalPages}
+        />
     </div>
-  );
+    );
 }
 
-export default Posts;
+export default Posts;