Home Explore Help
Register Sign In
DeJaVu
/
test_project
Watch 0
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add done!!!

DeJaVu 2 years ago
parent
2ed0ce1403
commit
5df1bd235e
24 changed files with 120 additions and 103 deletions
Split View Show Diff Stats
  1. 1 1
      public/index.html
  2. 4 12
      src/App.js
  3. 20 12
      src/App.scss
  4. 1 1
      src/Components/AdOne.js
  5. 18 15
      src/Components/CAdFeed.js
  6. 1 1
      src/Components/DropZone.js
  7. 1 1
      src/Components/Footer.js
  8. 2 2
      src/Components/Logout.js
  9. 1 1
      src/Components/MyPosts.js
  10. 1 1
      src/Components/RegErrors/Confirmpass.js
  11. 1 1
      src/Components/RegErrors/LoginError.js
  12. 1 1
      src/Components/RegErrors/MinPass.js
  13. 1 1
      src/Components/RegErrors/numberCheckPass.js
  14. 4 1
      src/Components/Search.js
  15. 6 21
      src/actions/index.js
  16. 4 2
      src/pages/Advertisment.js
  17. 13 0
      src/pages/AllPages.js
  18. 1 2
      src/pages/EditAd.js
  19. 4 2
      src/pages/Home.js
  20. 3 2
      src/pages/Instriction.js
  21. 18 17
      src/pages/Login.js
  22. 10 0
      src/pages/NotFound.js
  23. 1 2
      src/pages/PostAd.js
  24. 3 4
      src/pages/Sign.js

+ 1 - 1
public/index.html
View File 

@@ -24,7 +24,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>React App</title>
 
+    <title>Olx</title>
 
   </head> 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 4 - 12
src/App.js
View File 

@@ -2,21 +2,12 @@ import React from 'react';
 
 import './App.scss';
 
 import {Provider}   from 'react-redux';
 
 import Footer from './Components/Footer';
 
+import RoleRoute from './Components/PrivateRoute';
 
+import ConnectNav from './Components/NaviBar';
 
 import { createBrowserHistory } from "history";
 
 import store from './reducers';
 
-import ConnectLog from './pages/Login';
 
 import { Router,Switch } from "react-router-dom";
 
-import TypeAd from "./pages/Home";
 
-import TypeAdOne from './pages/AdOne';
 
-import ConnectSign from './pages/Sign';
 
-import {Instruction} from "./pages/Instriction";
 
-import {Advertisment} from "./pages/Advertisment";
 
-import RoleRoute from './Components/PrivateRoute';
 
-import ConnectNav from './Components/NaviBar';
 
-import CPost from './pages/PostAd';
 
-import СChange from './pages/EditAd';
 
-import Profile from './pages/Profile';
 
-import AdSearch from './pages/Search';
 
+import {ConnectLog, TypeAd, TypeAdOne, ConnectSign,Instruction,Advertisment,CPost,СChange,Profile,AdSearch,NotFound} from './pages/AllPages'
 
 
 function App() {
 
   return (
 
@@ -35,6 +26,7 @@ function App() {
 
             <RoleRoute path='/post-ad' roles={['user']} component={CPost} />
 
             <RoleRoute path='/instruction' roles={['unknown']} component={Instruction} />
 
             <RoleRoute path='/advertisment' roles={['unknown']} component={Advertisment} />
 
+            <RoleRoute roles={['unknown']} component={NotFound} exact/>
 
           </Switch>
 
           <Footer />
 
       </Router>

+ 20 - 12
src/App.scss
View File 

@@ -3,7 +3,7 @@
 
 html,body {
 
     width: 100%;
 
     max-width: 100%;
 
-    overflow-x: hidden;
 
+    // overflow-x: hidden;
 
     height: 100%;
 
 
     button {
 
@@ -86,12 +86,12 @@ html,body {
 
 }
 
 
 
+    
 .divLogin {
 
     display: flex;
 
     flex-direction: column;
 
     justify-content: center;
 
     align-items: center;
 
-    margin-top: 20px;
 
     input {
 
         width: 200px;
 
     }
 
@@ -99,7 +99,6 @@ html,body {
 
         display: flex;
 
         flex-direction: column;
 
         position: relative;
 
-
 
         a {
 
             text-decoration: none;
 
             color:black;
 
@@ -134,16 +133,13 @@ html,body {
 
         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;
 
@@ -153,6 +149,7 @@ html,body {
 
     }
 
 }
 
 
+
 
 .ad {
 
     display: flex;
 
     flex-direction: row;
 
@@ -190,6 +187,15 @@ html,body {
 
     }
 
 }
 
 
+.dropzone {
 
+    margin-top: 10px ;
 
+    display: flex;
 
+    align-items: center;
 
+    height: 70px;
 
+    border: 1px dotted rgb(54, 54, 54);
 
+    padding: 0 10px;
 
+}
 
+
 
 .AdPage {
 
     display: flex;
 
     justify-content: center;
 
@@ -214,7 +220,8 @@ html,body {
 
         border-radius: 15px;
 
         b {
 
             font-weight: 600;
 
-            font-size: 30px;
 
+            font-size: 35px;
 
+            padding: 15px 0;
 
         }
 
         input {
 
             width: 50%;
 
@@ -226,7 +233,6 @@ html,body {
 
     }
 
 }
 
 
-
 
 .post {
 
     margin-top: 25px;
 
     padding: 25px 15px;
 
@@ -294,16 +300,18 @@ html,body {
 
 }
 
 
 .foter__indent {
 
-    min-height: 150px;
 
+    min-height: 125px;
 
 }
 
 
 footer {
 
     background: #002f34;
 
     color: white;
 
     padding-top: 25px;
 
+}
 
+
 
+.list-unstyled {
 
     a {
 
         color: white;
 
         text-decoration: none;
 
     }
 
 }
 
-

+ 1 - 1
src/Components/AdOne.js
View File 

@@ -15,7 +15,7 @@ export const AdOne=({price, title,description,images,comments,createdAt,owner})
 
         let hour = a.getHours();
 
         let min = a.getMinutes();
 
         let sec = a.getSeconds();
 
-        let time = date + ' ' + month + ' ' + year + ' в ' + hour + ':' + min ;
 
+        let time = date + ' ' + month + ' ' + year + ' в ' + hour + ':' + (min < 10 ? `0${min}`: min) ;
 
         return time;
 
       }
 
     return (

+ 18 - 15
src/Components/CAdFeed.js
View File 

@@ -3,24 +3,27 @@ import {Link} from 'react-router-dom';
 
 import { Container } from "react-bootstrap";
 
 import nofoto from '../images/placeholder.png'
 
 
-export const AdFeed=({_id, price,title,description,images,comments,createdAt}) => {
 
+export const AdFeed=({_id, price,title,description,images}) => {
 
+    
     return (
 
         <Container>
 
-            <div className="row ad ">
 
-                <div className="col img">
 
-                    {images ?
 
-                        <img src = {`http://marketplace.asmer.fs.a-level.com.ua/${images[0]?.url}`} />
 
-                        : <img src={nofoto} />
 
-                    }
 
-                </div> 
-                <div className="col-6 info">   
-                    <Link to={ `/home/${_id}`}>{title}</Link>
 
-                    <p>{description}</p>
 
+            {title !== null &&
 
+                <div className="row ad ">
 
+                    <div className="col img">
 
+                        {images ?
 
+                            <img src = {`http://marketplace.asmer.fs.a-level.com.ua/${images[0]?.url}`} />
 
+                            : <img src={nofoto} />
 
+                        }
 
+                    </div> 
+                    <div className="col-6 info">   
+                        <Link to={ `/home/${_id}`}>{title}</Link>
 
+                        <p>{description}</p>
 
+                    </div>
 
+                    <div className="col price">   
+                        <p>{`Цена: ${price ? price : "0"} грн.`}</p>
 
+                    </div> 
                 </div>
 
-                <div className="col price">   
-                    <p>{`Цена: ${price ? price : "0"} грн.`}</p>
 
-                </div> 
-            </div>
 
+            }
 
         </Container> 
     )
 
 }

+ 1 - 1
src/Components/DropZone.js
View File 

@@ -14,7 +14,7 @@ export function MyDropzone({onSend}) {
 
     return (
 
         <div {...getRootProps({className: 'dropzone'})}>
 
           <input {...getInputProps() }/>
 
-          <p>Нажмите для смены аватарки</p>
 
+          <h6>Нажмите для смены аватарки, или перетащите файл</h6>
 
         </div>      
     );
 
   }

+ 1 - 1
src/Components/Footer.js
View File 

@@ -12,7 +12,7 @@ const Footer = () =>
 
                         <li><Link to="/instruction">Инструкция</Link></li>
 
                     </ul>
 
                 </div>
 
-
 
+                
                 <div className="col-md-6 mb-md-0 mb-3">
 
                     <ul className="list-unstyled">
 
                         <li><Link to="/advertisment">Реклама</Link></li>

+ 2 - 2
src/Components/Logout.js
View File 

@@ -1,11 +1,11 @@
 
 import React from 'react';
 
 import { connect } from 'react-redux';
 
 import { actionAuthLogout } from '../actions';
 
-const ButtonLogout = ({onLogout, isLoggedIn}) => {
 
+const ButtonLogout = ({onLogout}) => {
 
 return(
 
     <a className="adada" onClick={()=>onLogout()}
 
         >Выйти</a>
 
 )
 
 }
 
-const CButtonLogout = connect(state => ({isLoggedIn: state.authReducer.payload}),{onLogout: actionAuthLogout})(ButtonLogout)
 
+const CButtonLogout = connect(null,{onLogout: actionAuthLogout})(ButtonLogout)
 
 export default CButtonLogout

+ 1 - 1
src/Components/MyPosts.js
View File 

@@ -14,7 +14,7 @@ export const MyFeed=({_id, price, owner,title,description,images,comments,create
 
                         : <img src={nofoto} />
 
                     }
 
                 </div> 
-                <div className="col-6" info>   
+                <div className="col-6">   
                     <Link to={ `/home/${_id}`}>{title}</Link>
 
                     <p>{description}</p>
 
                 </div>

+ 1 - 1
src/Components/RegErrors/Confirmpass.js
View File 

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

+ 1 - 1
src/Components/RegErrors/LoginError.js
View File 

@@ -2,7 +2,7 @@ import React from 'react';
 
 
 const LoginError = () => {
 
     return (
 
-        <div className='registration-error__wrapper'>
 
+        <div className='error__wrapper'>
 
             <p>Заполните все поля</p>
 
         </div>
 
     )

+ 1 - 1
src/Components/RegErrors/MinPass.js
View File 

@@ -2,7 +2,7 @@ import React from 'react';
 
 
 const MinPass = () => {
 
     return (
 
-        <div className='registration-error__wrapper'>
 
+        <div className='error__wrapper'>
 
             <p>Заполните все поля! Пароль должен содержать не меньше 3 символов </p>
 
         </div>
 
     )

+ 1 - 1
src/Components/RegErrors/numberCheckPass.js
View File 

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

+ 4 - 1
src/Components/Search.js
View File 

@@ -1,13 +1,16 @@
 
 import { useState } from "react"
 
+import { useHistory} from "react-router";
 
 import { Link } from "react-router-dom"
 
 import loop from '../images/search.svg'
 
 
 const Search = ({}) => {
 
     const [searchName,setsearchName] = useState('')
 
+    let history = useHistory()
 
+    const onClick = ()=>history.push(`/search/${searchName}`)
 
     return (
 
         <div class="d1">
 
             <form>
 
-                <input type="text" value={searchName} onChange={e => setsearchName(e.target.value)} placeholder="Искать здесь" />
 
+                <input type="text" value={searchName} onChange={e => setsearchName(e.target.value)}  onKeyDown={e => e.keyCode === 13 && onClick()} placeholder="Искать здесь" />
 
                 <Link to={`/search/${searchName}`} className='search'><img src={loop} /></Link>
 
             </form>
 
         </div>

+ 6 - 21
src/actions/index.js
View File 

@@ -75,10 +75,10 @@ export const actionFullRegister = (login,password) =>
 
     }
 
   }
 
 
-export const actionTypeAd = (title, skip = 0) =>
 
+export const actionTypeAd = (skip = 0) =>
 
 async(dispatch,getState) => {
 
-    let ads = getState().promiseReducer.AdFind?.payload?.data.AdFind
 
-    await dispatch(actionPromise('AdFind', shopGQL(`
 
+    let ads = getState().promiseReducer.AdFind?.payload?.data.AdFind || []
 
+    let res = await shopGQL(`
 
             query Ad($query:String){
 
               AdFind(query:$query){
 
                 _id  
@@ -95,14 +95,13 @@ async(dispatch,getState) => {
 
                 owner {login}
 
               }
 
             }
 
-        `, {query: JSON.stringify([{field: title},{sort: [{_id: -1}],skip : [skip], limit: [50]}])}
 
-        )))
 
+        `, {query: JSON.stringify([{},{sort: [{_id: -1}],skip : [ads.length], limit: [50]}])}
 
+        )
 
         if(ads) {
 
-          ads.concat(skip)
 
+          dispatch(actionResolved('AdFind',{data: {AdFind : [...ads, ...res?.data?.AdFind]}}))
 
         }
 
       }
 
       
-
 
 export const actionTypeAdOne = (id) => 
           actionPromise('AdFindOne',shopGQL(`
 
             query Ad($query:String){
 
@@ -122,19 +121,6 @@ export const actionTypeAdOne = (id) =>
 
               }
 
             }`,{query: JSON.stringify([{_id:id}])}))
 
 
-
 
-// export const actionComments = (ad) => 
-//             actionPromise('Comments',shopGQL(`
 
-//             query Comments($query: String){
 
-//               CommentFind(query: $query){
 
-//                 _id
 
-//                 text
 
-//                 owner {login}
 
-//                 ad {_id}
 
-//                 answerTo {text owner{login}}
 
-//               }
 
-//             }`,{query: JSON.stringify([{}])}))
 
-
 
 export const actionAddComment = (text) => 
 async(dispatch,getState) => {
 
   let adId = getState().promiseReducer.AdFindOne.payload.data.AdFindOne._id
 
@@ -152,7 +138,6 @@ async(dispatch,getState) => {
 
   }
 
 }
 
 
-
 
 export const actionPostAd = (title,description,price,files,_id) =>
 
             async dispatch => {
 
               let res = await dispatch(actionUploadFiles(files))

+ 4 - 2
src/pages/Advertisment.js
View File 

@@ -1,5 +1,7 @@
 
 import React from "react";
 
 
-export const Advertisment = () => (
 
+const Advertisment = () => (
 
     <h1>Advertisment</h1>
 
-)
 
+)
 
+
 
+export default Advertisment

+ 13 - 0
src/pages/AllPages.js
View File 

@@ -0,0 +1,13 @@
 
+import ConnectLog from './Login';
 
+import TypeAd from "./Home";
 
+import TypeAdOne from './AdOne';
 
+import ConnectSign from './Sign';
 
+import Instruction from "./Instriction";
 
+import Advertisment from "./Advertisment";
 
+import CPost from './PostAd';
 
+import СChange from './EditAd';
 
+import Profile from './Profile';
 
+import AdSearch from './Search';
 
+import NotFound from './NotFound';
 
+
 
+export { ConnectLog, TypeAd, TypeAdOne, ConnectSign,Instruction,Advertisment,CPost,СChange,Profile,AdSearch,NotFound}

+ 1 - 2
src/pages/EditAd.js
View File 

@@ -60,8 +60,7 @@ const Post = ({data,onChange,match:{params:{id}},getData}) => {
 
                     <div className='post'>
 
                         <div {...getRootProps({className: 'dropzone'})}>
 
                             <input onChange={e => setImages(e.target.value)} {...getInputProps() }/>
 
-                            <p>Фото, нажмите для обновления</p>
 
-                            <label>Первое фото будет на обложке объявления</label>
 
+                            <p>Фото, нажмите для обновления. Первое фото будет на обложке объявления</p>
 
                         </div>
 
                         <aside>
 
                             <h5>Фото: </h5>

+ 4 - 2
src/pages/Home.js
View File 

@@ -6,7 +6,9 @@ import CPromiseComponent from "../Components/PromiseComponent";
 
 
 export const Home = ({getData,data}) => {
 
     const [fetching,setFetching] = useState(true)
 
-    const [current,setCurrent] = useState(0)
 
+    
+    useEffect(()=> setFetching(false),[data])
 
+
 
     useEffect(()=>{
 
         if(fetching){
 
             getData()
 
@@ -20,7 +22,7 @@ export const Home = ({getData,data}) => {
 
     },[])
 
 
     const scrollHandler = (e) => {
 
-        if(e.target.documentElement.scrollHeight - (window.innerHeight + e.target.documentElement.scrollTop)< 100){
 
+        if(e.target.documentElement.scrollHeight - (window.innerHeight + e.target.documentElement.scrollTop) < 300){
 
            setFetching(true)
 
            console.log(e.target.documentElement.scrollHeight)
 
         }

+ 3 - 2
src/pages/Instriction.js
View File 

@@ -1,5 +1,6 @@
 
 import React from "react";
 
 
-export const Instruction = () => (
 
+const Instruction = () => (
 
     <h1>Instruction</h1>
 
-)
 
+)
 
+export default Instruction

+ 18 - 17
src/pages/Login.js
View File 

@@ -7,6 +7,7 @@ import LoginError from "../Components/RegErrors/LoginError";
 
 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';
 
 import {Link, useHistory} from 'react-router-dom';
 
+import { Container } from "react-bootstrap";
 
 
 
 const LoginForm = ({onLogin,loggedIn}) => {
 
@@ -38,24 +39,24 @@ const loginCallback = () => {
 
 }
 
 
   return (
 
-        <div className="divLogin">
 
-            <h4>Войти</h4>
 
-            <div className="login-container">
 
-                <label>Логин</label>
 
-                <input value={login} onChange={e => setLogin(e.target.value)} placeholder="Логин"></input>
 
-            </div>
 
-            <div className='pwd-container'>
 
-                <label>Ваш текущий пароль от olx</label>
 
-                <input value={password} type={open ? "text" : "password"} onChange={e => setPassword(e.target.value)} placeholder="Пароль"  />
 
-                <img src={open ? hidePwdImg : showPwdImg} onClick={() => setOpen(!open)}/>
 
-            </div>
 
-            <div className='login-container'>
 
-                Не зарегистрированы? <Link to='sign' className='mb-3'>Создать аккаунт</Link>
 
-                <Button name='Войти' isValid={isLoginValid()} callback={loginCallback} /> 
-            </div> 
-                {(loggedIn === null) && <p>Неверный логин или пароль</p>}
 
-                {show && (!login || !password) && <LoginError />}
 
+    <div className="divLogin mt-5">
 
+        <h4>Войти</h4>
 
+        <div className="login-container">
 
+            <label>Логин</label>
 
+            <input value={login} onChange={e => setLogin(e.target.value)} placeholder="Логин"></input>
 
         </div>
 
+        <div className='pwd-container'>
 
+            <label>Ваш текущий пароль от olx</label>
 
+            <input value={password} type={open ? "text" : "password"} onChange={e => setPassword(e.target.value)} placeholder="Пароль"  />
 
+            <img src={open ? hidePwdImg : showPwdImg} onClick={() => setOpen(!open)}/>
 
+        </div>
 
+        <div className='login-container'>
 
+            Не зарегистрированы? <Link to='sign' className='mb-3'>Создать аккаунт</Link>
 
+            <Button name='Войти' isValid={isLoginValid()} callback={loginCallback} /> 
+        </div> 
+            {(loggedIn === null) && <p>Неверный логин или пароль</p>}
 
+            {show && (!login || !password) && <LoginError />}
 
+    </div>
 
   )
 
 }

+ 10 - 0
src/pages/NotFound.js
View File 

@@ -0,0 +1,10 @@
 
+import { Container } from "react-bootstrap"
 
+
 
+const NotFound = ({}) => {
 
+    return (
 
+        <Container className='d-flex justify-content-center mt-5'>
 
+            <h1>Страница не найдена :/ </h1>
 
+        </Container>
 
+    )
 
+}
 
+export default NotFound

+ 1 - 2
src/pages/PostAd.js
View File 

@@ -32,8 +32,7 @@ const Post = ({onPost}) => {
 
             <div className='post'>
 
                 <div {...getRootProps({className: 'dropzone'})}>
 
                   <input {...getInputProps() }/>
 
-                  <p>Фото, нажмите для добавления</p>
 
-                  <label>Первое фото будет на обложке объявления</label>
 
+                  <p>Фото, нажмите для добавления. Первое фото будет на обложке объявления</p>
 
                 </div>
 
                 <aside>
 
                     <h5>Фото: </h5>

+ 3 - 4
src/pages/Sign.js
View File 

@@ -48,7 +48,7 @@ const Sign = ({onSign,Reg}) => {
 
     }
 
 
     return (
 
-      <div className="divSign">
 
+      <div className="divSign mt-5">
 
           <h4>Регистрация</h4>
 
           <div className="login-container">
 
               <label>Придумайте логин</label>
 
@@ -59,7 +59,7 @@ const Sign = ({onSign,Reg}) => {
 
               <input value={password} type={open ? "text" : "password"} onChange={e => setPassword(e.target.value)}  placeholder="Пароль"  />
 
               <img src={open ? hidePwdImg : showPwdImg} onClick={() => setOpen(!open)}/>
 
           </div>
 
-          <div className='pwd-container2 mb-3'>
 
+          <div className='pwd-container1 mb-3'>
 
               <label>Повторите пароль</label>
 
               <input value={password2} type={open2 ? "text" : "password"} onChange={e => setPassword2(e.target.value)}  placeholder="Пароль"  />
 
               <img src={open2 ? hidePwdImg : showPwdImg} onClick={() => setOpen2(!open2)}/>
 
@@ -74,8 +74,7 @@ const Sign = ({onSign,Reg}) => {
 
                 {show3 && (password !== password2) && <ConfirmPass />}
 
                 {(Reg === null) && <p>Данный пользователь уже зарегистрирован</p>}
 
                 {Reg && <Redirect push to='/'/>}
 
-      </div>
 
-
 
+        </div>
 
     )
 
 }