From fae10a16a412fd2898c500b68531a3e341410b9b Mon Sep 17 00:00:00 2001
From: majakomel <maja.komel@gmail.com>
Date: Mon, 18 Sep 2023 16:50:35 +0200
Subject: [PATCH] Remove ReportBox

---
 components/ReportBox.js                 |  37 ---------
 components/landing/HighlightBox.js      | 104 +++++++++++-------------
 components/landing/HighlightsSection.js |  42 ++++++++--
 pages/incidents/index.js                |  30 ++++---
 4 files changed, 105 insertions(+), 108 deletions(-)
 delete mode 100644 components/ReportBox.js

diff --git a/components/ReportBox.js b/components/ReportBox.js
deleted file mode 100644
index b2846662c..000000000
--- a/components/ReportBox.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Flex, Heading, Box, Button, Text } from 'ooni-components'
-import Flag from 'components/Flag'
-import { getLocalisedRegionName } from 'utils/i18nCountries'
-import { formatLongDate } from 'utils'
-import { useIntl } from 'react-intl'
-import NLink from 'next/link'
-
-const ReportBox = ({country, startDate, endDate, title, id, shortDescription, ...props}) => {
-  const intl = useIntl()
-
-  return (
-    <Box 
-      py={4}
-      px={24}
-      sx={{border: '1px solid', borderColor: 'gray3', borderLeft: '10px solid', borderLeftColor: 'blue5'}}
-    >
-      {country && (
-        <Flex alignItems="center">
-          <Flag countryCode={country} size={32} />
-          <Heading h={28} ml={2}>
-            {getLocalisedRegionName(country, intl.locale)}
-          </Heading>
-        </Flex>
-      )}
-      <Text color="gray6">{startDate && formatLongDate(startDate, intl.locale)} - {endDate ? formatLongDate(endDate, intl.locale) : 'ongoing'}</Text>
-      <Heading h={4}>{title}</Heading>
-      <p>{shortDescription}</p>
-      <Box textAlign="center" mt={2}>
-        <NLink href={`/incidents/${id}`}>
-          <Button btnSize="small" hollow>Read More</Button>
-        </NLink>
-      </Box>
-    </Box>
-  )
-}
-
-export default ReportBox
\ No newline at end of file
diff --git a/components/landing/HighlightBox.js b/components/landing/HighlightBox.js
index 4276bd149..11786a416 100644
--- a/components/landing/HighlightBox.js
+++ b/components/landing/HighlightBox.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { useIntl } from 'react-intl'
 import PropTypes from 'prop-types'
-import NLink from 'next/link'
-import { Flex, Box, Link, theme, Text } from 'ooni-components'
+import { Flex, Box, Text, Heading, Link, theme } from 'ooni-components'
 import styled from 'styled-components'
 import Markdown from 'markdown-to-jsx'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
@@ -21,62 +20,56 @@ const HighlightBox = ({
   countryCode,
   title,
   text,
-  report,
-  explore,
-  tileColor = 'black'
+  dates,
+  footer
 }) => {
   const intl = useIntl()
 
   return (
-    <Box width={[1, 1/3]}>
-      <StyledFlex flexDirection='column' p={4} mx={[0, 3]} my={3} bg={tileColor} color='white'>
-        <Flex flexWrap='wrap' alignItems='center' my={3}>
-          <Flag countryCode={countryCode} size={40} border />
-          <Text fontSize={24} fontWeight='bold' mx={3}>{getLocalisedRegionName(countryCode, intl.locale)}</Text>
-        </Flex>
-        <FlexGrowBox flexWrap='wrap' my={1}>
-          {title && 
-            <Box my={2}>
-              <Text fontSize={24} fontWeight='bold'>{intl.formatMessage({id: title})}</Text>
-            </Box>
-          }
-          <Box mb={3}>
-            <Text fontSize={20}>
-              <Markdown
-                options={{
-                  overrides: {
-                    a: {
-                      component: Link,
-                      props: {
-                        color: theme.colors.blue3
-                      }
-                    },
+    <Flex 
+      py={4}
+      px={24}
+      sx={{
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        border: '1px solid',
+        borderColor: 'gray3',
+        borderLeft: '10px solid',
+        borderLeftColor: 'blue5',
+        minHeight: '328px'
+      }}
+    >
+      <Box>
+        {countryCode && (
+          <Flex alignItems="center">
+            <Flag countryCode={countryCode} size={32} />
+            <Heading h={28} ml={2} my={0}>
+              {getLocalisedRegionName(countryCode, intl.locale)}
+            </Heading>
+          </Flex>
+        )}
+        {dates}
+        {/* <Text color="gray6">{startDate && formatLongDate(startDate, intl.locale)} - {endDate ? formatLongDate(endDate, intl.locale) : 'ongoing'}</Text> */}
+        <Heading h={4} lineHeight='1.1'>{title}</Heading>
+        <Text fontSize={20} as='p'>
+          <Markdown
+            options={{
+              overrides: {
+                a: {
+                  component: Link,
+                  props: {
+                    color: theme.colors.blue3
                   }
-                }}
-              >
-                {intl.formatMessage({id: text})}
-              </Markdown>
-            </Text>
-          </Box>
-        </FlexGrowBox>
-        <Flex>
-          {explore && 
-            <Box my={2} width={1/2}>
-              <Text fontSize={20}>
-                <NLink href={explore} passHref><Link color='white'>{intl.formatMessage({id: 'Home.Highlights.Explore'})}</Link></NLink>
-              </Text>
-            </Box>
-          }
-          {report && 
-            <Box my={2} width={1/2}>
-              <Text fontSize={20}>
-                <Link href={report} color='white'>{intl.formatMessage({id: 'Home.Highlights.ReadReport'})}</Link>
-              </Text>
-            </Box>
-          }
-        </Flex>
-      </StyledFlex>
-    </Box>
+                },
+              }
+            }}
+          >
+            {text}
+          </Markdown>
+        </Text>
+      </Box>
+      {footer}
+    </Flex>
   )
 }
   
@@ -87,9 +80,8 @@ HighlightBox.propTypes = {
   countryName: PropTypes.string.isRequired,
   title: PropTypes.string,
   text: PropTypes.string.isRequired,
-  report: PropTypes.string,
-  explore: PropTypes.string,
-  tileColor: PropTypes.string
+  footer: PropTypes.element,
+  dates: PropTypes.element
 }
 
 export default HighlightBox
diff --git a/components/landing/HighlightsSection.js b/components/landing/HighlightsSection.js
index 7af266ea3..0f4ffffc4 100644
--- a/components/landing/HighlightsSection.js
+++ b/components/landing/HighlightsSection.js
@@ -1,14 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Flex, Box, Text } from 'ooni-components'
-
+import { Flex, Box, Text, Button } from 'ooni-components'
+import NLink from 'next/link'
 import HighlightBox from './HighlightBox'
+import { styled } from 'styled-components'
+import { useIntl } from 'react-intl'
+
+const StyledGrid = styled(Box)`
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+gap: 24px;
+`
 
 const HighlightSection = ({
   title,
   highlights,
   description
 }) => {
+  const intl = useIntl()
+
   return (
     <section>
       <Box mt={4} mb={3}>
@@ -22,17 +32,39 @@ const HighlightSection = ({
       {description && <Box mt={4} mb={3}>
         <Text fontSize={20}>{description}</Text>
       </Box>}
-      <Flex flexWrap='wrap'>
+      <StyledGrid>
         {/* HighlightBoxes */}
         {
           highlights.map((item, index) => (
             <HighlightBox
               key={index}
-              {...item}
+              title={item.title ? intl.formatMessage({id: item.title}) : ''}
+              text={item.text ? intl.formatMessage({id: item.text}) : ''}
+              countryCode={item.countryCode}
+              footer={
+                <Flex justifyContent={'space-between'}>
+                  {item.explore && 
+                    <Box>
+                      <NLink href={item.explore}>
+                        <Button type='button' hollow btnSize='small'>
+                          {intl.formatMessage({id: 'Home.Highlights.Explore'})}
+                        </Button>
+                      </NLink>
+                    </Box>
+                  }
+                  {item.report && 
+                    <Box>
+                      <a href={item.report}>
+                        <Button type='button' hollow btnSize='small'>{intl.formatMessage({id: 'Home.Highlights.ReadReport'})}</Button>
+                      </a>
+                    </Box>
+                  }
+                </Flex>
+              }
             />
           ))
         }
-      </Flex>
+      </StyledGrid>
     </section>
   )
 }
diff --git a/pages/incidents/index.js b/pages/incidents/index.js
index 1ddd97c3a..2aefadf41 100644
--- a/pages/incidents/index.js
+++ b/pages/incidents/index.js
@@ -1,16 +1,17 @@
 import Head from 'next/head'
 import NavBar from 'components/NavBar'
-import { Container, Heading, Box, Flex, Input, Select, Button } from 'ooni-components'
+import { Container, Heading, Box, Flex, Input, Select, Button, Text } from 'ooni-components'
 import { StyledStickyNavBar, StyledStickySubMenu } from 'components/SharedStyledComponents'
 import useFilterWithSort from 'hooks/useFilterWithSort'
 import useSWR from 'swr'
 import { apiEndpoints, fetcher } from '/lib/api'
-import ReportBox from '../../components/ReportBox'
+import HighlightBox from 'components/landing/HighlightBox'
 import { styled } from 'styled-components'
 import { useIntl } from 'react-intl'
 import { useMemo } from 'react'
 import useUser from 'hooks/useUser'
 import NLink from 'next/link'
+import { formatLongDate } from 'utils'
 
 const sortOptions = [
   { key: 'start_asc', intlKey: 'Sort.StartAsc' },
@@ -21,10 +22,10 @@ const sortOptions = [
 
 const StyledGrid = styled(Box)`
 display: grid;
-grid-template-columns: 1fr 1fr;
-grid-auto-rows: 1fr;
+grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
 gap: 24px;
 `
+
 const ReportIndex = () => {
   const intl = useIntl()
   const { user } = useUser()
@@ -117,14 +118,23 @@ const ReportIndex = () => {
         </StyledStickySubMenu>
         <StyledGrid mt={4}>
           {sortedAndFilteredData.map((incident) => (
-            <ReportBox 
+            <HighlightBox 
               key={incident.id}
-              id={incident.id}
-              country={incident.CCs[0]}
+              countryCode={incident.CCs[0]}
               title={incident.title}
-              startDate={incident.start_time}
-              shortDescription={incident.short_description}
-              endDate={incident.end_time}
+              text={incident.short_description}
+              dates={
+                <Text color="gray6">
+                  {incident.start_time && formatLongDate(incident.start_time, intl.locale)} - {incident.end_time ? formatLongDate(incident.end_time, intl.locale) : 'ongoing'}
+                </Text>
+              }
+              footer={
+                <Box textAlign="center" mt={2}>
+                  <NLink href={`/incidents/${incident.id}`}>
+                    <Button btnSize="small" hollow>Read More</Button>
+                  </NLink>
+                </Box>
+              }
             />
           ))}
         </StyledGrid>