Advertisement
Guest User

Untitled

a guest
Jan 26th, 2023
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2. import { createRoot } from 'react-dom/client';
  3. import { Provider, useDispatch, useSelector } from 'react-redux';
  4. import { store } from './app/store';
  5. import { selectName, setName } from './features/profileSlice';
  6. import { selectPosts, createPost, selectPostsByAuthor, selectAuthors } from './features/postsSlice';
  7. import './index.css'
  8.  
  9. function ProfileDetails(props) {
  10.   const dispatch = useDispatch();
  11.   const name = useSelector(selectName);
  12.   const posts = useSelector(selectPostsByAuthor(name));
  13.   const [nameField, setNameField] = useState(true);
  14.  
  15.   return (
  16.     <div className="details">
  17.       <h2>Profile</h2>
  18.      
  19.       <label htmlFor="name">Name: </label>
  20.      
  21.       <input
  22.         id="name" value={name} disabled={nameField}
  23.         onChange={(e) => dispatch(setName(e.target.value))}
  24.       />
  25.  
  26.       <button onClick={() => setNameField(!nameField)}>
  27.         {nameField ? "Change" : "Save"}
  28.       </button>
  29.  
  30.       <p>Posts: {posts.length}</p>
  31.     </div>
  32.   );
  33. }
  34.  
  35. function AppDetails(props) {
  36.   const posts = useSelector(selectPosts);
  37.   const users = useSelector(selectAuthors);
  38.  
  39.   return (
  40.     <div className="details">
  41.       <h2>App</h2>
  42.  
  43.       <p>Users: {users.length}</p>
  44.       <p>Total Posts: {posts.length}</p>
  45.     </div>
  46.   );
  47. }
  48.  
  49. function DetailsSection(props) {
  50.   return (
  51.     <div id="details-section">
  52.       <ProfileDetails />
  53.       <AppDetails />
  54.     </div>
  55.   );
  56. }
  57.  
  58. function CreatePost(props) {
  59.   const dispatch = useDispatch();
  60.   const name = useSelector(selectName);
  61.   const [text, setText] = useState('');
  62.  
  63.   const handleClick = (e) => {
  64.     e.preventDefault();
  65.     if(text !== '') {
  66.       dispatch(createPost({
  67.         author: name,
  68.         text: text
  69.       }));
  70.       setText('');
  71.     }
  72.   };
  73.  
  74.   return (
  75.     <div id="create-post">
  76.       <textarea
  77.         id="create-post-textarea"
  78.         value={text}
  79.         onChange={(e) => setText(e.target.value)}  
  80.       />
  81.       <button id="create-post-button" onClick={handleClick}>Post</button>
  82.     </div>
  83.   );
  84. }
  85.  
  86. function Posts(props) {
  87.   const posts = useSelector(selectPosts);
  88.   return (
  89.     <div>
  90.       {posts.map((item) =>
  91.         <div key={item.id} className="post">
  92.           <p className="post-text">{item.text}</p>
  93.           <p className="post-author">Posted By: {item.author}</p>
  94.         </div>
  95.       )}
  96.     </div>
  97.   );
  98. }
  99.  
  100. function PostsSection(props) {
  101.   return (
  102.     <div id="posts-section">
  103.       <CreatePost />
  104.       <Posts />
  105.     </div>
  106.   );
  107. }
  108.  
  109. function Main(props) {
  110.   return (
  111.     <div id="main">
  112.       <DetailsSection />
  113.       <PostsSection />
  114.     </div>
  115.   );
  116. }
  117.  
  118. createRoot(document.getElementById('root'))
  119. .render(
  120.   <React.StrictMode>
  121.     <Provider store={store}>
  122.       <Main />
  123.     </Provider>
  124.   </React.StrictMode>
  125. );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement