progressing my project

src/App.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import { Provider }   from 'react-redux';
-import ConnectedRouts from './components/Routers';
-import store from './reducers';
-import './App.css';
+import React from "react";
+import { Provider } from "react-redux";
+import ConnectedRouts from "./components/Routers";
+import store from "./reducers";
+import "./App.css";
 
 function App() {
-    return (
-        <>
-            <Provider store = {store}>
-            <ConnectedRouts/>
-            </Provider>
-        </>
-    )
+  return (
+    <>
+      <Provider store={store}>
+        <ConnectedRouts />
+      </Provider>
+    </>
+  );
 }
-    
-export default App;
+
+export default App;

src/App.test.js

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/actions/actionAuthLogin.js

@@ -1 +1 @@
-export const actionAuthLogin = token => ({type: 'LOGIN', token});
+export const actionAuthLogin = (token) => ({ type: "LOGIN", token });

src/actions/actionAuthLogout.js

@@ -1 +1 @@
-export const actionAuthLogout = () => ({type: 'LOGOUT'});
+export const actionAuthLogout = () => ({ type: "LOGOUT" });

src/actions/actionFindUser.js

@@ -1,8 +1,8 @@
 import { actionPromise } from "./actionPromise";
-import { userFind  } from "./requests";
+import { userFind } from "./requests";
 
 export const actionFindUser = () => async (dispatch, getState) => {
-    return await dispatch(
-      actionPromise("findUser", userFind(getState()?.a?.payload?.sub?.id))
-    );
-};
+  return await dispatch(
+    actionPromise("findUser", userFind(getState()?.a?.payload?.sub?.id))
+  );
+};

src/actions/actionFullAva.js

@@ -3,7 +3,7 @@ import { actionSetAva } from "./actionSetAva";
 import { actionFindUser } from "./actionFindUser";
 
 export const actionFullAva = (file) => async (dispatch) => {
-    let result = await dispatch(actionUploadFile(file))
-    await dispatch(actionSetAva(result._id))
-    await dispatch(actionFindUser())
-};
+  let result = await dispatch(actionUploadFile(file));
+  await dispatch(actionSetAva(result._id));
+  await dispatch(actionFindUser());
+};

src/actions/actionFullLogin.js

@@ -2,13 +2,13 @@ import { actionLogin } from "./actionLogin";
 import { actionAuthLogin } from "./actionAuthLogin";
 import { actionFindUser } from "./actionFindUser";
 
-export const actionFullLogin = (login, password) => async(dispatch) => {
-    let result = await dispatch(actionLogin(login, password))
-    if (result !== null){
-        dispatch(actionAuthLogin(result))
-    } else {
-        alert ('That user doesn’t exist!')
-        localStorage.clear()
-    };
-    await dispatch(actionFindUser());
-};
+export const actionFullLogin = (login, password) => async (dispatch) => {
+  let result = await dispatch(actionLogin(login, password));
+  if (result !== null) {
+    dispatch(actionAuthLogin(result));
+  } else {
+    alert("That user doesn’t exist!");
+    localStorage.clear();
+  }
+  await dispatch(actionFindUser());
+};

src/actions/actionFullRegister.js

@@ -1,11 +1,11 @@
 import { actionReg } from "./actionReg";
 import { actionFullLogin } from "./actionFullLogin";
 
-export const actionFullRegister = (login, password) => async(dispatch) => {
-    let result = await dispatch(actionReg(login, password))
-    if(result?.data?.createUser !== null) {
-        dispatch(actionFullLogin(login, password))
-    } else {
-        alert('Such a user already exists!')
-    };
-};
+export const actionFullRegister = (login, password) => async (dispatch) => {
+  let result = await dispatch(actionReg(login, password));
+  if (result?.data?.createUser !== null) {
+    dispatch(actionFullLogin(login, password));
+  } else {
+    alert("Such a user already exists!");
+  }
+};

src/actions/actionImgFind.js

@@ -1,6 +1,6 @@
-import {actionPromise} from "./actionPromise";
-import {imgFind} from "./requests"
+import { actionPromise } from "./actionPromise";
+import { imgFind } from "./requests";
 
 export const actionImgFind = () => async (dispatch) => {
-    return await dispatch(actionPromise("img", imgFind()));
-};
+  return await dispatch(actionPromise("img", imgFind()));
+};

src/actions/actionLogin.js

@@ -1,4 +1,5 @@
 import { actionPromise } from "./actionPromise";
 import { log } from "./requests";
 
-export const actionLogin = (login, password) => actionPromise("login", log(login, password));
+export const actionLogin = (login, password) =>
+  actionPromise("login", log(login, password));

src/actions/actionPending.js

@@ -1 +1,5 @@
-export const actionPending = name => ({type: 'PROMISE', status: 'PENDING', name});
+export const actionPending = (name) => ({
+  type: "PROMISE",
+  status: "PENDING",
+  name,
+});

src/actions/actionPromise.js

@@ -2,15 +2,13 @@ import { actionPending } from "./actionPending";
 import { actionResolved } from "./actionResolved";
 import { actionRejected } from "./actionRejected";
 
-export const actionPromise = (name, promise) => 
-    async dispatch => {
-        dispatch(actionPending(name))
-        try{
-            let payload = await promise
-            dispatch(actionResolved(name, payload)) 
-            return payload
-        }
-        catch(error){
-             dispatch(actionRejected(name, error))
-        };
-    };
+export const actionPromise = (name, promise) => async (dispatch) => {
+  dispatch(actionPending(name));
+  try {
+    let payload = await promise;
+    dispatch(actionResolved(name, payload));
+    return payload;
+  } catch (error) {
+    dispatch(actionRejected(name, error));
+  }
+};

src/actions/actionReg.js

@@ -1,4 +1,5 @@
 import { actionPromise } from "./actionPromise";
 import { reg } from "./requests";
 
-export const actionReg = (login, password) => actionPromise("reg", reg(login, password));
+export const actionReg = (login, password) =>
+  actionPromise("reg", reg(login, password));

src/actions/actionRejected.js

@@ -1 +1,6 @@
-export const actionRejected = (name, error) => ({type: 'PROMISE', status: 'REJECTED', name, error});
+export const actionRejected = (name, error) => ({
+  type: "PROMISE",
+  status: "REJECTED",
+  name,
+  error,
+});

src/actions/actionResolved.js

@@ -1 +1,6 @@
-export const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload});
+export const actionResolved = (name, payload) => ({
+  type: "PROMISE",
+  status: "RESOLVED",
+  name,
+  payload,
+});

src/actions/actionSearch.js

@@ -2,5 +2,5 @@ import { search } from "./requests";
 import { actionPromise } from "./actionPromise";
 
 export const actionSearch = (string) => async (dispatch) => {
-    return await dispatch(actionPromise('searchSnippet', search(string)))
-};
+  return await dispatch(actionPromise("searchSnippet", search(string)));
+};

src/actions/actionSetAva.js

@@ -2,7 +2,7 @@ import { actionPromise } from "./actionPromise";
 import { setAva } from "./requests";
 
 export const actionSetAva = (id) => async (dispatch, getState) => {
-    return await dispatch(
-      actionPromise("setAva", setAva(getState()?.a?.payload?.sub?.id, id))
-    );
-};
+  return await dispatch(
+    actionPromise("setAva", setAva(getState()?.a?.payload?.sub?.id, id))
+  );
+};

src/actions/actionSnippetAdd.js

@@ -2,11 +2,11 @@ import { actionPromise } from "./actionPromise";
 import { snippetAdd } from "./requests";
 
 export const actionSnippetAdd =
-(title, description, files, idSnippet) => async (dispatch) => {
-  return await dispatch(
-    actionPromise(
-      "addSnippet",
-      snippetAdd(title, description, files, idSnippet)
-    )
-  );
-};
+  (title, description, files, idSnippet) => async (dispatch) => {
+    return await dispatch(
+      actionPromise(
+        "addSnippet",
+        snippetAdd(title, description, files, idSnippet)
+      )
+    );
+  };

src/actions/actionSnippetById.js

@@ -1,10 +1,6 @@
 import { actionPromise } from "./actionPromise";
 import { snippetById } from "./requests";
 
-export const actionSnippetById =
-    (id) => async (dispatch) => {
-        return await dispatch(
-            actionPromise("findSnippetById",
-            snippetById(id))
-        )
-    };
+export const actionSnippetById = (id) => async (dispatch) => {
+  return await dispatch(actionPromise("findSnippetById", snippetById(id)));
+};

src/actions/actionSnippetFindByOwner.js

@@ -2,5 +2,5 @@ import { actionPromise } from "./actionPromise";
 import { snippetByOwner } from "./requests";
 
 export const actionSnippetFindByOwner = (id) => async (dispatch) => {
-    return await dispatch(actionPromise("findSnippet", snippetByOwner(id)))
-};
+  return await dispatch(actionPromise("findSnippet", snippetByOwner(id)));
+};

src/actions/actionUploadFile.js

@@ -1,18 +1,18 @@
 import { actionPromise } from "./actionPromise";
 
 export const actionUploadFile = (files) => async (dispatch) => {
-    let fd = new FormData();
-    fd.append("photo", files);
-    return await dispatch(
-      actionPromise(
-        "upload",
-        fetch("/upload", {
-          method: "POST",
-          headers: localStorage.authToken
-            ? { Authorization: "Bearer " + localStorage.authToken }
-            : {},
-          body: fd,
-        }).then((res) => res.json())
-      )
-    );
-};
+  let fd = new FormData();
+  fd.append("photo", files);
+  return await dispatch(
+    actionPromise(
+      "upload",
+      fetch("/upload", {
+        method: "POST",
+        headers: localStorage.authToken
+          ? { Authorization: "Bearer " + localStorage.authToken }
+          : {},
+        body: fd,
+      }).then((res) => res.json())
+    )
+  );
+};

src/actions/gql.js

@@ -1,12 +1,13 @@
-const getGQL = url => 
-    (query, variables) =>
-        fetch(url , {
-            method: 'POST',
-            headers: {
-                "content-type": "application/json",
-                ...(localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {})
-            },
-            body: JSON.stringify({query, variables})
-        }).then(res => res.json())
+const getGQL = (url) => (query, variables) =>
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      ...(localStorage.authToken
+        ? { Authorization: "Bearer " + localStorage.authToken }
+        : {}),
+    },
+    body: JSON.stringify({ query, variables }),
+  }).then((res) => res.json());
 
-export const gql = getGQL("/graphql");
+export const gql = getGQL("/graphql");

src/actions/requests.js

@@ -1,36 +1,36 @@
 import { gql } from "./gql";
 
-export const log = async(login, password) => {
-    let query = `query login($login:String!, $password:String!) {
+export const log = async (login, password) => {
+  let query = `query login($login:String!, $password:String!) {
         login(login: $login, password: $password)
-    }`
+    }`;
 
-    let variables = {"login":login, "password":password}
+  let variables = { login: login, password: password };
 
-    let token = await gql(query, variables)
-    localStorage.authToken = token.data.login
-    console.log(token)
-    return token.data.login
+  let token = await gql(query, variables);
+  localStorage.authToken = token.data.login;
+  console.log(token);
+  return token.data.login;
 };
 
-export const reg = async(login, password) => {
-    let query = `mutation reg($login:String!, $password:String!) {
+export const reg = async (login, password) => {
+  let query = `mutation reg($login:String!, $password:String!) {
     createUser(
         login: $login,
         password: $password
 
     ){
        _id
-    }}`
-    
-    let variables = {"login":login, "password":password}
+    }}`;
+
+  let variables = { login: login, password: password };
 
-    let res = await gql(query, variables)
-    return res
+  let res = await gql(query, variables);
+  return res;
 };
 
 export const imgFind = async () => {
-    return await gql(`query imgFind{
+  return await gql(`query imgFind{
       ImageFind(query:"[{}]"){
         url owner{
           nick
@@ -40,48 +40,48 @@ export const imgFind = async () => {
 };
 
 export const userFind = (_id) => {
-    return gql(
-      `query userOne($query:String) {
+  return gql(
+    `query userOne($query:String) {
             UserFindOne(query:$query){
                 _id avatar{
                 url
                 }
             }
         }`,
-      { query: JSON.stringify([{ _id }]) }
-    );
-  };
+    { query: JSON.stringify([{ _id }]) }
+  );
+};
 
 export const setAva = async (idUser, id) => {
-    let query = `mutation setAvatar($idUser:String , $idAvatar:ID){ 
+  let query = `mutation setAvatar($idUser:String , $idAvatar:ID){ 
       UserUpsert(user:{_id: $idUser, avatar: {_id: $idAvatar}}){
           _id, avatar{
               url
           }
       }
-  }`
+  }`;
+
+  let variables = { idUser: idUser, idAvatar: id };
 
-    let variables = { idUser: idUser, idAvatar: id }
-  
-    let res = await gql(query, variables)
-    return res
+  let res = await gql(query, variables);
+  return res;
 };
 
-export const snippetAdd = async (title, description, files , idSnippet) => {
-    let query = `mutation newSnippet($snippet:SnippetInput) {
+export const snippetAdd = async (title, description, files, idSnippet) => {
+  let query = `mutation newSnippet($snippet:SnippetInput) {
       SnippetUpsert(snippet:$snippet){
         _id
       }
     }`;
-  
-    let qVariables = { snippet: { title, description, files, _id: idSnippet }  };
-  
-    let res = await gql(query, qVariables);
-    return res;
+
+  let qVariables = { snippet: { title, description, files, _id: idSnippet } };
+
+  let res = await gql(query, qVariables);
+  return res;
 };
 
-export const snippetById = async(id) => {
-    let query = `query snippetFind($query:String){
+export const snippetById = async (id) => {
+  let query = `query snippetFind($query:String){
       SnippetFind(query:$query){
                         owner{
                           _id 
@@ -90,16 +90,17 @@ export const snippetById = async(id) => {
              type text name
            }
         }
-  }`
+  }`;
 
-    let variables = {query: JSON.stringify([{_id: id }])}
-  
-    let res = gql(query, variables)
-    return res
+  let variables = {
+    query: JSON.stringify([{ _id: id }]),
+  };
+  let res = gql(query, variables);
+  return res;
 };
 
 export const snippetByOwner = async (id) => {
-    let query = `query snippetFind($query:String){
+  let query = `query snippetFind($query:String){
         SnippetFind(query:$query){
                           owner{
                             _id 
@@ -108,17 +109,19 @@ export const snippetByOwner = async (id) => {
                type text name
             }
         }
-  }`
+  }`;
+
+  let variables = {
+    query: JSON.stringify([{ ___owner: id }, { sort: [{ _id: -1 }] }]),
+  };
 
-    let variables = {query: JSON.stringify([{___owner: id } , {sort:[{_id: -1}]}])}
-  
-    let res = gql(query, variables)
-    return res
+  let res = gql(query, variables);
+  return res;
 };
 
 export const search = async (string) => {
-    return gql(
-      `query snippetFind($query:String){
+  return gql(
+    `query snippetFind($query:String){
         SnippetFind(query:$query){
           owner {
             _id login
@@ -128,11 +131,18 @@ export const search = async (string) => {
              }
           }
     }`,
-      { query: JSON.stringify([
+    {
+      query: JSON.stringify([
         {
-            $or: [{title: `/${string.trim().split(" ").join('|')}/`},{description: `/${string.trim().split(" ").join('|')}/`}] 
+          $or: [
+            { title: `/${string.trim().split(" ").join("|")}/` },
+            { description: `/${string.trim().split(" ").join("|")}/` },
+          ],
         },
         {
-          sort: [{title: 1}]}]) }
-    )
-};
+          sort: [{ title: 1 }],
+        },
+      ]),
+    }
+  );
+};

src/components/Ava.js

@@ -4,7 +4,15 @@ import "./Header.css";
 import icon from "../user.png";
 
 function AvaLogo({ link }) {
-    return <img src= {link ? "http://localhost:3000/" + link : icon} className = 'avatar' alt='ava'></img>
+  return (
+    <img
+      src={link ? "http://localhost:3000/" + link : icon}
+      className="avatar"
+      alt="ava"
+    ></img>
+  );
 }
 
-export const ConnectedAvaLogo = connect(state => ({link: state?.p?.findUser?.payload?.data?.UserFindOne?.avatar?.url}))(AvaLogo);
+export const ConnectedAvaLogo = connect((state) => ({
+  link: state?.p?.findUser?.payload?.data?.UserFindOne?.avatar?.url,
+}))(AvaLogo);

src/components/Editor.css

@@ -1,15 +1,15 @@
 .all_editors {
-    display: inline-block;
-    width: 464px;
-    padding-left: 10px;
-    color: rgb(196, 192, 192);
+  display: inline-block;
+  width: 464px;
+  padding-left: 10px;
+  color: rgb(196, 192, 192);
 }
 
 select {
-    margin: 5px;
-    font-size: 17px;
+  margin: 5px;
+  font-size: 17px;
 }
 
 .editor {
-    margin-top: 5px;
-}
+  margin-top: 5px;
+}

src/components/EditorsPage.css

@@ -1,94 +1,94 @@
 body {
-    margin-top: 20px;
+  margin-top: 20px;
 }
 
 .button_plus {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    margin-left: 47.2%;
-    margin-bottom: 20px;
-    width: 6em;
-    height: 2.5em;
-    cursor: pointer;
-    margin-top: 7px;
-    line-height: 2.4em;
-    vertical-align: middle;
-    font-weight: 550;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    color: rgb(41, 14, 66);
-    outline: none;
-    border: 1px solid rgba(110,121,128,.8);
-    border-top-color: rgba(0,0,0,.3);
-    border-radius: 5px;
-    background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(106, 70, 148));
-    box-shadow:
-     0 -1px rgba(10,21,28,.9) inset,
-     0 1px rgba(255,255,255,.5) inset;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: 47.2%;
+  margin-bottom: 20px;
+  width: 6em;
+  height: 2.5em;
+  cursor: pointer;
+  margin-top: 7px;
+  line-height: 2.4em;
+  vertical-align: middle;
+  font-weight: 550;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  color: rgb(41, 14, 66);
+  outline: none;
+  border: 1px solid rgba(110, 121, 128, 0.8);
+  border-top-color: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background: rgb(206, 220, 231)
+    linear-gradient(rgb(206, 220, 231), rgb(106, 70, 148));
+  box-shadow: 0 -1px rgba(10, 21, 28, 0.9) inset,
+    0 1px rgba(255, 255, 255, 0.5) inset;
 }
 
 .button_plus:hover {
-    background: linear-gradient(#baa7cc, #9285b4);
+  background: linear-gradient(#baa7cc, #9285b4);
 }
 
 .pane {
-    background-color:white;
-    width: 99%;
-    height: 300px;
-    margin-left: 10px;
-    margin-bottom: 30px;
-    border: dotted;
+  background-color: white;
+  width: 99%;
+  height: 300px;
+  margin-left: 10px;
+  margin-bottom: 30px;
+  border: dotted;
 }
 
 .input_title {
-    margin-left: 37.5%;
-    width: 400px;
+  margin-left: 37.5%;
+  width: 400px;
 }
 
 .text_desc {
-    margin-left: 37.5%;
-    width: 400px;
+  margin-left: 37.5%;
+  width: 400px;
 }
 
 .text {
-    margin-left: 37.5%;
-    font-size: 17px;
-    color: rgb(197, 193, 226);
+  margin-left: 37.5%;
+  font-size: 17px;
+  color: rgb(197, 193, 226);
 }
 
 .button_submit {
-    cursor: pointer;
-    margin-bottom: 90px;
-    margin-left: 46%;
-    width: 10em;
-    height: 2.5em;
-    cursor: pointer;
-    margin-top: 30px;
-    line-height: 2.4em;
-    vertical-align: middle;
-    font-weight: 550;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    color: rgb(41, 14, 66);
-    outline: none;
-    border: 1px solid rgba(110,121,128,.8);
-    border-top-color: rgba(0,0,0,.3);
-    border-radius: 5px;
-    background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(106, 70, 148));
-    box-shadow:
-     0 -1px rgba(10,21,28,.9) inset,
-     0 1px rgba(255,255,255,.5) inset;
+  cursor: pointer;
+  margin-bottom: 90px;
+  margin-left: 46%;
+  width: 10em;
+  height: 2.5em;
+  cursor: pointer;
+  margin-top: 30px;
+  line-height: 2.4em;
+  vertical-align: middle;
+  font-weight: 550;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  color: rgb(41, 14, 66);
+  outline: none;
+  border: 1px solid rgba(110, 121, 128, 0.8);
+  border-top-color: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background: rgb(206, 220, 231)
+    linear-gradient(rgb(206, 220, 231), rgb(106, 70, 148));
+  box-shadow: 0 -1px rgba(10, 21, 28, 0.9) inset,
+    0 1px rgba(255, 255, 255, 0.5) inset;
 }
 
 .button_submit:hover {
-    background: linear-gradient(#baa7cc, #9285b4);
-} 
+  background: linear-gradient(#baa7cc, #9285b4);
+}
 
 .styles {
-   padding-left: 10px;
-   color: rgb(196, 192, 192);
-   padding-bottom: 30px;
-}
+  padding-left: 10px;
+  color: rgb(196, 192, 192);
+  padding-bottom: 30px;
+}

src/components/Header.css

@@ -1,93 +1,93 @@
-body{
-    margin:0;
+body {
+  margin: 0;
 }
-  
+
 nav {
-    display: flex;
-    margin-bottom: 30px;
-    padding: 5px;
-    background: linear-gradient(#a088bd, #c7a9aa);
+  display: flex;
+  margin-bottom: 30px;
+  padding: 5px;
+  background: linear-gradient(#a088bd, #c7a9aa);
 }
 
 .img_logo {
-    width: 100px;
-    margin-right: 1035px;
-    border: 1.5px solid rgb(72, 70, 75);
-    margin-top: 10px;
-    margin-left: 15px;
+  width: 100px;
+  margin-right: 1035px;
+  border: 1.5px solid rgb(72, 70, 75);
+  margin-top: 10px;
+  margin-left: 15px;
 }
 
 .img_logo:hover {
-    border: 1.5px solid rgb(231, 224, 224);
-    width: 99px;
+  border: 1.5px solid rgb(231, 224, 224);
+  width: 99px;
 }
 
 .logaut a {
-    color: rgb(23, 6, 39);
-    text-decoration: none;
-    font-size: 20px;
+  color: rgb(23, 6, 39);
+  text-decoration: none;
+  font-size: 20px;
 }
 
 .logaut button {
-    position: relative;
-    display: inline-block;
-    width: 6.5em;
-    height: 2.5em;
-    cursor: pointer;
-    margin-top: 7px;
-    margin-bottom: 5px;
-    vertical-align: middle;
-    font-weight: 550;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    color: rgb(41, 14, 66);
-    outline: none;
-    border: 1px solid rgba(110,121,128,.8);
-    border-top-color: rgba(0,0,0,.3);
-    border-radius: 5px;
-    background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(106, 70, 148));
-    box-shadow:
-     0 -1px rgba(10,21,28,.9) inset,
-     0 1px rgba(255,255,255,.5) inset;
+  position: relative;
+  display: inline-block;
+  width: 6.5em;
+  height: 2.5em;
+  cursor: pointer;
+  margin-top: 7px;
+  margin-bottom: 5px;
+  vertical-align: middle;
+  font-weight: 550;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  color: rgb(41, 14, 66);
+  outline: none;
+  border: 1px solid rgba(110, 121, 128, 0.8);
+  border-top-color: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background: rgb(206, 220, 231)
+    linear-gradient(rgb(206, 220, 231), rgb(106, 70, 148));
+  box-shadow: 0 -1px rgba(10, 21, 28, 0.9) inset,
+    0 1px rgba(255, 255, 255, 0.5) inset;
 }
 
 .logaut button:hover {
-    background: linear-gradient(#baa7cc, #9285b4);
-} 
+  background: linear-gradient(#baa7cc, #9285b4);
+}
 
 .avatar {
-   margin-top: 25px;
-   margin-right: 10px;
-   width: 70px;
-   height: 70px;
+  margin-top: 25px;
+  margin-right: 10px;
+  width: 70px;
+  height: 70px;
 }
 
 .button_search {
-    cursor: pointer;
-    margin-top: 50px;
-    margin-right: 10px;
-    position: relative;
-    display: inline-block;
-    width: 6.5em;
-    height: 2.5em;
-    margin-bottom: 5px;
-    vertical-align: middle;
-    font-weight: 550;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-    color: rgb(41, 14, 66);
-    outline: none;
-    border: 1px solid rgba(110,121,128,.8);
-    border-top-color: rgba(0,0,0,.3);
-    border-radius: 5px;
-    background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(106, 70, 148));
-    box-shadow:
-     0 -1px rgba(10,21,28,.9) inset,
-     0 1px rgba(255,255,255,.5) inset;
+  cursor: pointer;
+  margin-top: 50px;
+  margin-right: 10px;
+  position: relative;
+  display: inline-block;
+  width: 6.5em;
+  height: 2.5em;
+  margin-bottom: 5px;
+  vertical-align: middle;
+  font-weight: 550;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  color: rgb(41, 14, 66);
+  outline: none;
+  border: 1px solid rgba(110, 121, 128, 0.8);
+  border-top-color: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background: rgb(206, 220, 231)
+    linear-gradient(rgb(206, 220, 231), rgb(106, 70, 148));
+  box-shadow: 0 -1px rgba(10, 21, 28, 0.9) inset,
+    0 1px rgba(255, 255, 255, 0.5) inset;
 }
 
 .button_search:hover {
-    background: linear-gradient(#baa7cc, #9285b4);
-}
+  background: linear-gradient(#baa7cc, #9285b4);
+}

src/components/Header.js

@@ -4,13 +4,13 @@ import { ConnectFormUpload } from "../pages/FormUpload";
 import "./Header.css";
 
 const Header = () => {
-    return (
+  return (
     <nav className="navbar_header">
-        <ImgLogo />
-        <ConnectFormUpload />
-        <ConnectedNick/>
+      <ImgLogo />
+      <ConnectFormUpload />
+      <ConnectedNick />
     </nav>
-    )
-}
+  );
+};
 
-export default Header;
+export default Header;

src/components/Routers.js

@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  Redirect,
+} from "react-router-dom";
 import * as createHistory from "history";
 import { connect } from "react-redux";
 import { actionFullLogin } from "../actions/actionFullLogin";
@@ -15,33 +20,40 @@ import ConnectedProject from "../pages/Project";
 
 const history = createHistory.createBrowserHistory();
 
-const ConnectLoginForm = connect(null, {onLogin:actionFullLogin}) (LoginForm);
+const ConnectLoginForm = connect(null, { onLogin: actionFullLogin })(LoginForm);
 
-const ConnectFormReg = connect(null, {FormReg:actionFullRegister}) (FormReg);
+const ConnectFormReg = connect(null, { FormReg: actionFullRegister })(FormReg);
 
-const Routs = ({token}) => {
-    return (
-        <div className="App">
-          <Router history = {history}>
-            {token && <Switch>
-                <Redirect from="/login" to="/work" />
-                <Redirect from="/reg" to="/work" />
-                <Route exact path='/work' component={Home} />
-                <Route path='/cabinet' component={Cabinet}/>
-                <Route path='/projects' component={CProjects}/>
-                <Route path='/project' component={ConnectedProject}/>
-                <Route path='/search' component={ConnectFormSearch}/>
-            </Switch>}
-            {!token && <Switch>
-                <Route path='/login' component={ConnectLoginForm}/>
-                <Route path='/reg' component={ConnectFormReg}/>
-                <Route path='/' component={Main}/>
-            </Switch>}
-          </Router>
-        </div>
-    )
-}
+const Routs = ({ token }) => {
+  return (
+    <div className="App">
+      <Router history={history}>
+        {token && (
+          <Switch>
+            <Redirect from="/login" to="/work" />
+            <Redirect from="/reg" to="/work" />
+            <Route exact path="/work" component={Home} />
+            <Route path="/cabinet" component={Cabinet} />
+            <Route path="/projects" component={CProjects} />
+            <Route path="/project" component={ConnectedProject} />
+            <Route path="/search" component={ConnectFormSearch} />
+          </Switch>
+        )}
+        {!token && (
+          <Switch>
+            <Route path="/login" component={ConnectLoginForm} />
+            <Route path="/reg" component={ConnectFormReg} />
+            <Route path="/" component={Main} />
+          </Switch>
+        )}
+      </Router>
+    </div>
+  );
+};
 
-const ConnectedRouts = connect(state =>({token: state.a.token}), null)(Routs);
+const ConnectedRouts = connect(
+  (state) => ({ token: state.a.token }),
+  null
+)(Routs);
 
-export default ConnectedRouts;
+export default ConnectedRouts;

src/components/User.js

@@ -1,15 +1,16 @@
 import { connect } from "react-redux";
 
-const Nick = ({nick}) => {
-    return (
-        <>
-        <div>
-            <p>{nick}</p>
-        </div>
-        
-        </>
-    )
-}
-    
-const ConnectNickName = connect(state => ({nick: state?.a?.payload?.sub?.login}))(Nick);
-export default ConnectNickName;
+const Nick = ({ nick }) => {
+  return (
+    <>
+      <div>
+        <p>{nick}</p>
+      </div>
+    </>
+  );
+};
+
+const ConnectNickName = connect((state) => ({
+  nick: state?.a?.payload?.sub?.login,
+}))(Nick);
+export default ConnectNickName;

src/components/UserHeader.js

@@ -3,20 +3,23 @@ import { actionAuthLogout } from "../actions/actionAuthLogout";
 import "./Header.css";
 
 const NickName = ({ nick, onLogOut }) => {
-    return (
-      <>
-        <div className='logaut'>
-            <a href = '/cabinet'>{nick}</a>
-            <a href="/cabinet">
-                <button className='cabinet'>
-                    My Cabinet
-                </button>
-            </a>
-            <a href = '/'><button onClick = {() => (onLogOut())}>Log out</button></a>
-        </div>
-      </>
-    )
-}
-    
-const ConnectedNick = connect((state) => ({nick: state?.a?.payload?.sub?.login, logedIn: state.a.token}),{onLogOut:actionAuthLogout})(NickName);
-export default ConnectedNick;
+  return (
+    <>
+      <div className="logaut">
+        <a href="/cabinet">{nick}</a>
+        <a href="/cabinet">
+          <button className="cabinet">My Cabinet</button>
+        </a>
+        <a href="/">
+          <button onClick={() => onLogOut()}>Log out</button>
+        </a>
+      </div>
+    </>
+  );
+};
+
+const ConnectedNick = connect(
+  (state) => ({ nick: state?.a?.payload?.sub?.login, logedIn: state.a.token }),
+  { onLogOut: actionAuthLogout }
+)(NickName);
+export default ConnectedNick;

src/helpers/SelectMode.js

@@ -1,27 +1,30 @@
 const types = {
-    html: "html",
-    css: "css",
-    javascript: "javascript",
-    java: "java",
-    python: "python",
-    ruby: "ruby",
-    xml: "xml",
-    sass: "sass",
-    json: "json",
-    typescript: "typescript",
-    markdown: "markdown",
-    mysql: "mysql",
-    handlebars: "handlebars",
-    golang: "golang",
-    csharp: "csharp",
-    elixir: "elixir"
-}
+  html: "html",
+  css: "css",
+  javascript: "javascript",
+  java: "java",
+  python: "python",
+  ruby: "ruby",
+  xml: "xml",
+  sass: "sass",
+  json: "json",
+  typescript: "typescript",
+  markdown: "markdown",
+  mysql: "mysql",
+  handlebars: "handlebars",
+  golang: "golang",
+  csharp: "csharp",
+  elixir: "elixir",
+};
 
-export const SelectMode = ({listObj=types, onChange, value}) => 
-    {
-        return <select value = {value} onChange={e => onChange(e.target.value)}>
-            {Object.entries(listObj).map(([value, text]) => <option value={value} key={value}>
-                {text}
-            </option>)}
-        </select>
-    }
+export const SelectMode = ({ listObj = types, onChange, value }) => {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)}>
+      {Object.entries(listObj).map(([value, text]) => (
+        <option value={value} key={value}>
+          {text}
+        </option>
+      ))}
+    </select>
+  );
+};

src/index.css

@@ -1,69 +1,69 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
 .top-pane {
-    background-color: hsl(225, 6%, 25%);
+  background-color: hsl(225, 6%, 25%);
 }
-  
+
 .pane {
-    height: 50vh;
-    display: flex;
+  height: 50vh;
+  display: flex;
 }
 
 .editor-container {
-    flex-grow: 1;
-    flex-basis: 0;
-    display: flex;
-    flex-direction: column;
-    padding: .5rem;
-    background-color: hsl(225, 6%, 25%);
+  flex-grow: 1;
+  flex-basis: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  background-color: hsl(225, 6%, 25%);
 }
-  
+
 .editor-container.collapsed {
-    flex-grow: 0;
+  flex-grow: 0;
 }
 
 .editor-container.collapsed .CodeMirror-scroll {
-    position: absolute;
-    overflow: hidden !important;
+  position: absolute;
+  overflow: hidden !important;
 }
-  
+
 .expand-collapse-btn {
-    margin-left: .5rem;
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
+  margin-left: 0.5rem;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
 }
-  
+
 .editor-title {
-    display: flex;
-    justify-content: space-between;
-    background-color: hsl(225, 6%, 13%);
-    color: white;
-    padding: .5rem .5rem .5rem 1rem;
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
+  display: flex;
+  justify-content: space-between;
+  background-color: hsl(225, 6%, 13%);
+  color: white;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border-top-right-radius: 0.5rem;
+  border-top-left-radius: 0.5rem;
 }
-  
+
 .CodeMirror {
-    height: 100% !important;
+  height: 100% !important;
 }
-  
+
 .code-mirror-wrapper {
-    flex-grow: 1;
-    border-bottom-right-radius: .5rem;
-    border-bottom-left-radius: .5rem;
-    overflow: hidden;
-}
+  flex-grow: 1;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  overflow: hidden;
+}

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/Cabinet.js

@@ -6,24 +6,20 @@ import "./Main.css";
 export const Cabinet = () => {
   return (
     <>
-        <div className="card">
-            <div className='nick_style'>
-                <ConnectFormUpload  />
-                <ConnectedNick />
-            </div>
-            <div className="cart_1">
-                <a href="/work">
-                    <button className='btn'>
-                        Work Page
-                    </button>
-                </a>
-                <a href="/projects">
-                    <button className='btn'>
-                        My Projects
-                    </button>
-                </a>
-            </div>
+      <div className="card">
+        <div className="nick_style">
+          <ConnectFormUpload />
+          <ConnectedNick />
         </div>
+        <div className="cart_1">
+          <a href="/work">
+            <button className="btn">Work Page</button>
+          </a>
+          <a href="/projects">
+            <button className="btn">My Projects</button>
+          </a>
+        </div>
+      </div>
     </>
   );
-};
+};

src/pages/FormReg.js

@@ -1,18 +1,45 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import "./LoginReg.css";
 
-export const FormReg = ({FormReg}) => {
-    const [login, setLogin] = useState('')
-    const [password, setPassword] = useState('')
-    const [passwordValid, setPasswordValid] = useState('')
-    return (
-        <div className='login'>
-        <h3>Registration</h3>
-        <input className='u'type ='login' placeholder='Username' value = {login} onChange = {e => setLogin(e.target.value)}/>
-        <input className='p' type ='password' placeholder='Password' value = {password} onChange = {e => setPassword(e.target.value)} />
-        <input className='p' type ='password' placeholder='RepeatYourPassword' value = {passwordValid} onChange = {e => setPasswordValid(e.target.value)} />
-        <button type="submit" className='btn btn-primary btn-block btn-large' disabled = {!login || !password || (password !== passwordValid)} onClick = {() => FormReg(login, password)}>Remember me. </button>
-        <button className='main_page'><a href = '/'>Main page</a></button>
-        </div>
-    )
-}
+export const FormReg = ({ FormReg }) => {
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordValid, setPasswordValid] = useState("");
+  return (
+    <div className="login">
+      <h3>Registration</h3>
+      <input
+        className="u"
+        type="login"
+        placeholder="Username"
+        value={login}
+        onChange={(e) => setLogin(e.target.value)}
+      />
+      <input
+        className="p"
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <input
+        className="p"
+        type="password"
+        placeholder="RepeatYourPassword"
+        value={passwordValid}
+        onChange={(e) => setPasswordValid(e.target.value)}
+      />
+      <button
+        type="submit"
+        className="btn btn-primary btn-block btn-large"
+        disabled={!login || !password || password !== passwordValid}
+        onClick={() => FormReg(login, password)}
+      >
+        Remember me.{" "}
+      </button>
+      <button className="main_page">
+        <a href="/">Main page</a>
+      </button>
+    </div>
+  );
+};

src/pages/FormUpload.css

@@ -1,45 +1,48 @@
 .buttons {
-    width: 180px;
-    height: 40px;
-    text-decoration: none;
-    padding-top: 9px;
-    color: #c9b6cf;
-    text-align: center;
-    line-height: 20px;
-    display: block;
-    margin: 200px auto 15px;
-    font: normal 17px arial;
-    cursor: pointer;
+  width: 180px;
+  height: 40px;
+  text-decoration: none;
+  padding-top: 9px;
+  color: #c9b6cf;
+  text-align: center;
+  line-height: 20px;
+  display: block;
+  margin: 200px auto 15px;
+  font: normal 17px arial;
+  cursor: pointer;
 }
-  
+
 .buttons:not(.active) {
-    box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
-    background-image: linear-gradient(#3b2751, #271739);
-    text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47;
+  box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8),
+    inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3),
+    0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e;
+  background-image: linear-gradient(#3b2751, #271739);
+  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47;
 }
-  
+
 .buttons:not(.active):hover,
 .buttons:not(.active):focus {
-    transition: color 200ms linear, text-shadow 500ms linear;
-    color: #fff;
-    text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
+  transition: color 200ms linear, text-shadow 500ms linear;
+  color: #fff;
+  text-shadow: 0 0 21px rgba(223, 206, 228, 0.5),
+    0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c;
 }
 
 .buttons:not(:hover) {
-      transition: 0.6s;
+  transition: 0.6s;
 }
 
 .back a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .back {
-    display: block;
-    width: 100px;
-    height: 20px;
-    text-decoration: none;
-    color: #c9b6cf;
-    text-align: center;
-    margin: auto;
-    cursor: pointer;
-}
+  display: block;
+  width: 100px;
+  height: 20px;
+  text-decoration: none;
+  color: #c9b6cf;
+  text-align: center;
+  margin: auto;
+  cursor: pointer;
+}

src/pages/FormUpload.js

@@ -1,20 +1,21 @@
 import { connect } from "react-redux";
-import { actionFullAva  } from "../actions/actionFullAva";
+import { actionFullAva } from "../actions/actionFullAva";
 import { useDropzone } from "react-dropzone";
 import { ConnectedAvaLogo } from "../components/Ava";
 import "./FormUpload.css";
 
-const FormUpload = ({onUpload}) => {
-    const {acceptedFiles, getRootProps, getInputProps} = useDropzone()
-    let files = acceptedFiles.map (file => onUpload(file))
-    console.log(files)
-    return (
-        <div {...getRootProps({})}>
-          <input {...getInputProps()} />
-          <ConnectedAvaLogo />
-        </div>
-     
-    );
+const FormUpload = ({ onUpload }) => {
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+  let files = acceptedFiles.map((file) => onUpload(file));
+  console.log(files);
+  return (
+    <div {...getRootProps({})}>
+      <input {...getInputProps()} />
+      <ConnectedAvaLogo />
+    </div>
+  );
 };
 
-export const ConnectFormUpload = connect(null, {onUpload:actionFullAva}) (FormUpload);
+export const ConnectFormUpload = connect(null, { onUpload: actionFullAva })(
+  FormUpload
+);

src/pages/LoginForm.js

@@ -1,16 +1,37 @@
 import { useState } from "react";
 import "./LoginReg.css";
 
-export const LoginForm = ({onLogin}) => {
-    const [login, setLogin] = useState('')
-    const [password, setPassword] = useState('')
-    return (
-        <div className='login'>
-        <h3>Login</h3>
-        <input className='u'type ='login' placeholder='Username' value = {login} onChange = {e => setLogin(e.target.value)}/>
-        <input className='p' type ='password' placeholder='Password' value = {password} onChange = {e => setPassword(e.target.value)} />
-        <button type="submit" className='btn btn-primary btn-block btn-large' disabled = {!login || !password} onClick = {() => onLogin(login, password)}>Let me in. </button>
-        <button className='main_page'><a href = '/'>Main page</a></button>
-        </div>
-    )
-};
+export const LoginForm = ({ onLogin }) => {
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
+  return (
+    <div className="login">
+      <h3>Login</h3>
+      <input
+        className="u"
+        type="login"
+        placeholder="Username"
+        value={login}
+        onChange={(e) => setLogin(e.target.value)}
+      />
+      <input
+        className="p"
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button
+        type="submit"
+        className="btn btn-primary btn-block btn-large"
+        disabled={!login || !password}
+        onClick={() => onLogin(login, password)}
+      >
+        Let me in.{" "}
+      </button>
+      <button className="main_page">
+        <a href="/">Main page</a>
+      </button>
+    </div>
+  );
+};

src/pages/Main.js

@@ -1,19 +1,25 @@
 import "./Main.css";
 
-export const Main = ({history}) => {
-    return (
-        <section id='body'>
-            <button className='btn_form' onClick={ () => history.push('./login') }>Login</button>
-            <div className='box'>
-                <div className='content'>
-                    <h1>Welcome To The CodePen</h1>
-                    <p>The best place to build, test, and discover front-end code.
-                        CodePen is a social development environment for front-end designers and developers.
-                        Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
-                    </p>
-                </div>
-            </div>
-            <button className='btn_form' onClick={ () => history.push('./reg') }>Reristration</button>
-        </section>
-    )
-};
+export const Main = ({ history }) => {
+  return (
+    <section id="body">
+      <button className="btn_form" onClick={() => history.push("./login")}>
+        Login
+      </button>
+      <div className="box">
+        <div className="content">
+          <h1>Welcome To The CodePen</h1>
+          <p>
+            The best place to build, test, and discover front-end code. CodePen
+            is a social development environment for front-end designers and
+            developers. Build and deploy a website, show off your work, build
+            test cases to learn and debug, and find inspiration.
+          </p>
+        </div>
+      </div>
+      <button className="btn_form" onClick={() => history.push("./reg")}>
+        Reristration
+      </button>
+    </section>
+  );
+};

src/pages/Project.js

@@ -1,16 +1,42 @@
 import { useEffect } from "react";
 import { connect } from "react-redux";
-import { actionSnippetById } from "../actions/actionSnippetById";
+import { actionSnippetById } from "./../actions/actionSnippetById";
 import { useState } from "react";
 import { Editor } from "../components/Editor";
-import { actionSnippetAdd } from "../actions/actionSnippetAdd";
+import "../components/EditorsPage.css";
 import { Link } from "react-router-dom";
 
+//  const [editors, setEditors] = useState(datas);
+//   const [title, setTitle] = useState("");
+//   const [description, setDescription] = useState("");
+//   const [srcDoc, setSrcDoc] = useState("");
+//   const [theme, setTheme] = useState();
+//   const [font, setFont] = useState();
+
+//   useEffect(() => {
+//     const timeout = setTimeout(() => {
+//       let html, css, javascript;
+//       editors.forEach((e) => {
+//         if (e.type === "html") html = e.text;
+//         if (e.type === "css") css = e.text;
+//         if (e.type === "javascript") javascript = e.text;
+//       });
+//       setSrcDoc(`
+//             <html>
+//               <body>${html}</body>
+//               <style>${css}</style>
+//               <script>${javascript}</script>
+//             </html>
+//           `);
+//     }, 250);
+
+//     return () => clearTimeout(timeout);
+//   }, [editors]);
+
 const ProjectSnippet = ({
-  onSave,
   getSnippet,
   match: {
-    params: { id },
+    params: { _id },
   },
   titleText,
   descriptionText,
@@ -18,130 +44,101 @@ const ProjectSnippet = ({
   nameText,
 }) => {
   useEffect(() => {
-    getSnippet(id);
-  }, []);
-  const [files, setFiles] = useState([]);
-  const [name, setName] = useState("");
+    getSnippet(_id);
+  }, [_id, getSnippet]);
+  const [editors, setEditors] = useState([]);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   useEffect(() => {
-    setFiles(filesArr);
+    setEditors(filesArr);
     setTitle(titleText);
     setDescription(descriptionText);
   }, [filesArr, titleText, descriptionText]);
   const [srcDoc, setSrcDoc] = useState("");
-  const html = files?.filter((el) => {
-    return el?.type === "html";
+  const html = editors?.filter((e) => {
+    return e?.type === "html";
   })[0]?.text;
-  const css = files?.filter((el) => {
-    return el?.type === "css";
+  const css = editors?.filter((e) => {
+    return e?.type === "css";
   })[0]?.text;
-  const js = files?.filter((el) => {
-    return el?.type === "javascript";
+  const javascript = editors?.filter((e) => {
+    return e?.type === "javascript";
   })[0]?.text;
-  console.log(js);
+  console.log(javascript);
   useEffect(() => {
     const timeout = setTimeout(() => {
       setSrcDoc(`
-        <html>
-          <body>${html || ""}</body>
-          <style>${css}</style>
-          <script>${js}</script>
-        </html>
-      `);
+            <html>
+              <body>${html}</body>
+              <style>${css}</style>
+              <script>${javascript}</script>
+            </html>
+          `);
     }, 250);
 
     return () => clearTimeout(timeout);
-  }, [html, css, js]);
+  }, [html, css, javascript]);
   return (
     <div>
+      <div>
+        <Link to="/search">
+          <button
+            className="btn_search"
+            style={{ margin: 10, marginBottom: 50 }}
+          >
+            Back to search
+          </button>
+        </Link>
+      </div>
       <br />
-      {files?.map((data, index) => (
+      {editors?.map((data, index) => (
         <>
           <Editor
-            onDelete={() => setFiles(files?.filter((item) => item !== data))}
+            onDelete={() =>
+              setEditors(editors?.filter((item) => item !== data))
+            }
             data={data}
             onChange={({ type, name, text }) =>
-              setFiles([
-                ...files.slice(0, index),
+              setEditors([
+                ...editors.slice(0, index),
                 { type, name, text },
-                ...files.slice(index + 1),
+                ...editors.slice(index, 1),
               ])
             }
           />
         </>
       ))}
       <br />
-      <div
-        style={{
-          alignItems: "center",
-          textAlign: "center",
-          marginBottom: "10px",
-        }}
-      >
+      <div>
         <div>
-          <button
-            className="btn btn-primary"
-            onClick={() => setFiles([...files, { type: "html" }])}
-            key={files}
-          >
-            Add editor
-          </button>
           <iframe
+            className="pane"
             srcDoc={srcDoc}
             title="output"
             sandbox="allow-scripts"
             frameBorder="0"
+            style={{ marginTop: 20 }}
             width="95%"
             height="95%"
-            style={{
-              marginTop: "10px",
-              border: "1px solid #F0FFFF",
-              boxShadow: "0px 5px 10px 2px rgba(34, 60, 80, 0.2)",
-            }}
           />
-          <div>
-            <Link to="/projects">
-              <button className="btn btn-outline-info border-info mt-3">
-                All projects
-              </button>
-            </Link>
-          </div>
         </div>
-        <div className="input-group mb-3 mt-5 ml-auto mr-auto w-25">
-          <div className="input-group-prepend">
-            <span className="input-group-text" id="basic-addon1">
-              Name of your project
-            </span>
-          </div>
+        <div>
+          <p className="text">Name of your project: </p>
           <input
+            className="input_title"
+            placeholder="Name of your project"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-            type="text"
-            className="form-control"
-            placeholder="Name of project"
-            aria-label="Name of project"
-            aria-describedby="basic-addon1"
           />
         </div>
-        <div className="input-group ml-auto mr-auto w-50">
-          <div className="input-group-prepend">
-            <span className="input-group-text ">Description</span>
-          </div>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            className="form-control "
-            aria-label="With textarea"
-            placeholder="Your description"
-          ></textarea>
-        </div>
-        <button
-          className="btn btn-success float-right mr-5 mb-5"
-          onClick={() => onSave(title, description, files, id)}
-        >
-          Save project
-        </button>
+        <p className="text">Description: </p>
+        <textarea
+          className="text_desc"
+          placeholder="Description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          style={{ marginBottom: 50 }}
+        />
       </div>
     </div>
   );
@@ -150,15 +147,12 @@ const ProjectSnippet = ({
 const ConnectedProject = connect(
   (state) => ({
     titleText:
-      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
+      state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
     descriptionText:
-      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]
-        ?.description,
-    nameText:
-      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.name,
-    filesArr:
-      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.files,
+      state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.description,
+    nameText: state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.name,
+    filesArr: state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.files,
   }),
-  { getSnippet: actionSnippetById, onSave: actionSnippetAdd }
+  { getSnippet: actionSnippetById }
 )(ProjectSnippet);
 export default ConnectedProject;

src/pages/Projects.js

@@ -1,55 +1,52 @@
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import code from "../../src/code.png";
 
 const Projects = ({ snippets }) => {
   return snippets ? (
     <div>
-      <Link to="/cabinet">
-        <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-          Back to Cabinet
-        </button>
-      </Link>
-      <br /> <br />
-      <div style={{ alignItems: "center", textAlign: "center" }}>
-        <Link to="/work">
-          <button className="btn btn-success">New project</button>
-        </Link>
+      <div style={{ margin: 10 }}>
+        <div>
+          <Link to="/cabinet">
+            <button className="btn_search">Back to Cabinet</button>
+          </Link>
+        </div>
+        <div>
+          <Link to="/work">
+            <button className="btn_search" style={{ marginTop: 5 }}>
+              New project
+            </button>
+          </Link>
+        </div>
       </div>
-      {snippets?.map((key, index) => (
-        <div style={{ textAlign: "center", alignItems: "center" }}>
-          <div className="card w-50 ml-auto mr-auto mt-3 mb-5" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
-            <div className="card-body" style={{ textAlign: "center" }}>
-              <h3 className="card-title mb-4 text-info">
-                {snippets?.[index]?.title || "Project without name"}
-              </h3>
-              <p className="card-text">
-                <span className="text-muted">Description</span>&nbsp;
-                {snippets?.[index]?.description || ""}
+      <br />
+      <div className="snippet_block">
+        {snippets?.map((key, index) => (
+          <div className="snippet">
+            <img src={code} alt="code"></img>
+            <div className="block_content">
+              <p>
+                {`Name: ${snippets?.[index]?.title}` || "Project without name"}
               </p>
-              <Link to={"/project/" + snippets?.[index]?._id}>
-                <button className="btn btn-primary mt-3">Open project</button>
-              </Link>
+              <p>{`Description: ${snippets?.[index]?.description}` || ""}</p>
+              <div className="btn_center">
+                <Link to={"/project/" + snippets?.[index]?._id}>
+                  <button className="btn_search">Open project</button>
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   ) : (
     <div>
       <Link to="/">
-        <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
-          Back to Main Page
-        </button>
+        <button className="btn_search">Back to Main Page</button>
       </Link>{" "}
       <br /> <br />
-      <div className="d-flex justify-content-center">
-        <div
-          className="spinner-border mt-3"
-          style={{ width: "10rem", height: "10rem" }}
-          role="status"
-        >
-          <span className="sr-only">Loading...</span>
-        </div>
+      <div>
+        <span style={{ margin: 10, fontSize: 20 }}>Loading...</span>
       </div>
     </div>
   );
@@ -58,4 +55,4 @@ const Projects = ({ snippets }) => {
 const CProjects = connect((state) => ({
   snippets: state?.p?.findSnippet?.payload?.data?.SnippetFind,
 }))(Projects);
-export default CProjects;
+export default CProjects;

src/pages/WorkPage.js

@@ -1,16 +1,18 @@
 import { EditorsPage } from "../components/EditorsPage";
 import { actionSnippetAdd } from "../actions/actionSnippetAdd";
-import { connect }  from "react-redux";
+import { connect } from "react-redux";
 import Header from "../components/Header";
 
 export const Home = () => {
-    return (
+  return (
     <>
-    <Header />
-    <ConnectEditorsPage />
+      <Header />
+      <ConnectEditorsPage />
     </>
-    )
-}
+  );
+};
 
-const ConnectEditorsPage = connect(null, {onSave:actionSnippetAdd}) (EditorsPage);
+const ConnectEditorsPage = connect(null, { onSave: actionSnippetAdd })(
+  EditorsPage
+);
 export default ConnectEditorsPage;

src/reducers/auth.js

@@ -3,29 +3,28 @@ import { decode as atob } from "base-64";
 let signatureToken = (token) => JSON.parse(atob(token.split(".")[1]));
 
 function authReducer(state, { type, token }) {
-
-    if (state === undefined) {
-        if (localStorage.authToken) {
-            type = "LOGIN"
-            token = localStorage.authToken
-        } else {
-            return {}
-        }
+  if (state === undefined) {
+    if (localStorage.authToken) {
+      type = "LOGIN";
+      token = localStorage.authToken;
+    } else {
+      return {};
     }
+  }
 
-    if (type === "LOGIN") {
-        console.log('LOGIN')
-        localStorage.authToken = token
-        return {token, payload: signatureToken(token)}
-    }
+  if (type === "LOGIN") {
+    console.log("LOGIN");
+    localStorage.authToken = token;
+    return { token, payload: signatureToken(token) };
+  }
 
-    if (type === "LOGOUT") {
-        console.log('LOGOUT')
-        localStorage.removeItem("authToken")
-        return {}
-    }
+  if (type === "LOGOUT") {
+    console.log("LOGOUT");
+    localStorage.removeItem("authToken");
+    return {};
+  }
 
-    return state
+  return state;
 }
 
-export default authReducer;
+export default authReducer;

src/reducers/index.js

@@ -6,18 +6,15 @@ import { actionSnippetFindByOwner } from "../actions/actionSnippetFindByOwner";
 import { actionFindUser } from "../actions/actionFindUser";
 
 let reducers = combineReducers({
-    p: promiseReducer,
-    a: authReducer
-})
+  p: promiseReducer,
+  a: authReducer,
+});
 
 const store = createStore(reducers, applyMiddleware(thunk));
 store.subscribe(() => console.log(store.getState()));
 if (localStorage.authToken) {
-    store.dispatch(actionFindUser());
-    store.dispatch(
-      actionSnippetFindByOwner(store.getState().a.payload.sub.id)
-    );
-  }
+  store.dispatch(actionFindUser());
+  store.dispatch(actionSnippetFindByOwner(store.getState().a.payload.sub.id));
+}
 
-
-export default store;
+export default store;

src/reducers/promise.js

@@ -1,13 +1,12 @@
 function promiseReducer(state = {}, { type, status, payload, error, name }) {
-    
-    if (type === 'PROMISE') {
-        return {
-            ...state,
-            [name]: { status, payload, error }
-        }
-    }
+  if (type === "PROMISE") {
+    return {
+      ...state,
+      [name]: { status, payload, error },
+    };
+  }
 
-    return state
+  return state;
 }
 
-export default promiseReducer;
+export default promiseReducer;