[#3929] Create variables for paths

akvo · Oct 4, 2022 · 5ce6c28 · 5ce6c28
1 parent 426de01
commit 5ce6c28
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 45 deletions.
diff --git a/landing/src/App.js b/landing/src/App.js
@@ -1,13 +1,17 @@
+import { useState, useEffect } from "react";
 import { Switch, Route, useHistory } from "react-router-dom";
+
+import { HOME, CONTACT, KEY_FEATURES, #, # } from "./paths";
+
 import Footer from "./components/footer";
 import Header from "./components/header";
+import #Tab from "./components/#/#-tab/index";
+import #Table from "./components/#/#-table";
+
 import KeyFeaturesPage from "./page/key-features/index";
 import Contact from "./page/contact/index";
 import Home from "./page/home";
 import # from "./page/#";
-import #Tab from "./components/#/#-tab/index";
-import #Table from "./components/#/#-table";
-import { useState, useEffect } from "react";
 
 function App() {
   const history = useHistory();
@@ -21,21 +25,21 @@ function App() {
     <div className="App">
       <Header selected={selected} setSelected={setSelected} />
       <Switch>
-        <Route exact path="/">
+        <Route exact path={HOME}>
           <Home />
         </Route>
-        <Route exact path="/key-features">
+        <Route exact path={KEY_FEATURES}>
           <KeyFeaturesPage />
         </Route>
-        <Route exact path="/contact">
+        <Route exact path={CONTACT}>
           <Contact />
         </Route>
-        <Route exact path="/#">
+        <Route exact path={#}>
           <#Table />
           <#Tab />
         </Route>
-        <Route exact path="/#">
-          <# setSelected={setSelected}/>
+        <Route exact path={#}>
+          <# setSelected={setSelected} />
         </Route>
       </Switch>
       <Footer setSelected={setSelected} />

diff --git a/landing/src/components/footer/index.js b/landing/src/components/footer/index.js
@@ -3,6 +3,7 @@ import "./index.scss";
 import { Link } from "react-router-dom";
 import { ReactComponent as RoundedArrow } from "../../images/rounded-arrow.svg";
 import Dropdown from "../reusable/dropdown";
+import {HOME, CONTACT, KEY_FEATURES, # } from "../../paths";
 
 const Footer = ({ setSelected }) => {
   const [selectedLanguage, setSelectedLanguage] = useState("en");
@@ -23,7 +24,7 @@ const Footer = ({ setSelected }) => {
       <div>
         <div className="wrapper">
           <h1 className="flow-logo">
-            <Link onClick={() => setSelected("/")} to="/">
+            <Link onClick={() => setSelected(HOME)} to={HOME}>
               Akvoflow
             </Link>
           </h1>
@@ -34,19 +35,19 @@ const Footer = ({ setSelected }) => {
               <ul className="navigation-list">
                 <li className="list-item">
                   <Link
-                    onClick={() => setSelected("/key-features")}
-                    to="/key-features"
+                    onClick={() => setSelected(KEY_FEATURES)}
+                    to={KEY_FEATURES}
                   >
                     Key features
                   </Link>
                 </li>
                 <li className="list-item">
-                  <Link onClick={() => setSelected("/#")} to="/#">
+                  <Link onClick={() => setSelected(#)} to={#}>
                     #
                   </Link>
                 </li>
                 <li className="list-item">
-                  <Link onClick={() => setSelected("/contact")} to="/contact">
+                  <Link onClick={() => setSelected(CONTACT)} to={CONTACT}>
                     Contact
                   </Link>
                 </li>

diff --git a/landing/src/components/header/index.js b/landing/src/components/header/index.js
@@ -5,6 +5,7 @@ import { ReactComponent as DownArrow } from "../../images/down-arrow.svg";
 
 import Button from "../reusable/button";
 import Dropdown from "../reusable/dropdown";
+import { CONTACT, HOME, KEY_FEATURES, #, # } from "../../paths";
 
 const DISABLE_SCROLLING_CLASS = "disabled-scroll";
 
@@ -18,6 +19,7 @@ const Header = ({ selected, setSelected }) => {
     { id: 3, value: "Es", label: "Es" },
   ];
 
+  // Disable scroll when menu is activated
   useEffect(() => {
     if (isShownMenu && innerWidth < 601) {
       body.classList.add(DISABLE_SCROLLING_CLASS);
@@ -30,35 +32,35 @@ const Header = ({ selected, setSelected }) => {
     <div className="header-wrapper">
       <header className="header">
         <h1 className="flow-logo">
-          <Link onClick={() => setSelected("/")} to="/">
+          <Link onClick={() => setSelected(HOME)} to={HOME}>
             Akvoflow
           </Link>
         </h1>
         <nav className="navigation">
           <ul className="navigation-list">
             <li className="list-item">
               <Link
-                to="/key-features"
-                onClick={() => setSelected("/key-features")}
-                className={"/key-features" === selected ? `selected` : ""}
+                to={KEY_FEATURES}
+                onClick={() => setSelected(KEY_FEATURES)}
+                className={KEY_FEATURES === selected ? `selected` : ""}
               >
                 Key features
               </Link>
             </li>
             <li className="list-item">
               <Link
-                to="/#"
-                onClick={() => setSelected("/#")}
-                className={"/#" === selected ? `selected` : ""}
+                to={#}
+                onClick={() => setSelected(#)}
+                className={# === selected ? `selected` : ""}
               >
                 #
               </Link>
             </li>
             <li className="list-item">
               <Link
-                to="/contact"
-                onClick={() => setSelected("/contact")}
-                className={"/contact" === selected ? `selected` : ""}
+                to={CONTACT}
+                onClick={() => setSelected(CONTACT)}
+                className={CONTACT === selected ? `selected` : ""}
               >
                 Contact
               </Link>
@@ -96,17 +98,17 @@ const Header = ({ selected, setSelected }) => {
         <nav className="menu-navigation">
           <ul className="menu-navigation-list">
             <li className="menu-list-item">
-              <Link onClick={() => setIsShownMenu(false)} to="/key-features">
+              <Link onClick={() => setIsShownMenu(false)} to={KEY_FEATURES}>
                 Key features
               </Link>
             </li>
             <li className="menu-list-item">
-              <Link onClick={() => setIsShownMenu(false)} to="/#">
+              <Link onClick={() => setIsShownMenu(false)} to={#}>
                 #
               </Link>
             </li>
             <li className="menu-list-item">
-              <Link onClick={() => setIsShownMenu(false)} to="/contact">
+              <Link onClick={() => setIsShownMenu(false)} to={CONTACT}>
                 Contact
               </Link>
             </li>
@@ -118,7 +120,7 @@ const Header = ({ selected, setSelected }) => {
               }}
               type="outlined"
               text="Free trial"
-              linkTo="/#"
+              linkTo={#}
             />
             <a
               onClick={() => setIsShownMenu(false)}

diff --git a/landing/src/components/overview/index.js b/landing/src/components/overview/index.js
@@ -2,6 +2,9 @@ import React from "react";
 import "./index.scss";
 import Button from "../reusable/button/index";
 
+import { # } from "../../paths";
+
+// Organisations icons
 import planetInfographic from "../../images/key-features/planet-infographic.png";
 import gSierraLeonne from "../../images/organisations/g-sierra-leonne-logo.png";
 import simavi from "../../images/organisations/simavi-logo.png";
@@ -12,6 +15,7 @@ import unicef from "../../images/organisations/unicef-logo.png";
 import oneDrop from "../../images/organisations/one-drop-logo.png";
 import idh from "../../images/organisations/idh-logo.png";
 import nuffic from "../../images/organisations/nuffic-logo.png";
+// Map
 import map from "../../images/map.svg";
 
 const Overview = () => {
@@ -32,20 +36,21 @@ const Overview = () => {
     { name: "Organisations", count: "200+" },
     { name: "Countries ", count: "70+" },
   ];
+
   return (
     <div className="overview">
       <section className="introduction">
-        <div className="wrapper">
+        <article className="wrapper">
           <h2 className="heading">
             Design your survey and <span>start collecting data</span> today.
           </h2>
           <p className="paragraph">
             Akvo Flow can easily adapt to your data needs. Our partners collect
             and use data to drive change all over the world.
           </p>
-          <Button type="filled" text="Start for free now" linkTo="/#" />
+          <Button type="filled" text="Start for free now" linkTo={#} />
           <img src={planetInfographic} alt="3d model planet infographic" />
-        </div>
+        </article>
       </section>
 
       <section className="partners">
@@ -64,17 +69,19 @@ const Overview = () => {
         </div>
       </section>
       <section className="impact">
-        <h3 className="heading">
-          Development organisations <span>all over the world</span> use Akvo
-          Flow to drive impact
-        </h3>
-        <p className="paragraph">
-          The development sector has been progressively moving towards
-          data-driven decision making and impact. With Akvo Flow, NGOs,
-          governments, knowledge institutions and the private sector support
-          millions of beneficiaries all over the world.{" "}
-        </p>
-        <Button type="outlined" text="Get started" linkTo="/#" />
+        <article className="wrapper">
+          <h3 className="heading">
+            Development organisations <span>all over the world</span> use Akvo
+            Flow to drive impact
+          </h3>
+          <p className="paragraph">
+            The development sector has been progressively moving towards
+            data-driven decision making and impact. With Akvo Flow, NGOs,
+            governments, knowledge institutions and the private sector support
+            millions of beneficiaries all over the world.{" "}
+          </p>
+          <Button type="outlined" text="Get started" linkTo={#} />
+        </article>
         <div>
           <img src={map} alt="map" />
         </div>
@@ -88,7 +95,7 @@ const Overview = () => {
         </div>
         <div className="banner">
           <h3 className="heading">
-            Take your development programme to the next level{" "}
+            Take your development programme to the next level
           </h3>
           <div className="paragraph">Capture reliable and timely data</div>
         </div>

diff --git a/landing/src/components/#/#-tab/index.js b/landing/src/components/#/#-tab/index.js
@@ -4,6 +4,7 @@ import Button from "../../reusable/button";
 import { planData } from "../data";
 import { ReactComponent as Check } from "../../../images/check.svg";
 import { ReactComponent as Cross } from "../../../images/cross.svg";
+import { # } from '../../../paths';
 
 const #Tab = () => {
   const [selected, setSelected] = useState("flow-basic");
@@ -48,7 +49,7 @@ const #Tab = () => {
               ? "Contact sales"
               : "Get started"
           }
-          linkTo="/#"
+          linkTo={#}
         />
       </div>
 

diff --git a/landing/src/components/reusable/dropdown/index.js b/landing/src/components/reusable/dropdown/index.js
@@ -29,7 +29,7 @@ const Dropdown = ({ selectData, className, Icon, textToDisplay = "En" }) => {
   useEffect(() => {
     document.addEventListener("mousedown", onCloseDropdown);
   }, [toggleDropdown]);
-console.log('toggleDropdown::::::', toggleDropdown);
+
   return (
     <div className={`custom-select-container ${className}`}>
       <div className={selectedOptionClass} ref={toggleRef}>

diff --git a/landing/src/paths.js b/landing/src/paths.js
@@ -0,0 +1,5 @@
+export const HOME = "/";
+export const # = "/#";
+export const KEY_FEATURES = "/key-features";
+export const CONTACT = "/contact";
+export const # = "/#";