feat: optmised behavior of closeable notice

zimmerman-team · Sep 7, 2020 · 4f4e282 · 4f4e282
1 parent 94d9c4e
commit 4f4e282
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 59 deletions.
diff --git a/src/app/components/HomeHeader/index.tsx b/src/app/components/HomeHeader/index.tsx
@@ -1,13 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Container from '@material-ui/core/Container';
 import { HeaderModel } from 'app/components/surfaces/Header/model';
 import { AppBar } from 'app/components/surfaces/AppBar';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import { Hidden } from '@material-ui/core';
 import BackgroundImage from 'app/assets/images/DottedMap.svg';
+import useCookie from '@devhammed/use-cookie';
 
 export const HomeHeader = (props: HeaderModel) => {
+  /* this hook is for setting the cookie */
+  const [cookie, setCookie] = useCookie('covidNotice', 'true');
+
+  /* this hook is for visually hiding the component */
+  const [visible, setVisibility] = useState(cookie);
+
   return (
     <div
       css={`
@@ -17,7 +24,7 @@ export const HomeHeader = (props: HeaderModel) => {
         background-repeat: no-repeat;
         background-position: center right;
         padding-bottom: 47px;
-        padding-top: 140px;
+        padding-top: ${visible ? `200px` : `140px`};
       `}
     >
       <Container maxWidth="lg">

diff --git a/src/app/components/feedback/Banners/CovidBanner/index.tsx b/src/app/components/feedback/Banners/CovidBanner/index.tsx
@@ -10,7 +10,7 @@ const FontSize = '16px';
 
 const WrapperStyle = css`
   color: #2e2e2e;
-  //line-height: 25px;
+  line-height: 25px;
   font-size: ${FontSize};
   line-height: 2;
   transform: translateY(-25px);
@@ -31,7 +31,7 @@ const NoticeContentStyle = css`
   border: 0;
   position: relative;
   padding: 20px 0;
-  width: 96%;
+  width: 100%;
 `;
 
 const RichTextStyle = css`
@@ -100,10 +100,6 @@ export const CovidBanner = (props: CookieNoticeParams) => {
 
   const ref = useRef(null);
 
-  //   useClickAway(ref, () => {
-  //     handleClose();
-  //   });
-
   function handleClose(event?: SyntheticEvent, reason?: string) {
     setCookie('false', {
       expires: 31536000 * 20,
@@ -115,6 +111,7 @@ export const CovidBanner = (props: CookieNoticeParams) => {
       sameSite: '',
     });
     setVisibility(!visible);
+    window.location.reload();
   }
 
   return (
@@ -123,10 +120,10 @@ export const CovidBanner = (props: CookieNoticeParams) => {
       <div
         css={`
           color: #2e2e2e;
-          //line-height: 25px;
-          font-size: ${props.shrink ? `14px` : `14px`};
-          line-height: ${props.shrink ? `1.5` : `1.5`};
-          transform: ${props.shrink ? `translateY(-25px)` : `translateY(0)`};
+          line-height: 25px;
+          font-size: 16px;
+          line-height: 25px;
+          //transform: ${props.shrink ? `translateY(-25px)` : `translateY(0)`};
           position: relative;
           display: flex;
           width: 100%;
@@ -138,9 +135,22 @@ export const CovidBanner = (props: CookieNoticeParams) => {
           align-content: flex-start;
         `}
       >
+        <div
+          css={`
+            position: absolute;
+            top: 0;
+            left: -50vw;
+            width: 150vw;
+            height: 100%;
+            background-color: #f3eba1;
+            border-bottom: 1px solid #e8d746;
+          `}
+        />
         <div css={NoticeContentStyle}>
           <div css={RichTextStyle}>
             <p css={ParagraphStyle}>
+              <b>Important notice:</b>
+              <br />
               Please note that the{' '}
               <a
                 css={LinkTextStyle}

diff --git a/src/app/components/surfaces/AppBar/index.tsx b/src/app/components/surfaces/AppBar/index.tsx
@@ -9,6 +9,24 @@ import { Hidden } from '@material-ui/core';
 import { DrawerMenu } from 'app/components/navigation/Drawer';
 import { mockData as drawerMockData } from 'app/components/navigation/Drawer/mock';
 import useDocumentScrollThrottled from 'app/components/surfaces/AppBar/utils';
+import useCookie from '@devhammed/use-cookie';
+// import { useCookie } from 'react-use';
+
+function getCookie(cname) {
+  var name = cname + '=';
+  var decodedCookie = decodeURIComponent(document.cookie);
+  var ca = decodedCookie.split(';');
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return '';
+}
 
 type AppBarProps = {
   label?: string;
@@ -71,7 +89,33 @@ export const AppBar = (props: AppBarProps) => {
   //   setShouldShowShadow(isMinimumScrolled);
   // });
 
-  const shadowStyle = props.shrink ? shrunkStyle : baseStyle;
+  /* this hook is for setting the cookie */
+  const [cookie, setCookie] = useCookie('covidNotice', true);
+  // const [value, updateCookie, deleteCookie] = useCookie("my-cookie");
+
+  /* this hook is for visually hiding the component */
+  const [visible, setVisibility] = useState(cookie);
+
+  const shadowStyle = props.shrink
+    ? css`
+        height: 50px;
+        background-color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 20px;
+        //margin-top: -25px;
+        margin-top: ${visible ? `0` : `-25px`};
+      `
+    : css`
+        height: 100px;
+        background-color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 20px;
+        margin-top: 0;
+      `;
 
   return (
     <React.Fragment>

diff --git a/src/app/components/surfaces/Header/index.tsx b/src/app/components/surfaces/Header/index.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Container from '@material-ui/core/Container';
 import { HeaderModel } from 'app/components/surfaces/Header/model';
 import { AppBar } from 'app/components/surfaces/AppBar';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import { Hidden } from '@material-ui/core';
 import BackgroundImage from 'app/assets/images/DottedMap.svg';
+import useCookie from '@devhammed/use-cookie';
 
 export const Header = (props: HeaderModel) => {
+  /* this hook is for setting the cookie */
+  const [cookie, setCookie] = useCookie('covidNotice', 'true');
+
+  /* this hook is for visually hiding the component */
+  const [visible, setVisibility] = useState(cookie);
   return (
     <div
       css={`
@@ -17,7 +23,7 @@ export const Header = (props: HeaderModel) => {
         background-repeat: no-repeat;
         background-position: center right;
         padding-bottom: 47px;
-        padding-top: 40px;
+        padding-top: ${visible ? `100px` : `40px`};
         //position: sticky;
         //top: -50px;
         //z-index: 20;

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -9,12 +9,19 @@ import { PageContainer } from 'app/modules/common/PageContainer';
 import { Container } from '@material-ui/core';
 import { CovidBanner } from 'app/components/feedback/Banners/CovidBanner';
 import useDocumentScrollThrottled from 'app/components/surfaces/AppBar/utils';
+import useCookie from '@devhammed/use-cookie';
 
 function App() {
   const [shouldShrink, setShouldShowShadow] = useState(false);
   const MINIMUM_SCROLL = 180;
   const TIMEOUT_DELAY = 400;
 
+  /* this hook is for setting the cookie */
+  const [cookie, setCookie] = useCookie('covidNotice', 'true');
+
+  /* this hook is for visually hiding the component */
+  const [visible, setVisibility] = useState(cookie);
+
   useDocumentScrollThrottled((callbackData) => {
     const { previousScrollTop, currentScrollTop } = callbackData;
     const isScrolledDown = previousScrollTop < currentScrollTop;
@@ -36,7 +43,8 @@ function App() {
             z-index: 20;
             position: fixed;
             width: 1040px;
-            top: 40px;
+            //top: 40px;
+            top: ${visible ? `0px` : `40px`};
             @media all and (max-width: 1040px) {
               width: calc(100% - 50px);
             }

diff --git a/src/app/modules/landing-module/layout.tsx b/src/app/modules/landing-module/layout.tsx
@@ -18,55 +18,53 @@ const TypographyOpacity = styled((props) => <Typography {...props} />)`
 
 export const LandingLayout = () => {
   return (
-    <>
-      <PageContainer footer>
-        {/*HEADER*/}
+    <PageContainer footer>
+      {/*HEADER*/}
 
-        <HomeHeader>
-          <Grid container direction="column">
-            <Grid item md={12} lg={7}>
-              <Typography variant="h3" color="textSecondary">
-                IATI Datastore
-              </Typography>
-              <Box width="100%" height="24px" />
-              <TypographyOpacity variant="h5" color="textSecondary">
-                The IATI Datastore provides data on development and humanitarian
-                spending and projects that address poverty and crises across the
-                world.
-              </TypographyOpacity>
-              <Box width="100%" height="24px" />
-              <TypographyOpacity variant="body2" color="textSecondary">
-                Find data published by organisations from governments,
-                development finance institutions and UN agencies to NGOs,
-                foundations and the private sector. They have published data
-                according to the IATI Standard, our set of rules and guidance
-                for sharing useful, open data.
-              </TypographyOpacity>
-              <Box width="100%" height="24px" />
-              <TypographyOpacity variant="body2" color="textSecondary">
-                Access data through using the Datastore’s API or Query Builder.
-              </TypographyOpacity>
-            </Grid>
+      <HomeHeader>
+        <Grid container direction="column">
+          <Grid item md={12} lg={7}>
+            <Typography variant="h3" color="textSecondary">
+              IATI Datastore
+            </Typography>
+            <Box width="100%" height="24px" />
+            <TypographyOpacity variant="h5" color="textSecondary">
+              The IATI Datastore provides data on development and humanitarian
+              spending and projects that address poverty and crises across the
+              world.
+            </TypographyOpacity>
+            <Box width="100%" height="24px" />
+            <TypographyOpacity variant="body2" color="textSecondary">
+              Find data published by organisations from governments, development
+              finance institutions and UN agencies to NGOs, foundations and the
+              private sector. They have published data according to the IATI
+              Standard, our set of rules and guidance for sharing useful, open
+              data.
+            </TypographyOpacity>
+            <Box width="100%" height="24px" />
+            <TypographyOpacity variant="body2" color="textSecondary">
+              Access data through using the Datastore’s API or Query Builder.
+            </TypographyOpacity>
+          </Grid>
 
-            <Box width="100%" height="36px" />
+          <Box width="100%" height="36px" />
 
-            <Grid item sm={12} md={4} lg={4}>
-              <IconButtonOutlined label="Query Builder" />
-            </Grid>
+          <Grid item sm={12} md={4} lg={4}>
+            <IconButtonOutlined label="Query Builder" />
           </Grid>
-        </HomeHeader>
+        </Grid>
+      </HomeHeader>
 
-        {/*ARTICLES*/}
+      {/*ARTICLES*/}
 
-        <Container maxWidth="lg">
-          <LandingMidSection />
-        </Container>
+      <Container maxWidth="lg">
+        <LandingMidSection />
+      </Container>
 
-        {/*FOOTER*/}
-        {/*TODO: replace box with footer component*/}
-        {/*<Box width="100%" height="200px" bgcolor="#155366" />*/}
-        {/*<Footer />*/}
-      </PageContainer>
-    </>
+      {/*FOOTER*/}
+      {/*TODO: replace box with footer component*/}
+      {/*<Box width="100%" height="200px" bgcolor="#155366" />*/}
+      {/*<Footer />*/}
+    </PageContainer>
   );
 };