Login & 1st page

project_marketplace/package-lock.json

@@ -1991,6 +1991,88 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@material-ui/core": {
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
+      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.4",
+        "@material-ui/system": "^4.12.1",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
+      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.19",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+          "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
+      "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.19",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+          "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@mui/base": {
       "version": "5.0.0-alpha.69",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.69.tgz",
@@ -2012,6 +2094,14 @@
         }
       }
     },
+    "@mui/icons-material": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.2.tgz",
+      "integrity": "sha512-7c+G3jBT+e+pN0a9DJ0Bd8Kr1Vy6os5Q1yd2aXcwuhlRI3uzJBLJ8sX6FSWoh5DSEBchb7Bsk1uHz6U0YN9l+Q==",
+      "requires": {
+        "@babel/runtime": "^7.17.0"
+      }
+    },
     "@mui/material": {
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.2.tgz",
@@ -4326,6 +4416,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -6241,6 +6340,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6440,6 +6544,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -7973,6 +8082,84 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz",
       "integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg=="
     },
+    "jss": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.9.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
@@ -8801,6 +8988,11 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

project_marketplace/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@material-ui/core": "^4.12.3",
+    "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",

project_marketplace/src/App.css

@@ -26,8 +26,12 @@ a:focus {
   max-width: 1300px;
   margin-left: auto;
   margin-right: auto;
-  padding: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
   justify-content: space-between;
+  align-items: center;
 }
 
 .mainWrapper {
@@ -36,10 +40,11 @@ a:focus {
   /* max-width: 1300px; */
   margin-left: auto;
   margin-right: auto;
+  display: flex;
   /* background-color: rgb(247, 243, 243); */
 }
 .menuWrapper {
-  width: 400px;
+  width: 250px;
   background-color: rgba(250, 103, 6, 0.4);
   color: rgb(68, 68, 68);
   padding: 10px;
@@ -63,7 +68,7 @@ a:focus {
 }
 
 .App-logo {
-  height: 60px;
+  height: 50px;
   pointer-events: none;
 }
 
@@ -121,6 +126,7 @@ a:focus {
   padding-bottom: 200px;
   padding-top: 50px;
   background-color: white;
+  color: rgb(6, 59, 60);
 }
 .formWrapper {
   display: flex;
@@ -142,8 +148,19 @@ a:focus {
   padding: 8px;
 } */
 .loginIcon {
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   border-radius: 5px;
   padding: 8px;
+  display: block;
+}
+.cardMedia {
+  width: 300px;
+  height: 300px;
+}
+.dropBox {
+  height: 300px;
+  width: 500px;
+  background-color: lightgrey;
+  border-radius: 10px;
 }

project_marketplace/src/App.js

@@ -1,58 +1,91 @@
-import logo from './images/krakenLogo2.png';
-import logoFooter from './images/krakenBlue.png';
-import './App.css';
-import { Provider, connect } from 'react-redux';
-import { useState, useCallback, useEffect } from 'react';
-import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import "./App.css";
+import { Provider, connect } from "react-redux";
+// import { useState, useCallback, useEffect } from "react";
+import { Router, Route, Link, Redirect, Switch } from "react-router-dom";
 import createHistory from "history/createBrowserHistory";
 import { createBrowserHistory } from "history";
-import BodyWrapper from './components/FrontArchitecture/BodyWrapper/BodyWrapper';
-import Header from './components/Header/Header';
-import Main from './components/FrontArchitecture/Main/Main';
-import Footer from './components/Footer/Footer';
-import Registration from './components/Registration/Registration';
-import { store } from './requests/reducers';
-import { uploadFile, uploadFiles } from './basic/uploadFilesFunc';
-import { CBasic } from './basic/dropZone';
-import Gallery from './components/Carusell/Carusell';
-import CPageRoute from './components/Routing/Routing';
 
+// import BodyWrapper from "./components/FrontArchitecture/BodyWrapper/BodyWrapper";
+// import CRegistration from "./components/Registration/Registration";
+// import CLoggedWrapper from "./components/LoggedWrapper/LoggedWrapper";
+import { store } from "./modules/reducers";
+import { uploadFile, uploadFiles } from "./basic/uploadFilesFunc";
+import { CBasic } from "./components/DropZone/DropZone";
+import CRouting from "./components/Routing/Routing";
+import AllAdsPage from "./pages/AllAdsPage";
+import LoginPage from "./pages/LoginPage";
+// import CProtectedRoute from "./components/Routing/Routing";
 
-export let history = createBrowserHistory();
+let history = createBrowserHistory();
 
-
-console.log(store.getState())
-store.subscribe(() => console.log(store.getState()))
+console.log(store.getState());
+store.subscribe(() => console.log(store.getState()));
 
 function App() {
-  const [open, setOpen] = useState(false);
-  useEffect(() => { store.getState().auth.token? setOpen(true) : setOpen(false) }, [])
- 
   return (
-      // <Router history={history}>
-    <Provider store={store}>
-   {/* <CPageRoute> */}
-      {!open && <Registration/>}
-         {open && <BodyWrapper >
-        <Header>
+    <Router history={history}>
+      <Provider store={store}>
+        <CRouting />
+        {/* <LoginPage /> */}
+        {/* <AllAdsPage /> */}
+      </Provider>
+    </Router>
+  );
+}
+// history.push("/");
+export default App;
+
+/* <CLoggedWrapper LoggedOut={LoginPage} LoggedIn={AllAdsPage}> */
+
+{
+  /* <CProtectedRoute roles={['anon']} fallback='/main' path='/register' component={LoginPage} ></CProtectedRoute>
+        <CProtectedRoute roles={['user']} fallback='/main' path='/main' component={AllAdsPage} ></CProtectedRoute> */
+}
+{
+  /* <CRegistration /> */
+}
+{
+  /* <CLoggedWrapper> */
+}
+{
+  /* <BodyWrapper > */
+}
+{
+  /* <Header>
             <img src={logo} className="App-logo" alt="logo" />
           </Header>
-        <Main>
-       {/* <CMainAds></CMainAds> */}
-          {/* <CBasic onLoad={uploadFile}></CBasic> */}
-          {/* <CAd onLoad={uploadFiles}></CAd> */}
-          <Gallery />
-        </Main>
-       <Footer>
-          <img src={logoFooter} className="footer-logo" alt="logo" />
-        </Footer>
-        </BodyWrapper>}
-         {/* </CPageRoute> */}
-    </Provider>
-  // </Router >
-  )
+          <Main> */
 }
 
-export default App;
+{
+  /* <CBasic onLoad={uploadFile}></CBasic> */
+}
+{
+  /* <CAd onLoad={uploadFiles}></CAd> */
+}
+{
+  /* {/* <Gallery /> */
+}
+{
+  /* </Main> */
+}
+{
+  /* <Footer>
+            <img src={logoFooter} className="footer-logo" alt="logo" />
+          </Footer> */
+}
+{
+  /* </BodyWrapper> */
+}
+{
+  /* </CProtectedRoute>  */
+}
+{
+  /* </CLoggedWrapper>      */
+}
 
+// const LoggedWrapper = ({ LoggedOut, LoggedIn }) => {
 
+//   return <>{store.getState().auth.token ? <LoggedIn/> : <LoggedOut/>}</>
+// }
+//     const CLoggedWrapper = connect(state => ({token: state.auth.token}))(LoggedWrapper);

project_marketplace/src/basic/uploadFilesFunc.js

@@ -1,4 +1,4 @@
-import { backendURL } from "../requests/reducers";
+import { backendURL } from "../modules/reducers";
 
 const uploadFile = file => {
   const fd = new FormData();

project_marketplace/src/components/AdCard/AdCard.jsx

@@ -1,7 +1,11 @@
-// import { useEffect, useState } from 'react';
-// import { connect } from 'react-redux';
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+
+const AdCard = ({ ad: { _id, title } = {}}) => 
+  <li key={_id} className='AdCard'>
+    {title}
+    </li>
 
 
-// const AdCard = () => {return <div>hello</div> }
 // const CAdCard = connect()();
-// export default CAdCard;
+export default CAdCard;

project_marketplace/src/components/AllAds/AllAds.jsx

@@ -1,143 +1,142 @@
 // import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
 // import CAdCards from '../AdCard/AdCard';
-import { actionAllAds } from '../../requests/actions';
-import { store } from "../../requests/reducers";
-const defaultAds=[ 
-      {
-        "_id": "5dc9c9a879064d79bb6ba069",
-        "title": "iphone",
-        "comments": [
-          {
-            "text": "Comment"
-          },
-          {
-            "text": "Какой-то текст"
-          }
-        ],
-        "images": null
-      },
-      {
-        "_id": "5dc9dbc879064d79bb6ba06a",
-        "title": "dasd",
-        "comments": [
-          {
-            "text": "Мой первый комментарий"
-          }
-        ],
-        "images": null
-      },
+import { actionAllAds } from "../../modules/actions";
+import { store } from "../../modules/reducers";
+import GridGallery from "../GridGallery/GridGallery";
+import { backendURL } from "../../modules/reducers";
 
+const defaultAds = [
+  {
+    _id: "5dc9c9a879064d79bb6ba069",
+    title: "iphone",
+    comments: [
       {
-        "_id": "5dc9e5cfef38433c6c85e7c2",
-        "title": "New phone",
-        "comments": null,
-        "images": null
-      },
-      {
-        "_id": "5dcaaf0cef38433c6c85e7c5",
-        "title": "ASD",
-        "comments": null,
-        "images": null
+        text: "Comment",
       },
       {
-        "_id": "5dcab049ef38433c6c85e7c7",
-        "title": "Awesome new phone",
-        "comments": null,
-        "images": null
+        text: "Какой-то текст",
       },
+    ],
+    images: null,
+  },
+  {
+    _id: "5dc9dbc879064d79bb6ba06a",
+    title: "dasd",
+    comments: [
       {
-        "_id": "5dcab950ef38433c6c85e7cc",
-        "title": "dasdsa",
-        "comments": null,
-        "images": null
+        text: "Мой первый комментарий",
       },
+    ],
+    images: null,
+  },
+
+  {
+    _id: "5dc9e5cfef38433c6c85e7c2",
+    title: "New phone",
+    comments: null,
+    images: null,
+  },
+  {
+    _id: "5dcaaf0cef38433c6c85e7c5",
+    title: "ASD",
+    comments: null,
+    images: null,
+  },
+  {
+    _id: "5dcab049ef38433c6c85e7c7",
+    title: "Awesome new phone",
+    comments: null,
+    images: null,
+  },
+  {
+    _id: "5dcab950ef38433c6c85e7cc",
+    title: "dasdsa",
+    comments: null,
+    images: null,
+  },
+  {
+    _id: "5f9dbe4d73753d12d794221b",
+    title: "New AD999",
+    comments: null,
+    images: [
       {
-        "_id": "5f9dbe4d73753d12d794221b",
-        "title": "New AD999",
-        "comments": null,
-        "images": [
-          {
-            "_id": "5fc8f03873753d12d794227e",
-            "url": "images/56220f3577dc9dd53cbdb7e7a82067b3"
-          }
-        ]
+        _id: "5fc8f03873753d12d794227e",
+        url: "images/56220f3577dc9dd53cbdb7e7a82067b3",
       },
+    ],
+  },
+  {
+    _id: "615349eee5a2263e42514221",
+    title: "test",
+    comments: null,
+    images: null,
+  },
+
+  {
+    _id: "5dcabc50ef38433c6c85e7d8",
+    title: "",
+    comments: null,
+    images: [
       {
-        "_id": "615349eee5a2263e42514221",
-        "title": "test",
-        "comments": null,
-        "images": null
+        _id: "5dcabc50ef38433c6c85e7d7",
+        url: null,
       },
-
-    
+    ],
+  },
+  {
+    _id: "5dcabc6eef38433c6c85e7da",
+    title: "",
+    comments: null,
+    images: [
       {
-        "_id": "5dcabc50ef38433c6c85e7d8",
-        "title": "",
-        "comments": null,
-        "images": [
-          {
-            "_id": "5dcabc50ef38433c6c85e7d7",
-            "url": null
-          }
-        ]
+        _id: "5dcabc6eef38433c6c85e7d9",
+        url: null,
       },
+    ],
+  },
+  {
+    _id: "5dcac1ccef38433c6c85e7de",
+    title: "dsada",
+    comments: null,
+    images: [
       {
-        "_id": "5dcabc6eef38433c6c85e7da",
-        "title": "",
-        "comments": null,
-        "images": [
-          {
-            "_id": "5dcabc6eef38433c6c85e7d9",
-            "url": null
-          }
-        ]
+        _id: "5dcac1ccef38433c6c85e7dd",
+        url: null,
       },
+    ],
+  },
+  {
+    _id: "5dcac215ef38433c6c85e7e1",
+    title: "dsad",
+    comments: null,
+    images: [
       {
-        "_id": "5dcac1ccef38433c6c85e7de",
-        "title": "dsada",
-        "comments": null,
-        "images": [
-          {
-            "_id": "5dcac1ccef38433c6c85e7dd",
-            "url": null
-          }
-        ]
+        _id: "5dcac215ef38433c6c85e7e0",
+        url: null,
       },
+    ],
+  },
+  {
+    _id: "5dcae383ef38433c6c85e7e7",
+    title: "dsadasd",
+    comments: null,
+    images: [
       {
-        "_id": "5dcac215ef38433c6c85e7e1",
-        "title": "dsad",
-        "comments": null,
-        "images": [
-          {
-            "_id": "5dcac215ef38433c6c85e7e0",
-            "url": null
-          }
-        ]
+        _id: "5dcae381ef38433c6c85e7e6",
+        url: "images/c45eb7c1921ac2e114d27e26619a4974",
       },
-           {
-        "_id": "5dcae383ef38433c6c85e7e7",
-        "title": "dsadasd",
-        "comments": null,
-        "images": [
-          {
-            "_id": "5dcae381ef38433c6c85e7e6",
-            "url": "images/c45eb7c1921ac2e114d27e26619a4974"
-          }
-        ]
-      }]
-const AdCard = ({ ad: { _id, title } = {}}) => 
-  <li key={_id} className='AdCard'>
-    {title}
-    </li>
+    ],
+  },
+];
+
 const AllAds = ({ ads = defaultAds }) => {
- 
-    return (<ul className='AllAdsList'>
-        {ads.map(item => <AdCard ad={item} />)}
-    </ul>)
-}
+  return <GridGallery backendURL={backendURL} cards={ads}></GridGallery>;
+};
 
-const CAllAds = connect(state => ({ ads: state.promise.allAds?.payload || [] }),
-  { onLoad:store.dispatch(actionAllAds()) })(AllAds);
+const CAllAds = connect(
+  (state) => ({ ads: state.promise.allAds?.payload || [] }),
+  { onSubmit: store.getState().auth.token && store.dispatch(actionAllAds()) }
+)(AllAds);
 
-export default CAllAds;
+export default CAllAds;

project_marketplace/src/basic/dropZone.js

@@ -1,11 +1,9 @@
-import { useDropzone } from 'react-dropzone';
-import { actionSetAvatar } from '../requests/actions';
-import { connect } from 'react-redux';
-import { useState, useCallback, useEffect } from 'react';
+import { useDropzone } from "react-dropzone";
+import { actionSetAvatar } from "../../modules/actions";
+import { connect } from "react-redux";
+import { useEffect } from "react";
 
 // const actionUploadFile = file => actionPromise('uploadFile', uploadFile(file));
-// const CBasic = connect(null, {onLoad:actionUploadFile})(Basic  );
-
 
 // const actionAvatar = (imageId) =>
 //   async (dispatch, getState) => {
@@ -27,21 +25,23 @@ import { useState, useCallback, useEffect } from 'react';
 //      await dispatch(actionAvatar(result._id));
 //       // dispatch(actionAboutMe(store.state.auth.payload));
 //     }
-    
+
 //    }
 
-function Basic({onLoad}) {
-  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
-  
-  const files = acceptedFiles.map(file => (
+function Basic({ onLoad }) {
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+
+  const files = acceptedFiles.map((file) => (
     <li key={file.path}>
       {file.path} - {file.size} bytes
     </li>
   ));
-    useEffect(() => {acceptedFiles[0] && onLoad(acceptedFiles[0]) }, [acceptedFiles]);
-      return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
+  useEffect(() => {
+    acceptedFiles[0] && onLoad(acceptedFiles[0]);
+  }, [acceptedFiles]);
+  return (
+    <section className="container dropBox">
+      <div {...getRootProps({ className: "dropzone" })}>
         <input {...getInputProps()} />
         <p>Drag 'n' drop some files here, or click to select files</p>
       </div>
@@ -51,7 +51,7 @@ function Basic({onLoad}) {
       </aside>
     </section>
   );
-};
-// const CBasic = connect(null, { onLoad: actionSetAvatar })(Basic);
-    
-// export {CBasic};
+}
+const CBasic = connect(null, { onLoad: actionSetAvatar })(Basic);
+
+export { CBasic };

project_marketplace/src/components/Footer/Footer.jsx

@@ -1,8 +1,8 @@
-
+import logoFooter from '../../images/krakenBlue.png';
 const Footer = ({ children}) => {
             return (
                 <footer className='footerWrapper'>
-                    <div className="footerNav"><div className="logoBlock">{ children}</div></div>
+                    <div className="footerNav"><div className="logoBlock"><img src={logoFooter} className="footer-logo" alt="logo" /></div></div>
                 {/* <div className={styles.container}>
                     <div className={styles.wrapper}>
                             <Logo />

project_marketplace/src/components/FrontArchitecture/Aside/Aside.jsx

@@ -1,4 +1,4 @@
-const Aside = () => { 
-    return <aside className="menuWrapper">menu</aside>
-}
-export default Aside;
+const Aside = ({ children }) => {
+  return <aside className="menuWrapper">{children}</aside>;
+};
+export default Aside;

project_marketplace/src/components/FrontArchitecture/BodyWrapper/BodyWrapper.jsx

@@ -1,8 +1,11 @@
-// import styles from "../../../App.css";
-
+// import Header from "../Header/Header";
+// import Main from "../Main/Main";
+// import Footer from "../../Footer/Footer";
 const BodyWrapper = ({ children }) => {
     
     return (<div className='bodyWrapper'>
-                 {children}
-    </div>);};
+      {children}
+      </div>);
+};
+   
 export default BodyWrapper;

project_marketplace/src/components/FrontArchitecture/Content/Content.jsx

@@ -1,5 +0,0 @@
-
-const Content = ({children}) => { 
-    return children
-}
-export default Content;

project_marketplace/src/components/FrontArchitecture/FirstPage/FirstPage.jsx

@@ -1,12 +1,18 @@
-import logoBig from '../../../images/krakenLogoBig.png';
-const FirstPage = ({Render, handleOpen}) => {
-    return <>
-        <div className="firstpage">           
-              <h1>Welcome to KrakenPlace</h1>
-                <div className="formWrapper">
-                <div className='greetingCard'>  <img src={logoBig} className=" greetingLogo" alt="logoBig" /></div>
-                <Render handleOpen={ handleOpen}/>
-                </div>
-            </div></>
-}
-export default FirstPage;
+import logoBig from "../../../images/krakenLogoBig.png";
+const FirstPage = ({ Render, handleOpen }) => {
+  return (
+    <>
+      <div className="firstpage">
+        <h1>Welcome to KrakenPlace</h1>
+        <div className="formWrapper">
+          <div className="greetingCard">
+            {" "}
+            <img src={logoBig} className=" greetingLogo" alt="logoBig" />
+          </div>
+          <Render handleOpen={handleOpen} />
+        </div>
+      </div>
+    </>
+  );
+};
+export default FirstPage;

project_marketplace/src/components/FrontArchitecture/Header/Header.jsx

@@ -0,0 +1,156 @@
+import logout from "../../../images/logout1.png";
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+  InputBase,
+  // Fade,
+} from "@mui/material";
+import { makeStyles, createStyles, Theme, alpha } from "@material-ui/core";
+import SearchIcon from "@mui/icons-material/Search";
+import { store } from "../../../modules/reducers";
+import CLogout from "../../LogOutBtn/LogOutBtn";
+import logo from "../../../images/krakenLogo2.png";
+import { Link } from "react-router-dom";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    search: {
+      position: "relative",
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: alpha(theme.palette.common.white, 0.15),
+      "&:hover": { backgroundColor: alpha(theme.palette.common.white, 0.25) },
+      marginLeft: 0,
+      width: "100%",
+      // display: "flex",
+      [theme.breakpoints.up("sm")]: {
+        marginLeft: theme.spacing(1),
+        width: "auto",
+      },
+    },
+    searchIcon: {
+      padding: theme.spacing(0, 2),
+      height: "100%",
+      position: "absolute",
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    inputRoot: {
+      color: "inherit",
+    },
+    inputInput: {
+      padding: theme.spacing(1, 1, 1, 0),
+      paddingLeft: `calc(1em+${theme.spacing(4)}px)`,
+      transition: theme.transitions.create("width"),
+      width: "100%",
+      color: "inherit",
+      [theme.breakpoints.up("sm")]: {
+        width: "12ch",
+        "&:focus": {
+          width: "30ch",
+        },
+      },
+    },
+  })
+);
+
+const Search = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.search}>
+      <div className={classes.searchIcon}>
+        <SearchIcon />
+      </div>
+      <InputBase
+        placeholder="Поиск..."
+        classes={{
+          root: classes.inputRoot,
+          input: classes.inputInput,
+        }}
+        inputProps={{ "aria-label": "search" }}
+      />
+    </div>
+  );
+};
+const Header = ({ children }) => {
+  // let burgerState = false;
+  // let [menuState, setMenuState] = useState(burgerState);
+  // function handleMenu (burgerState) {setMenuState(burgerState) };
+
+  const [open, setOpen] = useState(true);
+  const handleClickOpen = () => setOpen(false);
+  // const handleClose = () => setOpen(true);
+
+  return (
+    <header className="headerWrapper">
+      <div className="navWrapper">
+        <img src={logo} className="App-logo" alt="logo" />
+        {/* { children} */}
+        <Search />
+        {/* <div className="searchWrapper">asdcascx</div> */}
+        <Link style={{ textDecoration: "none", color: "inherit" }} to="/new_ad">
+          <Button
+            onClick={handleClickOpen}
+            sx={{
+              backgroundColor: "white",
+              color: "rgb(6, 59, 60)",
+              display: "block",
+              fontSize: "14px",
+              fontWeight: "600",
+              borderColor: "white",
+              borderWidth: "3px",
+              borderStyle: "solid",
+              padding: "4px",
+              height: "39px",
+
+              "&:hover": {
+                backgroundColor: "rgb(6, 59, 60)",
+                color: "lightGrey",
+                borderColor: "lightGrey",
+              },
+            }}
+          >
+            Подать объявление
+          </Button>
+        </Link>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <Link
+            style={{ textDecoration: "none", color: "inherit" }}
+            to="/user_profile"
+          >
+            <Button
+              onClick={handleClickOpen}
+              sx={{
+                color: "lightgray",
+                display: "block",
+                fontSize: "12px",
+                "&:hover": {
+                  backgroundColor: "rgba(256, 256, 256, 0.2)",
+                },
+              }}
+            >
+              <img src={logout} className="loginIcon" alt="logoutIcon" />
+              {store.getState().auth.payload?.sub?.login}
+            </Button>
+          </Link>
+          <CLogout style={{ marginLeft: "10px" }} sx={{ color: "lightgray" }} />
+        </div>
+      </div>
+
+      {/* <div className={styles.container}>
+                    <div className={styles.wrapper}>
+                            <Logo />
+                            <Burger menuState={menuState} handleMenu = {(isOpen)=> setMenuState(isOpen)}/>
+                                        </div>
+                        <Menu menuList={menuList} contactsList={contactsList} menuState={ menuState}/>
+                </div> */}
+    </header>
+  );
+};
+export default Header;

project_marketplace/src/components/FrontArchitecture/Main/Main.jsx

@@ -1,15 +1,12 @@
-
 import Aside from "../Aside/Aside";
-import Content from "../Content/Content";
-import CAllAds from "../../AllAds/AllAds";
-
+import Menu from "../../Menu/Menu";
+const Main = ({ children }) => (
+  <main className="mainWrapper">
+    <Aside>
+      <Menu />{" "}
+    </Aside>
+    <div className="content">{children}</div>
+  </main>
+);
 
-const Main = ({ children}) => <main className="mainWrapper">
-    skfjcmkszdxmk cmfd
-    <Aside>  </Aside>
-    <Content> 
-       <CAllAds/>    
-    </Content>
-    { children}
-</main>
-export default Main;
+export default Main;

project_marketplace/src/components/GridGallery/GridGallery.jsx

@@ -0,0 +1,28 @@
+import { Button, DialogTitle, DialogContent, TextField, DialogActions, Container, Grid, Card, CardMedia, CardContent, Typography, CardActions } from '@mui/material';
+// import { makeStyles } from '@mui/material/core/styles';
+const GridGallery = ({ cards, backendURL }) => {
+    return <div className='mainContent'>
+        <Container className="cardGrid" maxWidth="md"> 
+        <Grid container spacing={4}>
+                {cards.map((card) => (
+               <Grid item key={card._id} xs={12} sm={6} md={4 }>
+                <Card className='card'>
+                            {card.images && card.images[0] && card.images[0].url ? <CardMedia className="cardMedia"
+                                image={`${backendURL}/${card.images[0].url}`} title="Image title"></CardMedia> : <CardMedia className="cardMedia">заглушка</CardMedia>}
+                    <CardContent className="cardContent">
+                                <Typography variant="h5" gutterBottom>{card.title  }</Typography>
+                                <Typography >{card._id }</Typography>
+                            </CardContent>
+                            <CardActions>
+                                <Button size="small"></Button>
+                            </CardActions>
+                            {/* <LayerIcon/> */}
+                </Card>
+
+            </Grid>))}          
+            </Grid>
+            </Container>
+    </div>
+}
+ 
+export default GridGallery;

project_marketplace/src/components/Header/Header.jsx

@@ -1,37 +0,0 @@
-import logout from '../../images/logout1.png';
-import { useState } from 'react';
-import { Button, Dialog, DialogTitle, DialogContent, TextField, DialogActions } from '@mui/material';
-import { store } from '../../requests/reducers';
-import CLogout  from '../../components/LogOutBtn/LogOutBtn';
-const Header = ({ children}) => {
-    // let burgerState = false;
-    // let [menuState, setMenuState] = useState(burgerState);
-    // function handleMenu (burgerState) {setMenuState(burgerState) };
-
-    const [open, setOpen] = useState(true);
-    const handleClickOpen = () => setOpen(false);
-      const handleClose = () => setOpen(true);
-
-            return (
-                <header className='headerWrapper'>
-                    <div className='navWrapper'>
-                         { children}
-                        ksdmcksmfckmvscklmck
-                        <div className="searchWrapper">asdcascx</div>
-                      <Button onClick={handleClickOpen}><img src={logout} className='loginIcon' alt="logoutIcon" />{store.getState().auth.payload?.sub?.login }</Button>
-                         <CLogout/> 
-                       
-          
-                    </div>
-                   
-                {/* <div className={styles.container}>
-                    <div className={styles.wrapper}>
-                            <Logo />
-                            <Burger menuState={menuState} handleMenu = {(isOpen)=> setMenuState(isOpen)}/>
-                                        </div>
-                        <Menu menuList={menuList} contactsList={contactsList} menuState={ menuState}/>
-                </div> */}
-             </header>
-        );
-    };
-export default Header;

project_marketplace/src/components/LogOutBtn/LogOutBtn.jsx

@@ -1,7 +1,26 @@
 import { connect } from "react-redux";
-import { actionAuthLogout } from "../../requests/actions";
-import { Button, DialogTitle, DialogContent, TextField, DialogActions } from '@mui/material';
+import { actionAuthLogout } from "../../modules/actions";
+import { Button } from "@mui/material";
 
- const CLogout = connect(state => ({ children: `Выйти`}),
-     { onClick: actionAuthLogout })(Button);
-export default CLogout;
+const LogOutBtn = ({ children, onLogout }) => {
+  return (
+    <Button
+      variant="raised"
+      sx={{
+        height: "50px",
+        color: "lightGray",
+        fontWeight: "600",
+        "&:hover": {
+          backgroundColor: "rgba(256, 256, 256, 0.2)",
+        },
+      }}
+      onClick={() => onLogout()}
+    >
+      {children}
+    </Button>
+  );
+};
+const CLogout = connect((state) => ({ children: `Выйти` }), {
+  onLogout: actionAuthLogout,
+})(LogOutBtn);
+export default CLogout;

project_marketplace/src/components/LoggedWrapper/LoggedWrapper.jsx

@@ -0,0 +1,9 @@
+// import { connect } from 'react-redux';
+// import { store } from '../../modules/reducers';
+
+// const LoggedWrapper = ({ LoggedOut, LoggedIn }) => {
+
+//   return <>{store.getState().auth.token ? <LoggedIn/> : <LoggedOut/>}</>
+// }
+//     const CLoggedWrapper = connect(state => ({token: state.auth.token}))(LoggedWrapper);
+// export default CLoggedWrapper;

project_marketplace/src/components/Menu/Menu.jsx

@@ -0,0 +1,11 @@
+const Menu = () => {
+  return (
+    <ul>
+      <li> Все объявления</li>
+      <li> Подать объявление</li>
+      <li> Избранное</li>
+      <li>Мой профиль</li>
+    </ul>
+  );
+};
+export default Menu;

project_marketplace/src/components/Registration/LoginForm/LoginForm.jsx

@@ -1,42 +1,61 @@
-import { useState } from 'react';
-import { Button, DialogTitle, DialogContent, TextField, DialogActions } from '@mui/material';
-import { actionLogin } from '../../../requests/actions';
-import {connect } from 'react-redux';
+import { useState } from "react";
+import {
+  Button,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+} from "@mui/material";
+import { actionLogin } from "../../../modules/actions";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 
-const LoginForm = ({ handleOpen, onLogin }) => { 
-  
-  const [login, setLogin] = useState('');
-  const [password, setPassword] = useState('');
+const LoginForm = ({ handleOpen, onLogin }) => {
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
 
-   return <> 
-                 <div>     <DialogTitle id="registration">LOG IN</DialogTitle>
-                            <DialogContent>
-                                <TextField autoFocus margin='dense'
-                                    id='login'
-                                    label='Login'
-          type='text'
-          value={login}
-          onChange={e => setLogin(e.target.value) }
-                                    fullWidth>
-                                </TextField>
-                                <TextField margin='dense'
-                                    id='pass'
-                                    label='Password'
-          type='password'
-          value={password}
-          onChange={e => setPassword(e.target.value) }
-                                    fullWidth>
-                                </TextField>
-                                
-                            </DialogContent>
-      <DialogActions sx={{ display: "block" }}>
-     
-        <Button onClick={() => onLogin(login, password)}>  Log in </Button>
-       <div> Don't you have an account?
-        <Button onClick={handleOpen}>Sign up</Button></div>      
-          </DialogActions>
+  return (
+    <>
+      <div styles="color:gray">
+        <DialogTitle id="registration" sx={{ color: "rgb(90, 90, 90)" }}>
+          LOG IN
+        </DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="login"
+            label="Login"
+            type="text"
+            value={login}
+            onChange={(e) => setLogin(e.target.value)}
+            fullWidth
+          ></TextField>
+          <TextField
+            margin="dense"
+            id="pass"
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            fullWidth
+          ></TextField>
+        </DialogContent>
+        <DialogActions sx={{ display: "block" }}>
+          <Button onClick={() => onLogin(login, password)}> Log in </Button>
+          <div>
+            Don't you have an account?
+            <Link
+              style={{ textDecoration: "none", color: "inherit" }}
+              to="/signup"
+            >
+              <Button onClick={handleOpen}>Sign up</Button>
+            </Link>
           </div>
-           </>
-}
-const CLoginForm = connect(null, { onLogin: actionLogin })(LoginForm)
-export default CLoginForm;
+        </DialogActions>
+      </div>
+    </>
+  );
+};
+const CLoginForm = connect(null, { onLogin: actionLogin })(LoginForm);
+export default CLoginForm;

project_marketplace/src/components/Registration/Registration.jsx

@@ -1,13 +0,0 @@
-import CLoginForm from "./LoginForm/LoginForm";
-import SignUpForm from "./SignUpForm/SignUpForm";
-import FirstPage from "../FrontArchitecture/FirstPage/FirstPage";
-import { useState } from "react";
-
-const Registration = () => {
-    const [signUp, setSignUp] = useState(false);
-    const signUpOpen = () => { setSignUp(true) };
-    const signUpClose = () => { setSignUp(false) };
-    return !signUp ? (<FirstPage Render={CLoginForm} handleOpen={signUpOpen}></FirstPage>):(<FirstPage Render={SignUpForm} handleOpen={signUpClose}></FirstPage>)
-
- };
-export default Registration;

project_marketplace/src/components/Registration/SignUpForm/SignUpForm.jsx

@@ -1,52 +1,83 @@
-import { useState } from 'react';
-import { Button, DialogTitle, DialogContent, TextField, DialogActions } from '@mui/material';
+import { useState } from "react";
+import { connect } from "react-redux";
+import { actionRegister } from "../../../modules/actions";
+import {
+  Button,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+} from "@mui/material";
+import { Link } from "react-router-dom";
 
-const SignUpForm = ({handleOpen }) => { 
-  const [login, setLogin] = useState('');
-  const [password, setPassword] = useState('');
-    const [passwordConf, setPasswordConf] = useState('');
+const SignUpForm = ({ handleOpen }) => {
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordConf, setPasswordConf] = useState("");
   const handleUserInput = (inputValue, inputType) => {
-    (inputType === 'login') && setLogin(inputValue);
-    (inputType === 'password') && setPassword(inputValue);
-    (inputType === 'passwordConf') && setPasswordConf(inputValue);
+    inputType === "login" && setLogin(inputValue);
+    inputType === "password" && setPassword(inputValue);
+    inputType === "passwordConf" && setPasswordConf(inputValue);
   };
-  
-  return <>
-            <div>     <DialogTitle id="registration">SIGN UP</DialogTitle>
-                            <DialogContent sx={{ width:"446px" }}>
-                                <TextField autoFocus margin='dense'
-                                    id='login'
-                                    label='Login'
-          type='text'
-          value={login}
-          onChange={e => { handleUserInput(setLogin(e.target.value, 'login')) }}
-                                    fullWidth>
-                                </TextField>
-                                <TextField margin='dense'
-                                    id='pass'
-                                    label='Password'
-          type='password'
-          value={password}
-          onChange={e => { handleUserInput(setPassword(e.target.value, 'password')) }}
-                                    fullWidth>
-        </TextField>
-        
-          <TextField margin='dense'
-                                    id='passConf'
-                                    label='Confirm Password'
-          type='password'
-          value={passwordConf}
-          onChange={e => { handleUserInput(setPassword(e.target.value, 'passwordConf')) }}
-                                    fullWidth>
-                                </TextField>                                
-                            </DialogContent>
-      <DialogActions sx={{ display: "block"}}>    
+
+  return (
+    <>
+      <div>
+        {" "}
+        <DialogTitle id="registration">SIGN UP</DialogTitle>
+        <DialogContent sx={{ width: "446px" }}>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="login"
+            label="Login"
+            type="text"
+            value={login}
+            onChange={(e) => {
+              handleUserInput(setLogin(e.target.value, "login"));
+            }}
+            fullWidth
+          ></TextField>
+          <TextField
+            margin="dense"
+            id="pass"
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => {
+              handleUserInput(setPassword(e.target.value, "password"));
+            }}
+            fullWidth
+          ></TextField>
+
+          <TextField
+            margin="dense"
+            id="passConf"
+            label="Confirm Password"
+            type="password"
+            value={passwordConf}
+            onChange={(e) => {
+              handleUserInput(setPassword(e.target.value, "passwordConf"));
+            }}
+            fullWidth
+          ></TextField>
+        </DialogContent>
+        <DialogActions sx={{ display: "block" }}>
           <Button onClick={handleOpen}>Sign Up</Button>
           {/* <Button onClick={(e) => { onLogin(login, password) }}>Sign up</Button> */}
-          <div>Already have an account? <Button onClick={handleOpen}>Log in</Button></div>
-     
-          </DialogActions>
-          </div>
-               </>
-}
-export default SignUpForm;
+          <Link
+            style={{ textDecoration: "none", color: "inherit" }}
+            to="/login"
+          >
+            <div>
+              Already have an account?{" "}
+              <Button onClick={handleOpen}>Log in</Button>
+            </div>
+          </Link>
+        </DialogActions>
+      </div>
+    </>
+  );
+};
+const CSignUpForm = connect(null, { onReg: actionRegister })(SignUpForm);
+export default CSignUpForm;

project_marketplace/src/components/Routing/Routing.jsx

@@ -1,17 +1,122 @@
-import { connect } from 'react-redux';
-import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
-import Registration from '../Registration/Registration';
+import { connect } from "react-redux";
+import { Router, Route, Link, Redirect, Switch } from "react-router-dom";
+import AllAdsPage from "../../pages/AllAdsPage";
+import LoginPage from "../../pages/LoginPage";
+import SignUpPage from "../../pages/SignUpPage";
+import UserProfilePage from "../../pages/UserProfilePage";
+import UserNewAdPage from "../../pages/UserNewAdPage";
+import UserAdsPage from "../../pages/UserAdsPage";
+import UserAdEditPage from "../../pages/UserAdEditPage";
+import UserFavPage from "../../pages/UserFavAdsPage";
+import SearchPage from "../../pages/SearchPage";
+import AdPage from "../../pages/AdPage";
+import { store } from "../../modules/reducers";
 
-const PageRoute = (token) => {
-return  <div>
+const ProtectedRoute = ({
+  roles = [],
+  fallback = "/login",
+  component,
+  auth = ["anon"],
+  ...routeProps
+}) => {
+  const WrapperComponent = (renderProps) => {
+    const C = component;
+    const resultArray = roles.filter((role) => auth.includes(role));
+    if (resultArray.length === 0) {
+      return <Redirect to={fallback} />;
+    } else return <C {...renderProps} />;
+  };
+  return <Route {...routeProps} component={WrapperComponent}></Route>;
+};
+const CProtectedRoute = connect((state) => ({
+  auth: state.auth.payload?.sub.acl,
+}))(ProtectedRoute);
+
+// const ProtectedRoute = ({
+//   roles = [],
+//   fallback = "/login",
+//   component,
+//   auth,
+//   ...routeProps
+// }) => {
+//   const WrapperComponent = (renderProps) => {
+//     const Component = component;
+//     if (!auth) auth = ["anon"];
+//     let res = roles.filter((x) => auth.includes(x));
+//     if (res.length > 0) {
+//       return <Redirect to={fallback} />;
+//     } else return <Component {...renderProps} />;
+//     // connect auth к reduxState.auth.payload.sub.acl
+//     // сопоставить аuth с roles
+//     // auth пустой то auth =["anon"]
+//     // если пересечение массивов пустое ьл перейти в history.push  или <Redirect to> на fallback
+//     //иначе отрисовка компонента
+//   };
+//   return <Route {...routeProps} component={WrapperComponent} />;
+// };
+
+const Page404 = () => {
+  return <div>WTF</div>;
+};
+
+const Routing = ({ token }) => {
+  return (
+    <div>
+      {/* <Switch> */}
+      {token ? <Redirect to="/main" /> : <Redirect to="/login" />}
+      <CProtectedRoute
+        roles={["anon"]}
+        fallback="/main"
+        path="/login"
+        component={LoginPage}
+      />
+      <CProtectedRoute
+        roles={["user"]}
+        fallback="/login"
+        path="/main"
+        component={AllAdsPage}
+      />
       <Switch>
-       {/* <Route path="/registration" component={CRegistrationForm} /> */}
-       <Route path="/login" component={Registration} />
-        {/* <Route path="/login" component={CLoginForm} /> */}
-             </Switch>
+        <CProtectedRoute
+          roles={["anon"]}
+          fallback="/login"
+          path="/signup"
+          component={SignUpPage}
+        />
+        <CProtectedRoute
+          roles={["user"]}
+          fallback="/main"
+          path="/user_profile"
+          component={UserProfilePage}
+        />
+        <CProtectedRoute
+          roles={["user"]}
+          fallback="/main"
+          path="/new_ad"
+          component={UserNewAdPage}
+        />
+        {/* <Route path="/signup" component={SignUpPage} /> */}
+        {/* <Route path="/user_profile" component={UserProfilePage}/ > */}
+        {/* {!store.getState().auth.token && <Redirect to="/login" />} */}
+        {/* {store.getState().auth.token && <Redirect to="/main" />} */}
+        {/* {localStorage.authToken && <Redirect to="/main" />} */}
+        {/* <Redirect from="/main" to="/" /> */}
+        {/* {store.getState().auth.token && <Redirect to="/main" />} */}
+
+        {/* {store.getState().auth.token && <Redirect to="/main" />} */}
+        <Route path="*" component={Page404} />
+      </Switch>
     </div>
- 
-}
+  );
+};
+
+const CRouting = connect((state) => ({ token: state.auth.token }))(Routing);
+export default CRouting;
 
-const CPageRoute = connect(state => ({ token: state.authReducer.token }))(PageRoute);
-export default CPageRoute;
+{
+  /* <Route path="/register" component={CSignUpForm}/> */
+}
+{
+  /* <Route path="/login" component={LoginPage} />
+            <Route path="/main" component={AllAdsPage} /> */
+}

project_marketplace/src/modules/actions.js

@@ -0,0 +1,211 @@
+import { gql } from "./reducers";
+import { uploadFile } from "../basic/uploadFilesFunc";
+
+export const actionPending = (name) => ({
+  type: "PROMISE",
+  name,
+  status: "PENDING",
+});
+export const actionFulfilled = (name, payload) => ({
+  type: "PROMISE",
+  name,
+  status: "FULFILLED",
+  payload,
+});
+
+export const actionRejected = (name, error) => ({
+  type: "PROMISE",
+  name,
+  status: "REJECTED",
+  error,
+});
+
+export const actionPromise = (name, promise) => async (dispatch) => {
+  dispatch(actionPending(name));
+  try {
+    let payload = await promise;
+    dispatch(actionFulfilled(name, payload));
+    return payload;
+  } catch (error) {
+    dispatch(actionRejected(name, error));
+  }
+};
+
+//Регистрация
+
+async function gqlRegistration(login, password) {
+  try {
+    let result = await gql(
+      `mutation register ($login:String!, $password:String!){
+  createUser(login:$login password:$password){
+    _id login
+  }
+}`,
+      { login: login, password: password }
+    );
+    return result.errors
+      ? result.errors[0].message
+      : result.data.UserUpsert._id;
+  } catch (e) {
+    return e;
+  }
+}
+
+export const actionRegister = (login, password) => async (dispatch) => {
+  let user = await dispatch(
+    actionPromise("login", gqlRegistration(login, password))
+  );
+  if (user) {
+    await dispatch(actionLogin(login, password));
+  }
+};
+
+//Авторизация
+// async function gqlLogin(login, password) {
+//     try {
+//         let result = await gql(` query log($login:String!, $password:String!){
+//     login(login:$login, password:$password)
+//   }`,
+//             { "login": login, "password": password });
+
+//         return (result.data.login?result.data.login:'Пользователь не найден')
+//     }
+//        catch(e) {return e}
+// };
+
+export const actionLogin = (login, password) => async (dispatch) => {
+  let token = await dispatch(
+    actionPromise(
+      "login",
+      gql(
+        ` query login($login:String!, $password:String!){
+    login(login:$login, password:$password)
+  }`,
+        { login, password }
+      )
+    )
+  );
+  if (token) {
+    await dispatch(actionAuthLogin(token));
+  } else {
+    console.log("Пользователь не найден");
+    // else {
+    //   console.log(token.status);
+  }
+};
+
+export const actionAuthLogin = (token) => ({ type: "AUTH_LOGIN", token });
+
+export const actionFullLogin = (login, password) => ({
+  type: "FULL_LOGIN",
+  login,
+  password,
+});
+
+export const actionAuthLogout = () => ({ type: "AUTH_LOGOUT" });
+
+//Загрузка всех объявлений
+export const actionAllAds = () =>
+  actionPromise(
+    "allAds",
+    gql(
+      `query ads($query: String){
+        AdFind(query: $query) {
+            _id, 
+            owner {
+                login
+            },
+            images {
+                url
+            },
+            title,
+            description,
+            price
+        }
+    }`,
+      { query: JSON.stringify([{}, { sort: [{ _id: -1 }] }]) }
+    )
+  );
+
+//Загрузка объявления по id
+export const actionAdById = (_id) =>
+  actionPromise(
+    "adById",
+    gql(
+      `query adById($query: String){
+        AdFindOne(query:$query){
+            _id,
+            owner {
+              login
+            },
+            images {
+              _id,
+              url
+            },
+            comments {
+              _id,
+              text,
+              owner {
+                  login
+              }
+            },
+            createdAt,
+            title, 
+            description,
+            tags,
+            address,
+            price,
+			}
+        }`,
+      { query: JSON.stringify([{ _id }]) }
+    )
+  );
+
+//Загрузка картинки аватара
+export const actionAvatar = (imageId) => async (dispatch, getState) => {
+  await dispatch(
+    actionPromise(
+      "setAvatar",
+      gql(
+        `mutation setAvatar ( $imageId:ID, $user_id:String) {
+    UserUpsert(user:{_id: $user_id, avatar: {_id: $imageId}}){
+        _id, avatar{
+            _id
+        }
+    }}`,
+        { imageId, user_id: getState().auth.payload?.sub?.id }
+      )
+    )
+  );
+};
+
+export const actionSetAvatar = (file) => async (dispatch) => {
+  let result = await dispatch(actionUploadFile(file));
+  if (result) {
+    await dispatch(actionAvatar(result._id));
+    // dispatch(actionAboutMe(store.state.auth.payload));
+  }
+};
+
+//Загрузка изображений к объявлению Ad
+export const actionUploadFile = (file) =>
+  actionPromise("uploadFile", uploadFile(file));
+export const actionUploadFiles = (files) =>
+  actionPromise(
+    "uploadFiles",
+    Promise.all(files.map((file) => uploadFile(file)))
+  );
+
+export const actionAdUpsert = (ad) =>
+  actionPromise(
+    "adUpsert",
+    gql(
+      `
+mutation AdUpsert($ad:AdInput){
+  AdUpsert(ad:$ad){
+    _id title
+  }
+}`,
+      { ad: { ...ad, images: ad.images.map(({ _id }) => ({ _id })) } }
+    )
+  );

project_marketplace/src/requests/reducers.js

@@ -70,6 +70,6 @@ function promiseReducer(state = {}, { type, name, status, payload, error }) {
 const store = createStore(combineReducers({
     promise: promiseReducer,
     auth: authReducer,
-   }), applyMiddleware(thunk));
+     }), applyMiddleware(thunk));
 
 export {store, backendURL, gql};

project_marketplace/src/pages/AdPage/index.js

@@ -0,0 +1,17 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const AdPage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>{/* <CAllAds /> */}</Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default AdPage;

project_marketplace/src/pages/AllAdsPage/index.js

@@ -0,0 +1,19 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const AllAdsPage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>
+        <CAllAds />
+      </Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default AllAdsPage;

project_marketplace/src/pages/LoginPage/index.js

@@ -0,0 +1,18 @@
+// import CRegistration from "../../components/Registration/Registration";
+import FirstPage from "../../components/FrontArchitecture/FirstPage/FirstPage";
+import CLoginForm from "../../components/Registration/LoginForm/LoginForm";
+
+const LoginPage = () => {
+  return <FirstPage Render={CLoginForm}></FirstPage>;
+};
+export default LoginPage;
+
+// const Registration = () => {
+//     const [signUp, setSignUp] = useState(false);
+//     const signUpOpen = () => { setSignUp(true) };
+//     const signUpClose = () => { setSignUp(false) };
+//     return !signUp ? (<FirstPage Render={CLoginForm} handleOpen={signUpOpen}></FirstPage>):(<FirstPage Render={SignUpForm} handleOpen={signUpClose}></FirstPage>)
+
+// };
+// const CRegistration = connect(state => ({ token: state.auth.token || {} }))(Registration);
+// export default CRegistration;

project_marketplace/src/pages/SearchPage/index.js

@@ -0,0 +1,17 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+// import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const SearchPage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>{/* <CAllAds /> */}</Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default SearchPage;

project_marketplace/src/pages/SignUpPage/index.js

@@ -0,0 +1,7 @@
+import FirstPage from "../../components/FrontArchitecture/FirstPage/FirstPage";
+import CSignUpForm from "../../components/Registration/SignUpForm/SignUpForm";
+
+const SignUpPage = () => {
+  return <FirstPage Render={CSignUpForm}></FirstPage>;
+};
+export default SignUpPage;

project_marketplace/src/pages/UserAdEditPage/index.js

@@ -0,0 +1,17 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const UserAdEditPage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>{/* <CAllAds /> */}</Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default UserAdEditPage;

project_marketplace/src/pages/UserAdsPage/index.js

@@ -0,0 +1,17 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const UserAdsPage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>{/* <CAllAds /> */}</Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default UserAdsPage;

project_marketplace/src/pages/UserFavAdsPage/index.js

@@ -0,0 +1,17 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const UserFavAdsPage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>{/* <CAllAds /> */}</Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default UserFavAdsPage;

project_marketplace/src/pages/UserNewAdPage/index.js

@@ -0,0 +1,90 @@
+import { CBasic } from "../../components/DropZone/DropZone";
+import { uploadFile, uploadFiles } from "../../basic/uploadFilesFunc";
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import {
+  Button,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  DialogActions,
+  Container,
+  Typography,
+} from "@mui/material";
+
+const UserNewAdPage = () => {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const onPublick = () => {};
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>
+        <Container className="newAd" maxWidth="md">
+          <DialogTitle id="newAd" sx={{ color: "rgb(90, 90, 90)" }}>
+            <Typography variant="h4" gutterBottom>
+              Создать объявление
+            </Typography>
+          </DialogTitle>
+          <DialogContent>
+            <Typography variant="h5" gutterBottom>
+              Опишите в подробностях
+            </Typography>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="title"
+              label="Укажите название"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              fullWidth
+              required
+            ></TextField>
+            <Typography variant="h5" gutterBottom>
+              Фото
+            </Typography>
+            <p>Первое фото будет на обложке объявления.</p>
+            <p>Перетащите, чтобы изменить порядок.</p>
+            <CBasic onLoad={uploadFile} />
+            <Typography variant="h5" gutterBottom>
+              Описание*
+            </Typography>
+            <TextField
+              multiline
+              maxRows="10"
+              margin="dense"
+              id="desc"
+              label="Описание"
+              type="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              fullWidth
+              required
+            ></TextField>
+          </DialogContent>
+          <DialogActions sx={{ display: "block" }}>
+            <Button variant="contained" onClick={() => onPublick()}>
+              {" "}
+              Опубликовать{" "}
+            </Button>
+            <div>
+              {/* <Link
+                style={{ textDecoration: "none", color: "inherit" }}
+                to="/signup"
+              >
+                <Button onClick={handleOpen}>Sign up</Button>
+              </Link> */}
+            </div>
+          </DialogActions>
+        </Container>
+      </Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default UserNewAdPage;

project_marketplace/src/pages/UserProfilePage/index.js

@@ -0,0 +1,17 @@
+import BodyWrapper from "../../components/FrontArchitecture/BodyWrapper/BodyWrapper";
+import CAllAds from "../../components/AllAds/AllAds";
+import Header from "../../components/FrontArchitecture/Header/Header";
+import Main from "../../components/FrontArchitecture/Main/Main";
+import Footer from "../../components/Footer/Footer";
+import { Link } from "react-router-dom";
+
+const UserProfilePage = () => {
+  return (
+    <BodyWrapper>
+      <Header />
+      <Main>{/* <CAllAds /> */}</Main>
+      <Footer />
+    </BodyWrapper>
+  );
+};
+export default UserProfilePage;

project_marketplace/src/requests/actions.js

@@ -1,188 +0,0 @@
-import { gql, store } from './reducers';
-import { uploadFile } from '../basic/uploadFilesFunc';
-
-
-const actionPending = (name) => ({ type: "PROMISE", name, status: "PENDING" });
-const actionFulfilled = (name, payload) => ({
-    type: "PROMISE",
-    name,
-    status: "FULFILLED",
-    payload,
-});
-
-const actionRejected = (name, error) => ({
-    type: "PROMISE",
-    name,
-    status: "REJECTED",
-    error,
-});
-
-const actionPromise = (name, promise) =>
-    async (dispatch) => {
-    dispatch(actionPending(name));
-    try {
-        let payload = await promise;
-        dispatch(actionFulfilled(name, payload));
-        return payload;
-    } catch (error) {
-        dispatch(actionRejected(name, error));
-    }
-};
-
-//Регистрация
-
-async function gqlRegistration(login, password) {
-    try {
-        let result = await gql(`mutation register ($login:String!, $password:String!){
-  createUser(login:$login password:$password){
-    _id login
-  }
-}`,
-            { "login": login, "password": password });
-        return (result.errors?result.errors[0].message:result.data.UserUpsert._id);
-    }
-    catch (e) {return e}
-};
-
-const actionRegister = (login, password) => 
-    async dispatch => {
-        let user = await dispatch(actionPromise('login', gqlRegistration(login, password)));
-        if (user) { await dispatch(actionLogin(login, password)) }
-    };
-
-//Авторизация
-// async function gqlLogin(login, password) {
-//     try {
-//         let result = await gql(` query log($login:String!, $password:String!){
-//     login(login:$login, password:$password)
-//   }`,
-//             { "login": login, "password": password }); 
-                  
-//         return (result.data.login?result.data.login:'Пользователь не найден')
-//     }
-//        catch(e) {return e}   
-// };
-
-const actionLogin = (login, password) =>
-    async dispatch => {
-        let token = await dispatch(actionPromise("login", gql(` query login($login:String!, $password:String!){
-    login(login:$login, password:$password)
-  }`,
-    { login, password })));
-        if (token) { await dispatch(actionAuthLogin(token)) }
-    };
-
-
-
-//  const actionLogin = (login, password) => async (dispatch) => {
-//   let token = await dispatch(
-//     actionPromise(
-//       'auth',
-//       gql(
-//         ` query login($login:String!, $password:String!){
-//             login(login:$login, password:$password)} `,
-//         { login, password },
-//       ),
-//     ),
-//   )
-//   if (token) {
-//     dispatch(actionAuthLogin(token))
-//   }
-// }
-
-const actionAuthLogin = (token) => ({ type: "AUTH_LOGIN", token });
-
-
-const actionFullLogin = (login, password) => ({ type: 'FULL_LOGIN', login, password });
-
-const actionAuthLogout = () => ({ type: "AUTH_LOGOUT" });
-
-//Загрузка всех объявлений
-const actionAllAds = () => 
-    actionPromise('allAds', gql(`query ads($query: String){
-        AdFind(query: $query) {
-            _id, 
-            owner {
-                login
-            },
-            images {
-                url
-            },
-            title,
-            description,
-            price
-        }
-    }`, { query: JSON.stringify([ {},{ sort: [{ _id: -1 }] }]) }
-    ))
-
-//Загрузка объявления по id
-const actionAdById = (_id) => 
-    actionPromise('adById', gql(`query adById($query: String){
-        AdFindOne(query:$query){
-            _id,
-            owner {
-              login
-            },
-            images {
-              _id,
-              url
-            },
-            comments {
-              _id,
-              text,
-              owner {
-                  login
-              }
-            },
-            createdAt,
-            title, 
-            description,
-            tags,
-            address,
-            price,
-			}
-        }`,
-        {query: JSON.stringify([{ _id }])
-        }
-    ))
-
-
-//Загрузка картинки аватара
-const actionAvatar = (imageId) =>
-    async (dispatch, getState) => {
-        await dispatch(actionPromise('setAvatar', gql(`mutation setAvatar ( $imageId:ID, $user_id:String) {
-    UserUpsert(user:{_id: $user_id, avatar: {_id: $imageId}}){
-        _id, avatar{
-            _id
-        }
-    }}`, { imageId, user_id: getState().auth.payload?.sub?.id })))
-    };
-
-const actionSetAvatar = file =>
-    async (dispatch) => {
-        let result = await dispatch(actionUploadFile(file));
-        if (result) {
-            await dispatch(actionAvatar(result._id));
-            // dispatch(actionAboutMe(store.state.auth.payload));
-        }
-    };
-   
-   //Загрузка изображений к объявлению Ad
-const actionUploadFile = file => actionPromise('uploadFile', uploadFile(file));
-const actionUploadFiles = files => actionPromise('uploadFiles', Promise.all(files=>files.map(file=>uploadFile(file))));
-
-const actionAdUpsert = (ad) =>
-    actionPromise(
-        'adUpsert',
-        gql(
-            `
-mutation AdUpsert($ad:AdInput){
-  AdUpsert(ad:$ad){
-    _id title
-  }
-}`,
-            { ad: { ...ad, images: ad.images.map(({ _id }) => ({ _id })) } },
-        ),
-    );
-
-export {actionPending, actionFulfilled, actionRejected, actionPromise, actionRegister, actionLogin, actionAuthLogin, actionFullLogin, actionAuthLogout, actionAdById, actionAvatar, actionSetAvatar, actionAllAds,  actionUploadFile, actionUploadFiles, actionAdUpsert  };