fix some bugs

src/components/CreateWorkPopup/CreateWorkPopup.jsx

@@ -1,47 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { useInput } from '../../hooks/useInput';
-import { createWork } from '../../store/works/actions/createWork';
-import { Input } from '../Input/Input';
-import style from './CreateWorkPopup.module.scss';
-
-export const CreateWorkPopup = ({ popupRef, close }) => {
-  const dispatch = useDispatch();
-  const title = useInput('');
-  const description = useInput('');
-  const { error } = useSelector((state) => state.works);
-
-  const handleCreateWork = (e) => {
-    e.preventDefault();
-    dispatch(
-      createWork({ title: title.value, description: description.value })
-    );
-    if (!error) close();
-  };
-
-  return (
-    <>
-      <div className={style.overlay}></div>
-      <div ref={popupRef} className={style.CreateWorkPopup}>
-        <header className={style.header}>
-          <span>Create Work</span>
-          <button onClick={close}>✕</button>
-        </header>
-        <form onSubmit={handleCreateWork} className={style.container}>
-          <Input
-            title={'Title'}
-            value={title.value}
-            onChange={title.onChange}
-          />
-          <Input
-            value={description.value}
-            onChange={description.onChange}
-            title={'Description'}
-          />
-          <button type={'submit'} className={style.save}>
-            Create
-          </button>
-        </form>
-      </div>
-    </>
-  );
-};

src/components/CreateWorkPopup/CreateWorkPopup.module.scss

@@ -1,63 +0,0 @@
-@import "../../scss/index.scss";
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  z-index: 1;
-}
-
-.CreateWorkPopup {
-  width: 760px;
-  height: 500px;
-  background-color: #131417;
-  border: 3px solid #2c303a;
-  border-radius: 6px;
-  z-index: 2;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  position: fixed;
-}
-
-.CreateWorkPopup span {
-  margin-left: 10px;
-  color: white;
-  font-size: 25px;
-  border-bottom: 3px solid $greenMain;
-  padding-bottom: 10px;
-}
-
-.header {
-  width: 100%;
-  margin: 10px 0 10px;
-  border-bottom: 3px solid #2c303a;
-  padding-bottom: 10px;
-
-  button {
-    @extend %buttonGrey;
-    margin: 5px 10px;
-    font-size: 20px;
-    padding: 0px 5px;
-    float: right;
-  }
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  margin-top: 10%;
-}
-
-.save {
-  @extend %buttonGrey;
-  font-size: 20px;
-  padding: 10px 20px;
-  cursor: pointer;
-}

src/components/Editor/Editor.jsx

@@ -13,9 +13,8 @@ import { ReactComponent as JsLogo } from '../../assets/img/jsLogo.svg';
 import { Section } from 'react-simple-resizer';
 import { saveFiles } from '../../store/currentWork/actions/saveFiles';
 import { setFormatCode } from '../../store/currentWork/currentWorkSlice';
-import { askToLogin } from '../../utils/askToLogin.js';
-import { useNavigate } from 'react-router-dom';
 import { showSuccessMessage } from '../../store/goMessage/goMessageSlice';
+import { openLoginPopup } from '../../store/auth/authSlice';
 
 const logos = {
   xml: <HtmlLogo />,
@@ -25,7 +24,6 @@ const logos = {
 
 export default function Editor({ language, displayName, value, onChange }) {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const editorRef = useRef(null);
   const { id, files } = useSelector((state) => state.currentWork);
   const { isAuth } = useSelector((state) => state.auth);
@@ -34,7 +32,7 @@ export default function Editor({ language, displayName, value, onChange }) {
     dispatch(setFormatCode());
 
     if (!isAuth) {
-      if (askToLogin()) navigate('/login');
+      dispatch(openLoginPopup());
     } else {
       dispatch(
         saveFiles({

src/components/HeaderPen/HeaderPen.jsx

@@ -9,6 +9,7 @@ import { FaPen } from 'react-icons/fa/index';
 import { GoMessage } from '../GoMessage/GoMessage';
 import { LoginPopup } from '../LoginPopup/LoginPopup';
 import { usePopup } from '../../hooks/usePopup.js';
+import { openLoginPopup } from '../../store/auth/authSlice';
 
 export const HeaderPen = () => {
   const dispatch = useDispatch();
@@ -24,18 +25,16 @@ export const HeaderPen = () => {
   const handleSaveFiles = () => {
     dispatch(setFormatCode());
 
-    if (!isAuth) {
-      loginPopup.open();
-    } else {
-      dispatch(
-        saveFiles({
-          id,
-          html: files.html.text,
-          css: files.css.text,
-          js: files.js.text,
-        })
-      );
-    }
+    if (!isAuth) return dispatch(openLoginPopup());
+
+    dispatch(
+      saveFiles({
+        id,
+        html: files.html.text,
+        css: files.css.text,
+        js: files.js.text,
+      })
+    );
   };
 
   return (

src/components/LoginPopup/LoginPopup.jsx

@@ -2,42 +2,31 @@ import { useEffect } from 'react';
 import { GrClose } from 'react-icons/gr';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { useInput } from '../../hooks/useInput';
-import { login } from '../../store/auth/actions/loginAction';
-import { Input } from '../Input/Input';
+import { closeLoginPopup } from '../../store/auth/authSlice';
 import style from '../LoginPopup/LoginPopup.module.scss';
 
-export const LoginPopup = ({ isOpen, close }) => {
+export const LoginPopup = () => {
   const dispatch = useDispatch();
-  const { isAuth, error } = useSelector((state) => state.auth);
-  const loginName = useInput('');
-  const password = useInput('');
-
-  const handleLogin = (e) => {
-    e.preventDefault();
-
-    const userData = {
-      login: loginName.value,
-      password: password.value,
-    };
-
-    console.log(dispatch(login(userData)));
-  };
+  const { isAuth, error, isLoginPopupOpen } = useSelector(
+    (state) => state.auth
+  );
 
   useEffect(() => {
-    if (isAuth) close();
-    if (error) {
-      loginName.setValue('');
-      password.setValue('');
-    }
+    if (isAuth) dispatch(closeLoginPopup());
   }, [isAuth, error]);
 
-  if (!isOpen) return null;
+  if (!isLoginPopupOpen) return null;
   return (
     <>
-      <div className={style.overlay} onClick={close} />
+      <div
+        className={style.overlay}
+        onClick={() => dispatch(closeLoginPopup())}
+      />
       <div className={style.loginPopup}>
-        <GrClose className={style.close} onClick={close} />
+        <GrClose
+          className={style.close}
+          onClick={() => dispatch(closeLoginPopup())}
+        />
         <div className={style.tableOfContents}>
           <h1>Hold up!</h1>
           <span>

src/components/WorkCardPopup/WorkCardPopup.jsx

@@ -5,24 +5,32 @@ import style from './WorkCardPopup.module.scss';
 import { MdDriveFileRenameOutline } from 'react-icons/md/index';
 import { MdOutlineDescription } from 'react-icons/md/index';
 import { BiTrash } from 'react-icons/bi/index';
+import { useInput } from '../../hooks/useInput';
+import { usePopup } from '../../hooks/usePopup';
+import { PopupWrapper } from '../PopupWrapper/PopupWrapper';
+import { Input } from '../Input/Input';
 
 export const WorkCardPopup = ({ menuRef, isVisible, work }) => {
   const dispatch = useDispatch();
+  const rename = useInput();
+  const changeDesc = useInput();
+  const renamePopup = usePopup();
 
   const renameWork = (e) => {
     e.preventDefault();
+    renamePopup.open();
+    // const newTitle = rename.value;
+    // // const newTitle = prompt(`rename work: ${work.title}`, work.title);
+    // if (newTitle) {
+    //   const updatedWorkInfo = {
+    //     id: work._id,
+    //     title: newTitle,
+    //     description: work.description,
+    //     files: work.files,
+    //   };
 
-    const newTitle = prompt(`rename work: ${work.title}`, work.title);
-    if (newTitle) {
-      const updatedWorkInfo = {
-        id: work._id,
-        title: newTitle,
-        description: work.description,
-        files: work.files,
-      };
-
-      dispatch(updateWorkInfo(updatedWorkInfo));
-    }
+    //   dispatch(updateWorkInfo(updatedWorkInfo));
+    // }
   };
 
   const changeDescription = (e) => {
@@ -51,19 +59,30 @@ export const WorkCardPopup = ({ menuRef, isVisible, work }) => {
 
   if (isVisible)
     return (
-      <ul ref={menuRef} className={style.menuPopup}>
-        <li onClick={renameWork}>
-          <MdDriveFileRenameOutline className={style.rename} /> Rename work
-        </li>
-        <li onClick={changeDescription}>
-          <MdOutlineDescription className={style.changeDesc} />
-          Change Description
-        </li>
-        <li className={style.delete} onClick={handleDelete}>
-          <BiTrash />
-          Delete work
-        </li>
-      </ul>
+      <>
+        <ul ref={menuRef} className={style.menuPopup}>
+          <li onClick={renameWork}>
+            <MdDriveFileRenameOutline className={style.rename} /> Rename work
+          </li>
+          <li onClick={changeDescription}>
+            <MdOutlineDescription className={style.changeDesc} />
+            Change Description
+          </li>
+          <li className={style.delete} onClick={handleDelete}>
+            <BiTrash />
+            Delete work
+          </li>
+        </ul>
+
+        <PopupWrapper
+          isOpen={renamePopup.isPopupVisible}
+          title={'Change title'}
+        >
+          <form>
+            <Input title={'new Title'} />
+          </form>
+        </PopupWrapper>
+      </>
     );
   return null;
 };

src/hooks/useInput.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from 'react';
 
 export const useInput = (initialValue, validator) => {
   const [value, setValue] = useState(initialValue);

src/pages/YourWorksPage/YourWorksPage.jsx

@@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useEffect } from 'react';
 import { getUserIdFromJwt } from '../../utils/getUserIdFromJwt';
 import { usePopup } from '../../hooks/usePopup';
-import { CreateWorkPopup } from '../../components/CreateWorkPopup/CreateWorkPopup';
 import { LoadingPage } from '../LoadingPage/LoadingPage';
 import { fetchWorks } from '../../store/works/actions/fetchWorks';
 import { Works } from '../../components/Works/Works';
@@ -37,7 +36,7 @@ export const YourWorksPage = () => {
           <button onClick={newPenPopup.open}>+</button>
         </div>
 
-        <Works openPopup={open} />
+        <Works openPopup={newPenPopup.open} />
       </div>
 
       <PopupWrapper
@@ -52,8 +51,6 @@ export const YourWorksPage = () => {
           <button>Create</button>
         </form>
       </PopupWrapper>
-
-      {/* <CreateWorkPopup popupRef={ref} close={close} /> */}
     </MainLayout>
   );
 };

src/store/auth/authSlice.js

@@ -1,17 +1,24 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { login } from "./actions/loginAction";
-import { registration } from "./actions/registrationAction";
+import { createSlice } from '@reduxjs/toolkit';
+import { login } from './actions/loginAction';
+import { registration } from './actions/registrationAction';
 
 const initialState = {
-  isAuth: localStorage.getItem("authToken") ? true : false,
+  isAuth: localStorage.getItem('authToken') ? true : false,
   loading: false,
   error: null,
+  isLoginPopupOpen: false,
 };
 
 export const authSlice = createSlice({
-  name: "auth",
+  name: 'auth',
   initialState,
   reducers: {
+    openLoginPopup(state) {
+      state.isLoginPopupOpen = true;
+    },
+    closeLoginPopup(state) {
+      state.isLoginPopupOpen = false;
+    },
     logout(state) {
       state.isAuth = false;
     },
@@ -44,4 +51,4 @@ export const authSlice = createSlice({
   },
 });
 
-export const { logout } = authSlice.actions;
+export const { logout, openLoginPopup, closeLoginPopup } = authSlice.actions;

src/utils/askToLogin.js

@@ -1,8 +0,0 @@
-export const askToLogin = () => {
-  const unAuthMessage = `
-    You’ll have to Log In or Sign Up  to save your Pen.
-    Don’t worry! All your work will be saved to your account.`;
-
-  // eslint-disable-next-line no-restricted-globals
-  return confirm(unAuthMessage);
-};