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 loader

DeJaVu 2 years ago
parent
71c5f17801
commit
fa2ae0a733
12 changed files with 85 additions and 87 deletions
Split View Show Diff Stats
  1. 1 1
      public/index.html
  2. 1 3
      src/App.js
  3. 40 35
      src/App.scss
  4. 0 1
      src/Components/Button.js
  5. 0 3
      src/Components/NaviBar.js
  6. 1 1
      src/Components/Profile.js
  7. 10 17
      src/Components/PromiseComponent.js
  8. 1 1
      src/actions/index.js
  9. 6 3
      src/pages/AdOne.js
  10. 6 3
      src/pages/Home.js
  11. 18 18
      src/pages/Login.js
  12. 1 1
      src/pages/PostAd.js

+ 1 - 1
public/index.html
View File 

@@ -25,7 +25,7 @@
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
     <title>React App</title>
 
-  </head>
 
+  </head> 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>

+ 1 - 3
src/App.js
View File 

@@ -1,4 +1,4 @@
 
-import React, { useEffect } from 'react';
 
+import React from 'react';
 
 import './App.scss';
 
 import {Provider, connect}   from 'react-redux';
 
 import thunk from 'redux-thunk';
 
@@ -19,11 +19,9 @@ import ConnectSign from './pages/Sign';
 
 import {Login} from "./pages/Login";
 
 import {Instruction} from "./pages/Instriction";
 
 import {Advertisment} from "./pages/Advertisment";
 
-import {useDropzone} from 'react-dropzone'
 
 import RoleRoute from './Components/PrivateRoute';
 
 import ConnectNav from './Components/NaviBar';
 
 import CProfile from './Components/Profile';
 
-import CPromiseComponent from './Components/PromiseComponent';
 
 import CPost from './pages/PostAd';
 
 
 function App() {

+ 40 - 35
src/App.scss
View File 

@@ -147,42 +147,47 @@ html,body {
 
     border-radius: 15px;
 
 }
 
 
-.lds-ring {
 
-    display: inline-block;
 
-    position: relative;
 
-    width: 80px;
 
-    height: 80px;
 
-  }
 
-  .lds-ring div {
 
-    box-sizing: border-box;
 
-    display: block;
 
-    position: absolute;
 
-    width: 64px;
 
-    height: 64px;
 
-    margin: 8px;
 
-    border: 8px solid #cef;
 
-    border-radius: 50%;
 
-    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
-    border-color: #cef transparent transparent transparent;
 
-  }
 
-  .lds-ring div:nth-child(1) {
 
-    animation-delay: -0.45s;
 
-  }
 
-  .lds-ring div:nth-child(2) {
 
-    animation-delay: -0.3s;
 
-  }
 
-  .lds-ring div:nth-child(3) {
 
-    animation-delay: -0.15s;
 
-  }
 
-  @keyframes lds-ring {
 
-    0% {
 
-      transform: rotate(0deg);
 
-    }
 
-    100% {
 
-      transform: rotate(360deg);
 
+.loader {
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    margin: auto 0;
 
+    
+    .lds-ring {
 
+        position: relative;
 
+        width: 80px;
 
+        height: 80px;
 
+      }
 
+      .lds-ring div {
 
+        box-sizing: border-box;
 
+        display: block;
 
+        position: absolute;
 
+        width: 64px;
 
+        height: 64px;
 
+        margin: 8px;
 
+        border: 8px solid #cef;
 
+        border-radius: 50%;
 
+        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
+        border-color: #002f34 transparent transparent transparent;
 
+      }
 
+      .lds-ring div:nth-child(1) {
 
+        animation-delay: -0.45s;
 
+      }
 
+      .lds-ring div:nth-child(2) {
 
+        animation-delay: -0.3s;
 
+      }
 
+      .lds-ring div:nth-child(3) {
 
+        animation-delay: -0.15s;
 
+      }
 
+      @keyframes lds-ring {
 
+        0% {
 
+          transform: rotate(0deg);
 
+        }
 
+        100% {
 
+          transform: rotate(360deg);
 
+        }
 
     }
 
-  }
 
-
 
+}
 
 .foter__indent {
 
     min-height: 150px;
 
 }

+ 0 - 1
src/Components/Button.js
View File 

@@ -5,7 +5,6 @@ const Button = (props) => {
 
         <button
 
             onClick={(e) => {
 
                props.callback(e)
 
-        
             }}
 
             className={props.disabled ? 'button-active': 'button-disabled'} 
             >

+ 0 - 3
src/Components/NaviBar.js
View File 

@@ -2,10 +2,7 @@ import logo from '../logoOlx.png';
 
 import React from "react";
 
 import { Navbar, Nav, NavDropdown, Container } from 'react-bootstrap';
 
 import {Link} from "react-router-dom";
 
-import {actionAuthLogout} from '../actions/index'
 
 import { connect } from 'react-redux';
 
-import { useState } from 'react';
 
-// import Button from '@restart/ui/esm/Button';
 
 import CButtonLogout from './Logout';
 
 
 export function Navibar({isLogin}){

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

@@ -1,7 +1,7 @@
 
 import React from "react";
 
 import { connect } from "react-redux";
 
 
-const Profile = ({login}) => {
 
+const Profile = ({login,posts}) => {
 
     return (
 
         <div>
 
             <p>{login}</p>

+ 10 - 17
src/Components/PromiseComponent.js
View File 

@@ -3,25 +3,18 @@ import { connect } from "react-redux";
 
 import TypeAd from "../pages/Home";
 
 import Loader from "./PreLoader";
 
 
-const PromiseComponent = ({component,promiseName,pending,resolved}) => {
 
-    // const PromiseWrapper = ({}) => {
 
-        // const OriginalComp = component
 
-        // let [error,setError] = useState()
 
-        // if(promiseName ==='PENDING') {
 
-        //     return <Loader />
 
-        // }
 
-        // if(promiseName === 'RESOLVED') {
 
-        //     return <OriginalComp />
 
-        // }
 
+const PromiseComponent = ({promiseStatus,promiseName,children}) => {
 
+    if(promiseStatus[promiseName] && promiseStatus[promiseName].status === "RESOLVED") {
 
+        return children
 
+    }
 
+    else {
 
         return (
 
-           <div>
 
-               {pending && <Loader />}
 
-               {resolved && <TypeAd /> }
 
-           </div>
 
+        <div className='loader'>
 
+            <Loader />
 
+        </div>
 
         )
 
-    // }
 
-    // return <PromiseWrapper component={OriginalComp} />
 
+    }
 
 }
 
 
-const CPromiseComponent = connect(state => ({pending: state.promiseReducer?.AdFind?.status.includes('PENDING')}, {resolved: state.promiseReducer?.AdFind?.status.includes('RESOLVED') }))(PromiseComponent)
 
+const CPromiseComponent = connect(state => ({promiseStatus: state.promiseReducer}))(PromiseComponent)
 
 export default CPromiseComponent

+ 1 - 1
src/actions/index.js
View File 

@@ -52,7 +52,7 @@ export const actionFullLogin = (login, password) => {
 
       let result = await dispatch(actionLogin(login, password))
 
       if(result)
 
           dispatch(actionAuthLogin(result))
 
-          window.location.reload();
 
+          // window.location.reload();
 
   }
 
 }

+ 6 - 3
src/pages/AdOne.js
View File 

@@ -3,15 +3,18 @@ import {connect}   from 'react-redux';
 
 import {AdOne} from "../Components/AdOne";
 
 import {actionTypeAdOne} from "../actions";
 
 import {useHistory} from 'react-router-dom';
 
+import CPromiseComponent from "../Components/PromiseComponent";
 
 
 export const Ad = ({getData3,data3, match:{params:{id}}}) => {
 
     useEffect(()=>getData3(id),[id])
 
 
     if(data3){
 
         return (
 
-            <div className="adone">
 
-                <AdOne key={data3._id} price = {data3.price} title = {data3.title} description={data3.description}  images={data3.images} />
 
-            </div>
 
+            <CPromiseComponent promiseName='AdFindOne'>
 
+                <div className="adone">
 
+                    <AdOne key={data3._id} price = {data3.price} title = {data3.title} description={data3.description}  images={data3.images} />
 
+                </div>
 
+            </CPromiseComponent>
 
         )
 
     }
 
 }

+ 6 - 3
src/pages/Home.js
View File 

@@ -7,14 +7,17 @@ import { Redirect } from "react-router";
 
 import {useHistory} from 'react-router-dom';
 
 import Loader from "../Components/PreLoader";
 
 import { CAdfeed } from "../Components/CAdFeed";
 
+import CPromiseComponent from "../Components/PromiseComponent";
 
 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} comments={ad.comments} />)}
 
-            </div>
 
+            <CPromiseComponent promiseName='AdFind'>
 
+                <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} comments={ad.comments} />)}
 
+                </div>
 
+            </CPromiseComponent>
 
         )
 
     }
 
 }

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

@@ -10,6 +10,7 @@ import {Link, useHistory} from 'react-router-dom';
 
 import { authReducer } from "../reducers/authReducer";
 
 import { Redirect } from "react-router";
 
 import { Nav } from "react-bootstrap";
 
+import CPromiseComponent from "../Components/PromiseComponent";
 
 
 const LoginForm = ({onLogin,loggedIn}) => {
 
   const [login,setLogin] = useState('')
 
@@ -40,27 +41,26 @@ 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 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'>Зарегистрироваться</Link>
 
+                <Button name='Войти' isValid={isLoginValid()} callback={loginCallback} /> 
+            </div> 
+                {show && (!login || !password) && <LoginError />}
 
         </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'>Зарегистрироваться</Link>
 
-            <Button name='Войти' isValid={isLoginValid()} callback={loginCallback} /> 
-        </div> 
-            {show && (!login || !password) && <LoginError />}
 
-    </div>
 
-    
   )
 
 }
 
 
 
-const ConnectLog = connect(state => ({loggedIn: state.authReducer.login}), {onLogin: actionFullLogin})(LoginForm)
 
+const ConnectLog = connect(state => ({loggedIn: state.authReducer}), {onLogin: actionFullLogin})(LoginForm)
 
 export default ConnectLog

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

@@ -20,7 +20,7 @@ const Post = ({onPost}) => {
 
             </div>
 
             <div className='d-flex flex-column align-items-start post'>
 
                 <label>Введите цену</label>
 
-                <input type={"number"} value={price} onChange={e => e.target.value>0 ? setPrice(+e.target.value) : ""} placeholder='Цена' ></input>
 
+                <input type={"number"} value={price} onChange={e => e.target.value>=0 ? setPrice(+e.target.value) : ""} placeholder='Цена' ></input>
 
             </div>
 
             <div className="d-flex flex-column align-items-end post">
 
                 <button onClick={()=> onPost(title,description,price)}>Опубликовать</button>