add page functionality

2022-03-29 12:52:57 +02:00
parent 398ed4ceb4
commit acd20536c8
31 changed files with 476 additions and 98 deletions
--- a/kivi-cars/src/containers/App.js
+++ b/kivi-cars/src/containers/App.js
@@ -1,14 +1,37 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './css/App.css';
-import React from 'react';
+import { React, useEffect, useState } from 'react';
+import CategoryPage from './CategoryPage';
+import LandingPage from './LandingPage';
+import FiltersPage from './FiltersPage';
+import EmailPage from './EmailPage';
+import CongratsPage from './CongratsPage';
+import LinkR from '../data/routes';
  

 function App() {

  const info = 'Dobrodosli na stranicu kivi!'
+  const [filtersData, setFiltersData] = useState({})
+
+  useEffect(() => {
+    console.log(filtersData)
+  }, [filtersData])
+

  return (
    <div className="App">
-      {/* here import components */}
+      <Router>
+        <Routes>
+        
+          <Route path='/' element={<LandingPage />} />
+          <Route path='category' element={<CategoryPage data={{filtersData, setFiltersData}} routes={LinkR.category} />}/>
+          <Route path='filters' element={<FiltersPage data={{filtersData, setFiltersData}} routes={LinkR.filters}/>}/>
+          <Route path='email' element={<EmailPage data={{filtersData, setFiltersData}} routes={LinkR.email} />}/>
+          <Route path='congrats' element={<CongratsPage data={{filtersData, setFiltersData}} routes={LinkR.congrats} />}/>
+        
+        </Routes>
+      </Router>
    </div>
  );
 }
--- a/kivi-cars/src/containers/CategoryPage.js
+++ b/kivi-cars/src/containers/CategoryPage.js
@@ -3,16 +3,17 @@ import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
 import CategoryBtns from '../components/CategoryBtns/categorybtns'
 import './css/CategoryPage.css'

-function CategoryPage() {
+function CategoryPage(props) {
+
+  const {filtersData, setFiltersData} = props.data

  const naslov = 'IZABERITE KATEGORIJU'
-
  return (
    <div className="category">
        <Header header={naslov}/>
-        <ButtonsToolbar/>
+        <ButtonsToolbar routes={props.routes}/>
        <div className='category-buttons'>
-          <CategoryBtns/>
+          <CategoryBtns data={{filtersData, setFiltersData}}/>
        </div>
    </div>
  );
--- a/kivi-cars/src/containers/CongratsPage.js
+++ b/kivi-cars/src/containers/CongratsPage.js
@@ -1,6 +1,8 @@
 import Header from '../components/Header/Header';
 import StandardBtn from '../components/Button/StandardBtn';
+import TitleBtn from '../components/Button/TitleBtn';
 import './css/CongratsPage.css'
+import { Link } from 'react-router-dom';

 function CongratsPage() {

@@ -10,7 +12,7 @@ function CongratsPage() {
  return (
    <div className="congrats-page">
      <Header header={naslov}/>
-      <div>
+      <div className='paragh-div'>
          <div className='first-paragh'>
              <h2 className='h2'>ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.</h2>
          </div>
@@ -21,7 +23,10 @@ function CongratsPage() {
              <h1 className='h1'>Ako želite novu pretragu idete na</h1>
          </div>
          
-          <StandardBtn title={btnTitle}/>  
+          <Link to='/'>
+            <TitleBtn title={btnTitle}/>
+          </Link>
+          
      </div>
    </div>
  );
--- a/kivi-cars/src/containers/DataContext.js
+++ b/kivi-cars/src/containers/DataContext.js
@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+
--- a/kivi-cars/src/containers/EmailPage.js
+++ b/kivi-cars/src/containers/EmailPage.js
@@ -1,31 +1,74 @@
+import {useContext, useState, useEffect} from 'react';
+import { DataContext } from './DataContext';
 import './css/EmailPage.css'
 import Header from '../components/Header/Header';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
 import StandardBtn from '../components/Button/StandardBtn';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';


 function EmailPage(props) {
+
+    const {filtersData, setFiltersData} = props.data
+    const [error, setError] = useState(false)
+
+
+    const [state, setState] = useState({
+        email: "",
+        confirmEmail: ""
+    })
+
    const header = "SLANJE OBAVJEŠTENJA";
-    var title1 = 'Odmah';
-    var title2 = 'Dnevno';
-    var title3 = 'ZAVRŠI';
+    let title1 = 'Odmah';
+    let title2 = 'Dnevno';
+    let title3 = 'ZAVRŠI';
+    let errmsg = 'Email does not match!';
+    let filter = 'Slanje'
+
+
+    const emailCheck = (e, ec) => {
+        if(e !== "" && e === ec){
+            setError(false)
+            setFiltersData(prevData => ({
+                ...prevData,
+                "email": state.email
+            }))
+            return error
+        }else {
+            setError(true)
+            return error
+        }
+    }
+
+    const updateInput = (event) => {
+        setState(prevState => ({
+            ...prevState,
+            [event.target.name]: event.target.value
+        }))
+    }
+
+    useEffect(() => {
+        emailCheck(state.email, state.confirmEmail)
+    }, [state])

    return ( 
        <div>
            <Header header={header}/>
-            <ButtonsToolbar/>
-            <div>
+            <ButtonsToolbar routes={props.routes}/>
+            <div className="info">
                <h2 className='h2'>Slanje obavještenja</h2>
            </div>
            <div className='buttons-container'>
-                <StandardBtn title={title1}/>
-                <StandardBtn title={title2}/>
+                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title1}/>
+                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title2}/>
            </div>
            <div className='form'>
                <form method="POST" id="form-email">
                    <div className='email-div'>
-                        <input id="email" name='email' placeholder='vas.email@mail.com' required size='250'/>
-                        <input id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250'/>
+                        <input type="email" id="email" name='email' placeholder='vas.email@mail.com' required size='250' onChange={updateInput} />
+                        <input type="email" id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250' onChange={updateInput} />
+                        <p style={{color: "red"}} >{error ? errmsg : null}</p>
                    </div>

                </form>
@@ -36,7 +79,11 @@ function EmailPage(props) {
                </h3>
            </div>
            <div>
-                <StandardBtn title={title3}/>
+                {error ? (<TitleBtn title={title3} /> ) : (
+                <Link to="/congrats">
+                    <TitleBtn title={title3} />    
+                </Link>
+                )}      
            </div>
        </div>
        
--- a/kivi-cars/src/containers/FiltersPage.js
+++ b/kivi-cars/src/containers/FiltersPage.js
@@ -1,20 +1,30 @@
-import React from "react";
+import {React, useState} from "react";
 import './css/FiltersPage.css';
 import Header from "../components/Header/Header";
 import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
-import FiltersNav from '../components/Searchfilters/FiltersNav'
+import FiltersNav from '../components/FiltersNavbar/FiltersNav'
 import StandardFilters from "../components/Filters/Standard-filters";
+import AdvancedFilters from "../components/Filters/Advanced-filters";

-const FiltersPage = () => {
+const FiltersPage = (props) => {

    const naslov = "Filteri za pretrazivanje"
+    const [toggle, setToggle] = useState(true)
+    const {filtersData, setFiltersData} = props.data
+    
+    const showFilters = (toggle) => {
+        if(toggle){
+            return <StandardFilters data={{filtersData, setFiltersData}}/>
+        }
+        return <AdvancedFilters data={{filtersData, setFiltersData}}/>;
+    }

    return(
        <div className="FiltersPage">
            <Header header={naslov}/>
-            <ButtonsToolbar />
-            <FiltersNav />
-            <StandardFilters />
+            <ButtonsToolbar routes={props.routes}/> 
+            <FiltersNav toggle={{toggle, setToggle}}/>
+            {showFilters(toggle)}
        </div>
    )
 }
--- a/kivi-cars/src/containers/LandingPage.js
+++ b/kivi-cars/src/containers/LandingPage.js
@@ -1,7 +1,8 @@
 import logo  from '../assets/logo.png'
-import StandardBtn from '../components/Button/StandardBtn';
+import TitleBtn from '../components/Button/TitleBtn';
 import Header from '../components/Header/Header';
 import './css/LandingPage.css'
+import { Link } from 'react-router-dom';

 function LandingPage() {

@@ -21,7 +22,10 @@ function LandingPage() {
            <h2 id='besplatno'> BESPLATNO </h2>
            
        </div>
-        <StandardBtn title={naziv}/>
+        <Link to='/category'>
+          <TitleBtn title={naziv}/>
+        </Link>
+        
        
      </div>
    );
--- a/kivi-cars/src/containers/css/CongratsPage.css
+++ b/kivi-cars/src/containers/css/CongratsPage.css
@@ -1,3 +1,10 @@
+.paragh-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
 .first-paragh {
    padding-top: 20px;
    margin-top: 50px;
--- a/kivi-cars/src/containers/css/EmailPage.css
+++ b/kivi-cars/src/containers/css/EmailPage.css
@@ -71,4 +71,8 @@ textarea:focus, input:focus{
    align-items: center;
    margin: auto;
    
+}
+
+.info{
+    display: flex;
 }