Merge pull request #93 from tech-chieftain/task/scrollpage

Task: scroll page to the top

src/App.js

@@ -22,6 +22,7 @@ function App() {
   return (
     <Router>
       <Navbar />
+      <div className="p-8 min-w-full" />
       <Switch>
         <Route exact path="/" component={Home} />
         <Route path="/About" component={About} />

src/__snapshots__/App.test.js.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 Array [
   <div
-    className="bg-primary py-4 px-4 md:px-8 flex justify-between flex-wrap items-center"
+    className="bg-primary py-4 px-4 md:px-8 flex justify-between flex-wrap items-center fixed w-full z-50"
   >
     <svg
       className="h-10 w-10 md:h-12 md:w-12"
@@ -115,6 +115,9 @@ Array [
       </li>
     </ul>
   </div>,
+  <div
+    className="p-8 min-w-full"
+  />,
   <div>
     <div
       className="flex w-100 py-12  md:py-16 lg:py-20 xl:py-0 xl:h-screen bg-no-repeat  bg-cover"

src/components/FirstStep/FirstStep.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PropTypes } from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,9 @@ import Donateparagraph from '../Donateparagraph';
 import Progress from '../Progress';
 
 function FirstStep({ donor, onChange, setStep }) {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   const [errordate, setErrordate] = useState(false);
   const [errorwight, seterrorwight] = useState(false);
   const [errorsick, setErrorsick] = useState(false);

src/components/FourthStep/FourthStep.jsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import HeaderPharagrph from '../Paragraph';
 
 function FourthStep() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   return (
     <div className=" w-11/12 xl:w-10/12 mb-6 sm:mb-8 md:mb-12">

src/components/Navbar/Navbar.jsx

@@ -17,7 +17,7 @@ function Navbar() {
   // when meue icon clicked the label changes depending on the value of show
   // stytleflage is used to decide the way of stayling the donate links inside navlinks where it is at the navbar shwon like button where at the footer it is shown as link
   return (
-    <div className="bg-primary py-4 px-4 md:px-8 flex justify-between flex-wrap items-center">
+    <div className="bg-primary py-4 px-4 md:px-8 flex justify-between flex-wrap items-center fixed w-full z-50">
       <Logo />
       <label
         htmlFor="menu-toggle"

src/components/Navbar/__test__/__snapshots__/Navbar.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="bg-primary py-4 px-4 md:px-8 flex justify-between flex-wrap items-center"
+  className="bg-primary py-4 px-4 md:px-8 flex justify-between flex-wrap items-center fixed w-full z-50"
 >
   <svg
     className="h-10 w-10 md:h-12 md:w-12"

src/components/SecondStep/SecondStep.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PropTypes } from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
@@ -10,6 +10,9 @@ import Progress from '../Progress';
 import InputSelect from '../InputSelect';
 
 function SecondStep({ donor, onChange, setStep, chooseBlood, city }) {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   const [errorcity, setErrorcity] = useState(false);
   const [errorblood, seterrorblood] = useState(false);
   const { t } = useTranslation();

src/components/ThirdStep/ThirdStep.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PropTypes } from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
@@ -10,6 +10,9 @@ import InputField from '../InputField';
 import donate from './images/donate.svg';
 
 function ThirdStep({ donor, onChange, setStep, onRegister }) {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   const [errorname, setErrorname] = useState(false);
   const [erroremail, seterroremail] = useState(false);
   const [errorphone, setErrorphone] = useState(false);
@@ -76,7 +79,7 @@ function ThirdStep({ donor, onChange, setStep, onRegister }) {
                 onChange={onChange}
                 inputValue={donor.phone}
                 inputName="phone"
-                Inputtype="number"
+                Inputtype="text"
               />
             </div>
             <div className="mb-8 md:mb-16 text:sm text-red-600">

src/components/ThirdStep/__test__/__snapshots__/ThirdStep.test.jsx.snap

@@ -105,7 +105,7 @@ exports[`renders correctly 1`] = `
               name="phone"
               onChange={[Function]}
               placeholder="donate_third_page.phone_placeholder"
-              type="number"
+              type="text"
               value=""
             />
           </div>

src/containers/About/About.jsx

@@ -10,6 +10,7 @@ import free from './images/free.svg';
 import save from './images/save.svg';
 
 function About() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   return (
     <div>

src/containers/DontDonate/DontDonate.jsx

@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet';
 import image from './images/doctor-office-and-blood-donation-design-vector-22887400.jpg';
 
 function DontDonate() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   const styleClass = {
     headerStyle: `text-primary-100  sm:text-xl md:text-2xl lg:text-3xl text-center font-semibold `,

src/containers/Home/Home.jsx

@@ -14,6 +14,7 @@ import Icon3 from './images/dizziness.svg';
 import Image from './images/Bg.svg';
 
 function Home() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   const history = useHistory();
   return (

src/containers/Instruction/Instruction.jsx

@@ -14,6 +14,7 @@ import six from '../../components/images/instructionimage/numbers/six.svg';
 import InstructionCard from '../../components/InstructionCard/InstructionCard';
 
 function Instruction() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   return (
     <div>

src/containers/Process/Process.jsx

@@ -9,6 +9,7 @@ import cookie from '../../components/images/process_image/cookie.svg';
 import blood from '../../components/images/process_image/blood.svg';
 
 function Process() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   return (
     <div>

src/containers/Search/Search.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import Table from '../../components/Table';
@@ -13,6 +13,9 @@ import DonorCard from '../../components/DonorComponent';
 import Loading from './images/loading.gif';
 
 function Search() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   const { t, i18n } = useTranslation();
   const [search, setsearch] = useState({ bloodType: 'O-', city: '' });
   const [city, setcity] = useState('');

src/containers/Terms&Services/Terms.jsx

@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet';
 import Paragraph from '../../components/Paragraph';
 
 function Terms() {
+  window.scrollTo(0, 0);
   const { t } = useTranslation();
   const styleClass = {
     HeaderStyle: `text-primary  md:text-lg lg:text-xl font-medium  pb-5 pt-5`,