context file name chenged

src/App.tsx

@@ -5,11 +5,11 @@ import React from 'react';
 import { UserSelector } from './components/Users/UserSelector';
 import { MainContent } from './components/Posts/MainContent';
 import { PostSlidebar } from './components/Posts/PostSlidebar';
-import { PostsProvider } from './components/PostsContext';
+import { MainProvider } from './components/MainContext';
 
 export const App: React.FC = () => {
   return (
-    <PostsProvider>
+    <MainProvider>
       <main className="section">
         <div className="container">
           <div className="tile is-ancestor">
@@ -25,6 +25,6 @@ export const App: React.FC = () => {
           </div>
         </div>
       </main>
-    </PostsProvider>
+    </MainProvider>
   );
 };

src/components/Comments/AddButton.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { Error } from '../../types/Message';
 
 export const AddButton: React.FC = () => {
@@ -10,7 +10,7 @@ export const AddButton: React.FC = () => {
     isAddButton,
     notification,
     setIsAddButton,
-  } = useContext(PostsContext);
+  } = useContext(MainContext);
 
   const handleClick = () => {
     setIsForm(true);

src/components/Comments/CommentItem.tsx

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
 import { Comment } from '../../types/Comment';
 import { deleteComment } from '../../utils/api/comments';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 
 export const CommentItem: React.FC<{ comment: Comment }> = ({ comment }) => {
-  const { comments, setComments } = useContext(PostsContext);
+  const { comments, setComments } = useContext(MainContext);
 
   const doDeleteComment = (id: number) => {
     setComments(comments && comments.filter(item => item.id !== id));

src/components/Comments/CommentsList.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { CommentItem } from './CommentItem';
 
 export const CommentsList: React.FC = () => {
-  const { comments } = useContext(PostsContext);
+  const { comments } = useContext(MainContext);
 
   return (
     <>

src/components/Comments/PostDetails.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { CommentsList } from './CommentsList';
 import { Loader } from '../Notices/Loader/Loader';
 import { Load } from '../../types/Load';
@@ -16,7 +16,7 @@ export const PostDetails: React.FC = () => {
     loadType,
     currentPost,
     notification,
-  } = useContext(PostsContext);
+  } = useContext(MainContext);
 
   return (
     <div className="content" data-cy="PostDetails">

src/components/Form/FormInput.tsx

@@ -6,7 +6,7 @@ import {
   LabelMap,
   ErrorMap,
 } from '../../types/Input';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 
 type Props = {
   setValue: (val: string) => void
@@ -15,7 +15,7 @@ type Props = {
 };
 
 export const FormInput: React.FC<Props> = ({ type, value, setValue }) => {
-  const { isError, setIsError, isReset } = useContext(PostsContext);
+  const { isError, setIsError, isReset } = useContext(MainContext);
   const [hasError, setHasError] = useState(false);
   const lowerCaseType = type.toLowerCase();
 

src/components/Form/NewCommentForm.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import classNames from 'classnames';
 import { FormInput } from './FormInput';
 import { Input } from '../../types/Input';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { Error } from '../../types/Message';
 import { addComment } from '../../utils/api/comments';
 
@@ -14,7 +14,7 @@ export const NewCommentForm: React.FC = () => {
     currentPost,
     setComments,
     setNotification,
-  } = useContext(PostsContext);
+  } = useContext(MainContext);
   const [name, setName] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [email, setEmail] = useState('');

src/components/MainContext.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import { getUsers } from '../utils/api/users';
+import { getComments, getPosts } from '../utils/api/posts';
+import { MainProps } from '../types/PostProps';
+import { Message, Error, Warning } from '../types/Message';
+import { Comment } from '../types/Comment';
+import { User } from '../types/User';
+import { Post } from '../types/Post';
+import { Load } from '../types/Load';
+
+export const MainContext = React
+  .createContext<MainProps>({
+  isReset: false,
+  isError: false,
+  currentUser: null,
+  currentPost: null,
+  comments: [],
+  users: null,
+  posts: null,
+  isForm: false,
+  notification: '',
+  isAddButton: false,
+  loadType: Load.None,
+
+  setIsAddButton: () => {},
+  setCurrentUser: () => {},
+  setComments: () => {},
+  setIsReset: () => {},
+  setIsForm: () => {},
+  setUsers: () => {},
+  setPosts: () => {},
+  setIsError: () => {},
+  setLoadType: () => {},
+  setCurrentPost: () => {},
+  setNotification: () => {},
+});
+
+export const MainProvider: React.FC<{
+  children: React.ReactNode,
+}> = ({ children }) => {
+  const [isError, setIsError] = useState(false);
+  const [isForm, setIsForm] = useState(false);
+  const [isReset, setIsReset] = useState(false);
+  const [isAddButton, setIsAddButton] = useState(false);
+
+  const [users, setUsers] = useState<User[] | null>(null);
+  const [posts, setPosts] = useState<Post[] | null>(null);
+  const [currentUser, setCurrentUser] = useState<number | null>(null);
+  const [currentPost, setCurrentPost] = useState<Post | null>(null);
+  const [comments, setComments] = useState<Comment[]>([]);
+
+  const [loadType, setLoadType] = useState<Load>(Load.None);
+  const [notification, setNotification] = useState<Message>('');
+
+  useEffect(() => {
+    setNotification(Warning.emptyUsers);
+    getUsers()
+      .then(setUsers)
+      .catch(() => setNotification(Error.getUsers));
+  }, []);
+
+  useEffect(() => {
+    if (currentUser) {
+      setPosts(null);
+      setNotification('');
+      setLoadType(Load.Posts);
+
+      getPosts(currentUser)
+        .then((res) => (!Object.values(res).length
+          ? setNotification(Warning.emptyPosts)
+          : setPosts(res)))
+        .catch(() => setNotification(Error.getPosts))
+        .finally(() => setLoadType(Load.None));
+    }
+  }, [currentUser]);
+
+  useEffect(() => {
+    if (currentPost) {
+      setIsAddButton(false);
+      setNotification('');
+      setLoadType(Load.Comments);
+
+      getComments(currentPost.id)
+        .then((res) => (setComments(res)))
+        .catch(() => setNotification(Error.getComments))
+        .finally(() => {
+          setLoadType(Load.None);
+          setIsAddButton(true);
+        });
+    }
+  }, [currentPost]);
+
+  const value: MainProps = {
+    isReset,
+    setIsReset,
+    isError,
+    setIsError,
+    users,
+    setUsers,
+    loadType,
+    setLoadType,
+    posts,
+    setPosts,
+    notification,
+    setNotification,
+    currentUser,
+    setCurrentUser,
+    currentPost,
+    setCurrentPost,
+    comments,
+    setComments,
+    isForm,
+    setIsForm,
+    isAddButton,
+    setIsAddButton,
+  };
+
+  return (
+    <MainContext.Provider value={value}>
+      {children}
+    </MainContext.Provider>
+  );
+};

src/components/Notices/Notification.tsx

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { Error, Warning } from '../../types/Message';
 
 export const Notification: React.FC = () => {
-  const { notification } = useContext(PostsContext);
+  const { notification } = useContext(MainContext);
 
   return (
     <>

src/components/Posts/MainContent.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { PostsList } from './PostsList';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { Notification } from '../Notices/Notification';
 import { Loader } from '../Notices/Loader';
 import { Load } from '../../types/Load';
@@ -12,7 +12,7 @@ const checkMassageTg = (value: Message) => (
   || value === Warning.emptyUsers);
 
 export const MainContent: React.FC = () => {
-  const { notification, loadType } = useContext(PostsContext);
+  const { notification, loadType } = useContext(MainContext);
 
   return (
     <div className="block" data-cy="MainContent">

src/components/Posts/PostItem.tsx

@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react';
 import classNames from 'classnames';
 import { Post } from '../../types/Post';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { Load } from '../../types/Load';
 
 export const PostItem: React.FC<{ post: Post }> = ({ post }) => {
@@ -13,7 +13,7 @@ export const PostItem: React.FC<{ post: Post }> = ({ post }) => {
     setIsAddButton,
     setCurrentPost,
     setNotification,
-  } = useContext(PostsContext);
+  } = useContext(MainContext);
   const [isOpen, setIsOpen] = useState(false);
   const isActive = currentPost?.id === post.id;
   const toggleCurrentPost = isActive ? null : post;

src/components/Posts/PostSlidebar.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { PostDetails } from '../Comments/PostDetails';
 
 export const PostSlidebar: React.FC = () => {
-  const { currentPost } = useContext(PostsContext);
+  const { currentPost } = useContext(MainContext);
 
   return (
 

src/components/Posts/PostsList.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { PostItem } from './PostItem';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 
 export const PostsList: React.FC = () => {
-  const { posts } = useContext(PostsContext);
+  const { posts } = useContext(MainContext);
 
   return (
     <div data-cy="PostsList">

src/components/Users/UsersList.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { PostsContext } from '../PostsContext';
+import { MainContext } from '../MainContext';
 import { Load } from '../../types/Load';
 
 type Props = {
@@ -16,7 +16,7 @@ export const UsersList: React.FC<Props> = ({ setIsMenu, setUserName }) => {
     setLoadType,
     setCurrentPost,
     setNotification,
-  } = useContext(PostsContext);
+  } = useContext(MainContext);
 
   const handleClick = (id: number, name: string) => {
     if (id === currentUser) {

src/types/PostProps.ts

@@ -4,7 +4,7 @@ import { Message } from './Message';
 import { Comment } from './Comment';
 import { Load } from './Load';
 
-export interface PostsProps {
+export type MainProps = {
   loadType: Load,
   isForm: boolean,
   isAddButton: boolean,
@@ -29,4 +29,4 @@ export interface PostsProps {
   isError: boolean,
   setIsError: (val: boolean) => void,
   setIsReset: (val: boolean) => void,
-}
+};