Added h1 tag

package.json

@@ -2,6 +2,7 @@
   "name": "olx",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://marketplace.asmer.fs.a-level.com.ua/",
   "dependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",

src/App.js

@@ -18,7 +18,7 @@ import {
 } from "react-router-dom";
 
 import TypeAd, {Home} from "./pages/Home";
-import ConnectSign from './pages/Login';
+import ConnectSign from './pages/Sign';
 import {Login} from "./pages/Login";
 import {Instruction} from "./pages/Instriction";
 import {Advertisment} from "./pages/Advertisment";
@@ -34,7 +34,7 @@ function App() {
           <Navibar />
           <Footer />
           <Switch>
-            <Route exact path='/' component={Home}/>
+            <Route exact path='/' component={TypeAd}/>
             <Route path='/sign' component={ConnectSign}/>
             <Route path='/login' component={ConnectLog}/>
             <Route path='/instruction' component={Instruction} />

src/App.scss

@@ -33,6 +33,10 @@
     justify-content: center;
     align-items: center;
 
+    .login-container {
+        display: flex;
+        flex-direction: column;
+    }
     .pwd-container {
         display: flex;
         flex-direction: column;
@@ -47,6 +51,43 @@
     }
 }
 
+.divSign {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .login-container {
+        display: flex;
+        flex-direction: column;
+    }
+    .pwd-container1 {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    .pwd-container2 {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    img {
+        position: absolute;
+        cursor: pointer;
+        width: 12%;
+        top: 50%;
+        left: 85%;
+    }
+}
+
+.ad {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 30%;
+    margin: 0 auto;
+}
+
 
 footer {
     background: #002f34;

src/Components/CAdFeed.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { actionTypeAd } from "../actions";
+import {connect} from 'react-redux';
+import {Link} from 'react-router-dom';
+
+
+export const AdFeed=({_id, price, owner,title,description,images}) => {
+    return (
+        <div className="ad">
+            <Link to={ `/${_id}`}>{title}</Link>
+            <img src = {`http://marketplace.fs.a-level.com.ua/${Ad.images[0].url}`} />
+            <p>{description}</p>
+            <p>{owner}</p>
+            <p>{price}</p>
+        </div>
+    )
+}
+
+// const CAdFeed = connect(state =>({listAd: state.promiseReducer?.AdFind?.payload?.data?.AdFind || []}),{listAd: actionTypeAd})(AdFeed)
+// export default CAdFeed

src/Components/RegErrors/Confirmpass.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ConfirmPass = () => {
+    return (
+        <div className='confirmPassword-error__wrapper'>
+            <p>Пароли не совпадают!</p>
+        </div>
+    )
+}
+
+export default ConfirmPass;

src/Components/RegErrors/exicitingLogin.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ExistingLogin = () => {
+    return (
+        <div className='registration-error__wrapper'>
+            <p>Данный пользователь уже зарегистрирован</p>
+        </div>
+    )
+}
+
+export default ExistingLogin;

src/Components/RegErrors/numberCheckPass.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const NumberCheckPass = () => {
+    return (
+        <div className='registration-error__wrapper'>
+           <p>Добавьте цифры в пароль</p>
+        </div>
+    )
+}
+
+export default NumberCheckPass;

src/actions/index.js

@@ -13,7 +13,7 @@ export const actionPending = name => ({type: 'PROMISE', status: 'PENDING', name}
 export const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload})
 export const actionRejected = (name, error) => ({type: 'PROMISE', status: 'REJECTED', name, error})
 
-let shopGQL = getGQL('http://marketplace.asmer.fs.a-level.com.ua/graphql')
+let shopGQL = getGQL('/graphql')
 
 export const actionPromise = (name, promise) => 
     async dispatch => {
@@ -55,51 +55,43 @@ export const actionFullLogin = (login, password) => {
           dispatch(actionAuthLogin(result))
   }
 }
-
+//dsfsdfsd
 const actionRegister = (login,password) =>
     actionPromise('reg',shopGQL(`mutation reg($login: String!, $password: String!){
         createUser(login:$login, password: $password){
         _id login
     }
-}`,{query: {login,password}}))
+}`,{login,password}))
 
 export const actionFullRegister = (login,password) => 
   async dispatch => {
     let payload = await dispatch(actionRegister(login,password))
-    if(payload.data.UserUpsert != null){
+    if(payload.data.createUser != null){
       await dispatch(actionFullLogin(login,password))
     }
+    else {
+      console.log("exiciting user")
+    }
   }
 
-// export const actionReg = (login, password) =>
-//     async dispatch => {
-//         let loginData = await dispatch(actionPromise('reg', shopGQL(
-//             `mutation reg($login: String!, $password: String!){
-//                 createUser(login:$login, password: $password){
-//                   _id
-//                 }
-//               }`, { login, password })))
-//         if (loginData && loginData.data && (loginData.data.createUser != null)) {
-//             dispatch(actionLogin(login, password))
-//             console.log(loginData.data)
-//         }
-//     }
-
 export const actionTypeAd = () =>
-    actionPromise('type Ad', shopGQL(`
+    actionPromise('AdFind', shopGQL(`
             query Ad($query:String){
-              type AdFind(query:$query){
-                _id 
-                owner
-                images
-                comments
-                createdAt
+              AdFind(query:$query){
+                _id  
                 title
                 description
-                tags
-                address
                 price
+                images {
+                  url
+                }
               }
             }
-        `, {query: JSON.stringify([{parent:null}])}))
+        `, {query: JSON.stringify([{}])}))
 
+        // tags
+        // address
+        // images
+        // comments
+        // createdAt
+        //img

src/pages/Home.js

@@ -1,14 +1,19 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {connect}   from 'react-redux';
-import {useState} from "react";
-import {actionTypeAd} from '../actions'
+import {AdFeed} from "../Components/CAdFeed";
+import { actionTypeAd } from "../actions";
 
 
-export const Home = (_id,owner) => {
-    return (
-        <h1>home</h1>
-    )
+export const Home = ({getData,data2}) => {
+    useEffect(()=>getData(),[])
+    if(data2){
+        return (
+            <div>
+                {data2.map(ad => <AdFeed key={ad._id} _id = {ad. _id} price = {ad.price} title = {ad.title} description={ad.description} owner={ad.owner} images={ad.images}/>)}
+            </div>
+        )
+    }
 }
 
-const TypeAd = connect(null,{_id: actionTypeAd})(Home)
+const TypeAd = connect(state => ({data2: state.promiseReducer.AdFind?.payload?.data?.AdFind || []}),{getData: actionTypeAd})(Home)
 export default TypeAd

src/pages/Login.js

@@ -3,8 +3,8 @@ import {connect}   from 'react-redux';
 import {useState} from "react";
 import {actionFullLogin} from '../actions'
 
-import showPwdImg from './3844476-eye-see-show-view-watch_110339.svg';
-import hidePwdImg from './3844477-disable-eye-inactive-see-show-view-watch_110343.svg';
+import showPwdImg from '../images/3844476-eye-see-show-view-watch_110339.svg';
+import hidePwdImg from '../images/3844477-disable-eye-inactive-see-show-view-watch_110343.svg';
 
 const LoginForm = ({onLogin}) => {
   const [login,setLogin] = useState('')
@@ -13,7 +13,7 @@ const LoginForm = ({onLogin}) => {
   return (
     <div className="divLogin">
         <h4>Войти</h4>
-        <div>
+        <div className="login-container">
             <label>Nickname</label>
             <input value={login} onChange={e => setLogin(e.target.value)} placeholder="Nickname"></input>
         </div>

src/pages/Sign.js

@@ -3,29 +3,42 @@ import {connect}   from 'react-redux';
 import {useState} from "react";
 import {actionFullRegister} from '../actions'
 import {Redirect} from 'react-router-dom';
+import ConfirmPass from "../Components/RegErrors/Confirmpass";
+import ExistingLogin from "../Components/RegErrors/exicitingLogin";
+import NumberCheckPass from "../Components/RegErrors/numberCheckPass";
+import showPwdImg from '../images/3844476-eye-see-show-view-watch_110339.svg';
+import hidePwdImg from '../images/3844477-disable-eye-inactive-see-show-view-watch_110343.svg';
 
-const Sign = ({onSign,loggedIn}) => {
+
+const Sign = ({onSign,loggedIn,confirmError, numberError}) => {
     const [login,setLogin] = useState('')
     const [password,setPassword] = useState('')
+    const [password2,setPassword2] = useState('')
     const [open,setOpen] = useState(false)
+    const [open2,setOpen2] = useState(false)
     return (
       <div className="divSign">
-          <h4>Войти</h4>
-          <div>
-              <label>Nickname</label>
+          <h4>Регистрация</h4>
+          <div className="login-container">
+              <label>Придумайте логин</label>
               <input value={login} onChange={e => setLogin(e.target.value)} placeholder="Nickname"></input>
           </div>
-          <div className='pwd-container2'>
-              <label>Ваш текущий пароль от olx</label>
+          <div className='pwd-container1'>
+              <label>Придумайте пароль</label>
               <input value={password} type={open ? "text" : "password"} onChange={e => setPassword(e.target.value)} placeholder="Пароль"  />
               <img src={open ? hidePwdImg : showPwdImg} onClick={() => setOpen(!open)}/>
           </div>
-              <button onClick={() => onSign(login,password)}>Send</button>  
-              {loggedIn && <Redirect from="/sign" to="/" />}
+          <div className='pwd-container2'>
+              <label>Повторите пароль</label>
+              <input value={password2} type={open2 ? "text" : "password"} onChange={e => setPassword2(e.target.value)} placeholder="Пароль"  />
+              <img src={open2 ? hidePwdImg : showPwdImg} onClick={() => setOpen2(!open2)}/>
+          </div>
+              <button onClick={() => {onSign(login,password)}}>Send</button>  
+              {loggedIn && <Redirect from="/sign" to="/" /> || numberError && (!password.match(/\d/)) ? <NumberCheckPass /> : (password !== password2) ? <ConfirmPass /> : console.log("poshel nahoi")}
       </div>
 
     )
 }
 
-const ConnectSign = connect(store=> ({loggedIn:store.authReducer.login }),{onSign: actionFullRegister})(Sign)
+const ConnectSign = connect(state=> ({loggedIn:state.authReducer.login}),{onSign: actionFullRegister})(Sign)
 export default ConnectSign

src/reducers/authReducer.js

@@ -0,0 +1,24 @@
+export function authReducer(state, action){
+    if(state === undefined){
+        if(localStorage.authToken || localStorage.authToken === 'null'){
+            action.type = 'LOGIN'
+            action.token = localStorage.authToken
+        }
+        else {
+            return {}
+        }
+    }
+    if(action.type === 'LOGIN'){
+        console.log('LOGIN')
+        localStorage.authToken = action.token
+        let tok = localStorage.authToken.split('.')[1]
+        let decoded = JSON.parse(atob((tok)))
+        return {token:action.token, payload: decoded}
+    }
+    if(action.type === 'LOGOUT'){
+        console.log("LOGOUT")
+        localStorage.authToken = ''
+        return {}
+    }
+    return state
+  }

src/reducers/index.js

@@ -1,46 +1,11 @@
 import thunk from 'redux-thunk';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
+import { authReducer } from './authReducer';
+import { promiseReducer } from './promiseReducer';
 
- function authReducer(state, action){
-    if(state === undefined){
-        if(localStorage.authToken || localStorage.authToken === 'null'){
-            action.type = 'LOGIN'
-            action.token = localStorage.authToken
-        }
-        else {
-            return {}
-        }
-    }
-    if(action.type === 'LOGIN'){
-        console.log('LOGIN')
-        localStorage.authToken = action.token
-        let tok = localStorage.authToken.split('.')[1]
-        let decoded = JSON.parse(atob((tok)))
-        return {token:action.token, payload: decoded}
-    }
-    if(action.type === 'LOGOUT'){
-        console.log("LOGOUT")
-        localStorage.authToken = ''
-        return {}
-    }
-    return state
-  }
-
-  function promiseReducer(state={}, {type, status, payload, error, name}){
-      if (type === 'PROMISE'){
-          return {
-              ...state,
-              [name]:{status, payload, error}
-          }
-      }
-      return state
-  }
-
-
-
-  const rootReducer = combineReducers({
+const rootReducer = combineReducers({
     promiseReducer,authReducer
 })
 const store = createStore(rootReducer, applyMiddleware(thunk)) 
-
+store.subscribe(()=> console.log(store.getState()))
 export default store

src/reducers/promiseReducer.js

@@ -0,0 +1,9 @@
+export function promiseReducer(state={}, {type, status, payload, error, name}){
+    if (type === 'PROMISE'){
+        return {
+            ...state,
+            [name]:{status, payload, error}
+        }
+    }
+    return state
+}