solution

src/App.tsx

@@ -1,42 +1,107 @@
-import React from 'react';
+/* eslint-disable @typescript-eslint/indent */
+import { FC, useEffect, useMemo, 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 { User } from './types/User';
+import { getUsers } from './services/user';
+import { Post } from './types/Post';
+import { getPostsByUserId } from './services/posts';
+import classNames from 'classnames';
+
+export const App: FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [userPosts, setUserPosts] = useState<Post[]>([]);
+  const [selectedPostId, setSelectedPostId] = useState<number | null>(null);
+  const [postError, setPostError] = useState<boolean>(false);
+  const [isLoadingPosts, setIsLoadingPosts] = useState<boolean>(false);
+
+  const selectedPost = useMemo(
+    () => userPosts.find(post => post.id === selectedPostId),
+    [selectedPostId, userPosts],
+  );
+
+  const setSelectUser = (user: User) => {
+    setSelectedUser(user);
+    setUserPosts([]);
+  };
+
+  const setSelectPostId = (id: number | null) => {
+    setSelectedPostId(id);
+  };
+
+  useEffect(() => {
+    if (selectedUser) {
+      setIsLoadingPosts(true);
+      setPostError(false);
+      getPostsByUserId(selectedUser.id)
+        .then(setUserPosts)
+        .catch(() => setPostError(true))
+        .finally(() => setIsLoadingPosts(false));
+    } else {
+      setUserPosts([]);
+    }
+  }, [selectedUser]);
+
+  useEffect(() => {
+    getUsers().then(setUsers);
+  }, []);
 
-export const App: React.FC = () => {
   return (
     <main className="section">
       <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
+                  users={users}
+                  selectedUser={selectedUser}
+                  setSelectUser={setSelectUser}
+                />
               </div>
 
               <div className="block" data-cy="MainContent">
-                <p data-cy="NoSelectedUser">No user selected</p>
+                {!selectedUser && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
 
-                <Loader />
+                {isLoadingPosts && <Loader />}
 
-                <div
-                  className="notification is-danger"
-                  data-cy="PostsLoadingError"
-                >
-                  Something went wrong!
-                </div>
+                {!!userPosts.length && !isLoadingPosts && (
+                  <PostsList
+                    userPosts={userPosts}
+                    setSelectPostId={setSelectPostId}
+                    selectedPostId={selectedPostId}
+                  />
+                )}
 
-                <div className="notification is-warning" data-cy="NoPostsYet">
-                  No posts yet
-                </div>
+                {!isLoadingPosts &&
+                  !userPosts.length &&
+                  !postError &&
+                  selectedUser && (
+                    <div
+                      className="notification is-warning"
+                      data-cy="NoPostsYet"
+                    >
+                      No posts yet
+                    </div>
+                  )}
 
-                <PostsList />
+                {postError && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    Something went wrong!
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -48,11 +113,11 @@ export const App: React.FC = () => {
               'is-parent',
               'is-8-desktop',
               'Sidebar',
-              'Sidebar--open',
+              { 'Sidebar--open': selectedPost !== undefined },
             )}
           >
-            <div className="tile is-child box is-success ">
-              <PostDetails />
+            <div className="tile is-child box is-success">
+              {selectedPost && <PostDetails post={selectedPost} />}
             </div>
           </div>
         </div>

src/components/Field.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import { ChangeEvent } from 'react';
+
+interface Props {
+  id: string;
+  label: string;
+  type?: string;
+  placeholder: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  lIcon: string;
+  error: string | undefined;
+  dataCy: string;
+  name: string;
+}
+export const Field = (props: Props) => {
+  const {
+    id,
+    label,
+    type,
+    placeholder,
+    value,
+    onChange,
+    lIcon,
+    error,
+    dataCy,
+    name,
+  } = props;
+
+  return (
+    <div className="field" data-cy={dataCy}>
+      <label className="label" htmlFor={id}>
+        {label}
+      </label>
+
+      <div className="control has-icons-left has-icons-right">
+        <input
+          type={type}
+          name={name}
+          id={id}
+          placeholder={placeholder}
+          className={classNames('input', {
+            'is-danger': error,
+          })}
+          value={value}
+          onChange={onChange}
+        />
+
+        <span className="icon is-small is-left">
+          <i className={`fas ${lIcon}`} />
+        </span>
+
+        {error && (
+          <span
+            className="icon is-small is-right has-text-danger"
+            data-cy="ErrorIcon"
+          >
+            <i className="fas fa-exclamation-triangle" />
+          </span>
+        )}
+      </div>
+
+      {error && (
+        <p className="help is-danger" data-cy="ErrorMessage">
+          Name is required
+        </p>
+      )}
+    </div>
+  );
+};