display form errors

formatData.js

@@ -3,13 +3,12 @@ const util = require("util");
 const path = require("path");
 const {fetchData} = require("./fetchWikipedia");
 
-// import {fetchData} from './fetchWikipedia'
 const readFile = util.promisify(fs.readFile);
 const writeFile = util.promisify(fs.writeFile);
 
 
 const filetPath = path.join(__dirname, "data", "arbustum.json");
-const targetFile = path.join(__dirname, "data", "arbustumFormat.json");
+const targetFile = path.join(__dirname, "data", "arbustumFormat2.json");
 
 const seeNames = (trees) => {
     let names = [];
@@ -57,17 +56,17 @@ const getFile = async () => {
             let diameter = tree.diametre_cime;
             let size = tree.hauteur_totale;
 
+            if (tree.nom_complet == 'en cours de détermination' || tree.nom_complet == 'A DETERMINER' || tree.nom_complet == 'A SUPPRIMER' || tree.nom_complet == 'ABATTU' || tree.nom_complet == 'Indeterminé')  {
+                tree.nom_complet = "Platanus x acerifolia"
+            }
             for(const item of allLinks){
                 if(tree.nom_complet == item.name){
                     tree.link = item.link;
                 }
             }
 
-            if(tree.nom_complet === "en cours de détermination") {
-                tree.link = "No link for this tree"
-            }
 
-            //Parse float !!! 
+
             if (size == null) {
                 size = averageSize;
                 tree.hauteur_totale = size;

src/client/actions/authActions.js

@@ -2,6 +2,20 @@ import axios from 'axios'
 import {type} from '../types/types'
 
 
+const login = (user) => ({
+    type: type.authLogin,
+    payload: user
+})
+
+const errors = (err) =>({
+    type: type.setError,
+    payload: err
+})
+
+export const cleanError = () =>({
+    type: type.cleanError
+})
+
 export const startLogin = (userName, password) => {
     return async (dispatch) => {
 
@@ -15,26 +29,21 @@ export const startLogin = (userName, password) => {
             }
 
         }).then(({data}) =>{
-            const {token, userName, uid, leaves, trees} = data
+            const {token, userName, uid, leaves, trees, color} = data
 
 
             if(token) {
                 localStorage.setItem("authToken", token)
-                dispatch(login({userName, uid, leaves, trees}))
+                dispatch(login({userName, uid, leaves, trees, color}))
 
 
             }
         }).catch((err) =>{
-            console.log(err)
+            dispatch(errors(err.response.data.err))
         })
     }
 }
 
-const login = (user) => ({
-    type: type.authLogin,
-    payload: user
-})
-
 export const startRegister = (username, password, email, color) =>{
     return async (dispatch) => {
         axios({
@@ -51,11 +60,12 @@ export const startRegister = (username, password, email, color) =>{
         }).then(() =>{
             dispatch(startLogin(username, password))
         }).catch(err =>{
-            console.log(err.response.data.msg)
+            dispatch(errors(err.response.data.err))
         })
     }
 }
 
+
 export const startChecking = () => {
     return async (dispatch) => {
 

src/client/components/card.js

@@ -2,6 +2,9 @@ import React, {useState} from 'react'
 import { useSelector } from 'react-redux'
 import {useBuyTree, useLockTree, useAddComment} from '../hooks/hooks'
 import moment from 'moment'
+import usersvg from '../assets/svg/user.svg';
+import treesvg from '../assets/svg/treename.svg'
+
 
 const Card = () => {
 
@@ -90,10 +93,10 @@ const Card = () => {
             {owner &&
                 <div className={"info-card"}>
                     {owner && 
-                        <p className={"owner-card"}>Owner :&nbsp;<span>{owner.userName || owner}</span></p>
+                        <p className={"owner-card"}><img src={usersvg} alt={"logo"} />&nbsp;<span>{owner.userName || owner}</span></p>
                     }
                     {name && 
-                        <p className={"name-card"}>Name :&nbsp;<span>{name}</span></p>
+                        <p className={"name-card"}><img src={treesvg} alt={"logo"} />&nbsp;<span>{name}</span></p>
                     }
                 </div>
             }

src/client/components/form/form.js

@@ -1,14 +1,17 @@
 import React, { useState } from "react";
 import Login from "./formLogin.js";
 import Register from "./formReg.js";
+import {useDispatch} from 'react-redux'
+import {cleanError} from '../../actions/authActions'
 
 export const Form = () => {
 
 
     const [isLog, setIsLog] = useState(true);
-
+    const dispatch = useDispatch()
     const handleButton = (e) => {
         setIsLog(e);
+        dispatch(cleanError())
     }
 
     return (
@@ -33,34 +36,4 @@ export const Form = () => {
         </div>
     )
 }
-export default Form;
-
-
-
-
-// import React, { useState } from "react";
-// import Login from "./formLogin.js";
-// import Register from "./formReg.js";
-
-// export const Form = () => {
-
-//     const [isLog, setIsLog] = useState(true);
-
-//     const handleButton = (e) => {
-//         setIsLog(e);
-//     }
-
-//     return (
-
-//         <div className={"modal-form"}>
-//             <button 
-//                 onClick={() => setIsLog(false)}>Register</button>
-//             <button
-//                 onClick={() => setIsLog(true)}>Login</button>
-//             {isLog ?
-//                 <Login /> :
-//                 <Register />
-//             }
-//         </div>
-//     )
-// }
+export default Form;

src/client/components/form/formLogin.js

@@ -1,18 +1,24 @@
 import React from "react";
 import {useForm} from "../../hooks/hooks";
 import {startLogin} from '../../actions/authActions'
-import {useDispatch} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 
 
 
 const Login = () => {
 
-    const {inputs, handleChange} = useForm({});
+    const state = useSelector((state) => state)
     const dispatch = useDispatch()
 
+    const {inputs, handleChange} = useForm({
+        username: "",
+        password: ""
+    });
+
     const handleSubmit = (e) => {
         e.preventDefault()
         dispatch(startLogin(inputs.username, inputs.password))
+
     }
 
      return (
@@ -23,17 +29,22 @@ const Login = () => {
                 name="username"
                 type="text"
                 placeholder={"Username"}
-                value={inputs.username || ""}
+                value={inputs.username}
                 onChange={handleChange}
             />
             <input 
                 className={"inputForm"}
                 name="password"
                 type="password"
                 placeholder={"Password"}
-                value={inputs.password || ""}
+                value={inputs.password}
                 onChange={handleChange}
             />
+            <div className={"inputs-error"}>
+                {state.errors && 
+                    <p className={"username-err"}>{state.errors.error}</p>
+                }   
+            </div>
             <button type="submit" className={"submitButton"} value="submit" onClick={handleSubmit}>Sign In</button>
         </form>
      )