Created dynamic list of posts

cypress.json

@@ -1,6 +1,5 @@
 {
   "baseUrl": "http://localhost:3000",
-  "defaultCommandTimeout": 2000,
   "video": true,
   "viewportHeight": 1920,
   "viewportWidth": 1080,

cypress/support/index.d.ts

@@ -1,9 +1 @@
 import '@mate-academy/cypress-tools/support';
-
-declare global {
-  namespace Cypress {
-    interface Chainable<Subject> {
-      byDataCy(name: string, text: string): Chainable<JQuery>;
-    }
-  }
-}

cypress/support/index.js

@@ -1,19 +1 @@
 require('@mate-academy/cypress-tools/support');
-
-Cypress.Commands.add(
-  'byDataCy',
-  { prevSubject: 'optional' },
-
-  (subject, name, text = '') => {
-    const target = subject || cy;
-    const selector = `[data-cy="${name}"]`;
-
-    if (text) {
-      return target.contain(selector, text);
-    }
-
-    return subject
-      ? subject.find(selector)
-      : cy.get(selector);
-  },
-);

package.json

@@ -21,7 +21,7 @@
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.5",
     "@mate-academy/eslint-config-react-typescript": "^1.0.5",
-    "@mate-academy/scripts": "^1.2.3",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.23",

src/App.tsx

@@ -1,44 +1,81 @@
-import React from 'react';
+import React, { useState } from 'react';
 import 'bulma/bulma.sass';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
 import classNames from 'classnames';
-import { PostsList } from './components/PostsList';
-import { PostDetails } from './components/PostDetails';
-import { UserSelector } from './components/UserSelector';
-import { Loader } from './components/Loader';
+import { PostsList } from './components/PostsList/PostsList';
+import { UserSelector } from './components/UserSelector/UserSelector';
+import { useSelectedUser } from './components/Contexts/UserContext';
+import { PostDetailsSidebar } from
+  './components/PostDetailsSidebar/PostDetailsSidebar';
+import { PostType } from './types/Post';
+import { User } from './types/User';
 
 export const App: React.FC = () => {
+  const [selectedPost, setSelectedPost] = useState<PostType | null>(null);
+
+  const [isNewCommentActive, setIsNewCommentActive] = useState(false);
+  const [isDropDownActive, setIsDropDownActive] = useState(false);
+
+  const [isPostsLoadingError, setIsPostsLoadingError] = useState(false);
+
+  const { selectedUser, setSelectedUser } = useSelectedUser();
+
+  const changeSelectedUser = (newUser: User) => {
+    setSelectedPost(null);
+    setSelectedUser(newUser);
+  };
+
+  const handleHideOnBlur = () => {
+    if (isDropDownActive) {
+      setIsDropDownActive(false);
+    }
+  };
+
+  const isUserValid = selectedUser && !isPostsLoadingError;
+
   return (
-    <main className="section">
+    <main
+      className="section"
+      role="presentation"
+      onClick={handleHideOnBlur}
+    >
       <div className="container">
         <div className="tile is-ancestor">
           <div className="tile is-parent">
             <div className="tile is-child box is-success">
               <div className="block">
-                <UserSelector />
+                <UserSelector
+                  isDropDownActive={isDropDownActive}
+                  onCloseDropDown={setIsDropDownActive}
+                  onChangeUser={changeSelectedUser}
+                />
               </div>
 
               <div className="block" data-cy="MainContent">
-                <p data-cy="NoSelectedUser">
-                  No user selected
-                </p>
-
-                <Loader />
-
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
-
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
-
-                <PostsList />
+                {!selectedUser && (
+                  <p data-cy="NoSelectedUser">
+                    No user selected
+                  </p>
+                )}
+                {isPostsLoadingError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
+                {isUserValid && (
+                  <PostsList
+                    selectedPost={selectedPost}
+                    selectedUser={selectedUser}
+                    onSelectPost={setSelectedPost}
+                    onAddComment={setIsNewCommentActive}
+                    onError={setIsPostsLoadingError}
+                  />
+                )}
               </div>
             </div>
           </div>
@@ -50,12 +87,18 @@ export const App: React.FC = () => {
               'is-parent',
               'is-8-desktop',
               'Sidebar',
-              'Sidebar--open',
+              { 'Sidebar--open': !!selectedPost },
             )}
           >
-            <div className="tile is-child box is-success ">
-              <PostDetails />
-            </div>
+            {selectedPost && (
+              <div className="tile is-child box is-success ">
+                <PostDetailsSidebar
+                  selectedPost={selectedPost}
+                  isNewComment={isNewCommentActive}
+                  onAddComment={setIsNewCommentActive}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>

src/api/comments.ts

@@ -0,0 +1,15 @@
+import { CommentType } from '../types/Comment';
+import { NewComment } from '../types/NewComment';
+import { client } from '../utils/fetchClient';
+
+export const getComments = (postId: number) => {
+  return client.get<CommentType[]>(`/comments?postId=${postId}`);
+};
+
+export const createComment = (data: NewComment) => {
+  return client.post<CommentType>('/comments', data);
+};
+
+export const deleteComment = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};

src/api/posts.ts

@@ -0,0 +1,6 @@
+import { PostType } from '../types/Post';
+import { client } from '../utils/fetchClient';
+
+export const getPosts = (userId: number) => {
+  return client.get<PostType[]>(`/posts?userId=${userId}`);
+};

src/api/user.ts

@@ -0,0 +1,6 @@
+import { User } from '../types/User';
+import { client } from '../utils/fetchClient';
+
+export const getUsers = () => {
+  return client.get<User[]>('/users');
+};

src/components/Comment/Comment.tsx

@@ -0,0 +1,35 @@
+import { CommentType } from '../../types/Comment';
+
+type Props = {
+  comment: CommentType,
+  onDelete: (commentId: number) => void,
+};
+
+export const Comment: React.FC<Props> = ({ comment, onDelete }) => {
+  return (
+    <article
+      className="message is-small"
+      data-cy="Comment"
+      key={comment.id}
+    >
+      <div className="message-header">
+        <a href={`mailto:${comment.email}`} data-cy="CommentAuthor">
+          {comment.name}
+        </a>
+        <button
+          data-cy="CommentDelete"
+          type="button"
+          className="delete is-small"
+          aria-label="delete"
+          onClick={() => onDelete(comment.id)}
+        >
+          delete button
+        </button>
+      </div>
+
+      <div className="message-body" data-cy="CommentBody">
+        {comment.body}
+      </div>
+    </article>
+  );
+};

src/components/CommentsList/CommentsList.tsx

@@ -0,0 +1,29 @@
+import { CommentType } from '../../types/Comment';
+import { Comment } from '../Comment/Comment';
+
+type Props = {
+  comments: CommentType[],
+  onDelete: (id: number) => void,
+};
+
+export const CommentsList: React.FC<Props> = ({ comments, onDelete }) => {
+  return (
+    <>
+      {
+        comments.length ? (
+          <>
+            <p className="title is-4">Comments:</p>
+
+            {comments.map((comment) => (
+              <Comment comment={comment} onDelete={onDelete} />
+            ))}
+          </>
+        ) : (
+          <p className="title is-4" data-cy="NoCommentsMessage">
+            No comments yet
+          </p>
+        )
+      }
+    </>
+  );
+};

src/components/Contexts/CommentsContext.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useContext } from 'react';
+import { CommentType } from '../../types/Comment';
+
+interface CommentsContextType {
+  comments: CommentType[],
+  setComments: React.Dispatch<React.SetStateAction<CommentType[]>>
+}
+
+const CommentsContext = React.createContext({} as CommentsContextType);
+
+type Props = {
+  children: React.ReactNode,
+};
+
+export const CommentsContextProvider: React.FC<Props> = ({ children }) => {
+  const [comments, setComments] = useState<CommentType[]>([]);
+
+  const value = {
+    comments,
+    setComments,
+  };
+
+  return (
+    <CommentsContext.Provider value={value}>
+      {children}
+    </CommentsContext.Provider>
+  );
+};
+
+export const useComments = () => useContext(CommentsContext);

src/components/Contexts/PostsContext.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useContext } from 'react';
+import { PostType } from '../../types/Post';
+
+interface PostsContextType {
+  posts: PostType[],
+  setPosts: React.Dispatch<React.SetStateAction<PostType[]>>
+}
+
+const PostsContext = React.createContext({} as PostsContextType);
+
+type Props = {
+  children: React.ReactNode,
+};
+
+export const PostsContextProvider: React.FC<Props> = ({ children }) => {
+  const [posts, setPosts] = useState<PostType[]>([]);
+
+  const value = {
+    posts,
+    setPosts,
+  };
+
+  return (
+    <PostsContext.Provider value={value}>
+      {children}
+    </PostsContext.Provider>
+  );
+};
+
+export const usePosts = () => useContext(PostsContext);