Add title to tableau (#114)

* Add a title to the Tableau iframe

* Put the Tableau url in the config

* Set the no-unused-vars eslint rule to error

eslint-config-inato/typescript.js

@@ -12,7 +12,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/indent': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/no-throw-literal': 'error',
     '@typescript-eslint/no-empty-function': 'off',

src/config/config.json

@@ -7,6 +7,7 @@
   "ga": {
     "id": null
   },
+  "TableauUrl": "https://public.tableau.com/views/Who_15849588323430/ClinicalResearchforCOVID-19",
   "emailSubscribeHookUrl": "https://hooks.zapier.com/hooks/catch/6538069/o1x0ecd/",
   "feedbackUrl": "mailto:[email protected]?subject=Feedback%20Anticovid%20platform&body=Would%20you%20recommend%20the%20Anticovid%20platform%20to%20a%20colleague%20or%20a%20peer%3F%0A%0A%0AIf%20not%2C%20what%20is%20missing%3F%0A%0A%0AWhat%20is%20the%20most%20useful%20feature%20to%20you%20%3F%0A%0A%0AAny%20other%20comments%3F"
 }

src/config/config.prod.json

@@ -7,6 +7,7 @@
   "ga": {
     "id": "UA-154728623-2"
   },
+  "TableauUrl": "https://public.tableau.com/views/Who_15849588323430/ClinicalResearchforCOVID-19",
   "emailSubscribeHookUrl": "https://hooks.zapier.com/hooks/catch/6538069/o1x0ecd/",
   "feedbackUrl": "mailto:[email protected]?subject=Feedback%20Anticovid%20platform&body=Would%20you%20recommend%20the%20Anticovid%20platform%20to%20a%20colleague%20or%20a%20peer%3F%0A%0A%0AIf%20not%2C%20what%20is%20missing%3F%0A%0A%0AWhat%20is%20the%20most%20useful%20feature%20to%20you%20%3F%0A%0A%0AAny%20other%20comments%3F"
 }

src/config/config.staging.json

@@ -7,6 +7,7 @@
   "ga": {
     "id": null
   },
+  "TableauUrl": "https://public.tableau.com/views/Who_15849588323430/ClinicalResearchforCOVID-19",
   "emailSubscribeHookUrl": "https://hooks.zapier.com/hooks/catch/6538069/o1x0ecd/",
   "feedbackUrl": "mailto:[email protected]?subject=Feedback%20Anticovid%20platform&body=Would%20you%20recommend%20the%20Anticovid%20platform%20to%20a%20colleague%20or%20a%20peer%3F%0A%0A%0AIf%20not%2C%20what%20is%20missing%3F%0A%0A%0AWhat%20is%20the%20most%20useful%20feature%20to%20you%20%3F%0A%0A%0AAny%20other%20comments%3F"
 }

src/config/index.tsx

@@ -5,4 +5,5 @@ export default config as {
   ga: { id: string | null };
   emailSubscribeHookUrl: string;
   feedbackUrl: string;
+  TableauUrl: string;
 };

src/pages/AnalysisPage/AnalysisPage.tsx

@@ -2,28 +2,50 @@ import React from "react";
 import styled from "styled-components";
 import TableauReport from "tableau-react";
 
-import { Disclaimer, CTAFooter, SendUsFeedbackCard, devices } from "../../ui";
+import {
+  Disclaimer,
+  CTAFooter,
+  SendUsFeedbackCard,
+  devices,
+  colors
+} from "../../ui";
+import { useBoolean } from "../../hooks";
+import config from "../../config";
 
 import { Introduction } from "./Introduction";
+import { Title } from "./Title";
 
-const TableauURL =
-  "https://public.tableau.com/views/Who_15849588323430/ClinicalResearchforCOVID-19";
-
-export const AnalysisPage = () => (
-  <Container>
-    <Introduction />
-    <TableauReport
-      url={TableauURL}
-      options={{
-        width: "100%",
-        height: "100%"
-      }}
-    />
-    <StyledSendUsFeedbackCard />
-    <StyledCTAFooter />
-    <Disclaimer />
-  </Container>
-);
+export const AnalysisPage = () => {
+  const {
+    setToTrue: displayTableauTitle,
+    isTrue: isTableauTitleDisplayed
+  } = useBoolean(false);
+
+  return (
+    <Container>
+      <Introduction />
+      <TableauContainer>
+        {isTableauTitleDisplayed && (
+          <StyledTitle>
+            Clinical research for <UnbreakableWord>Covid-19</UnbreakableWord>
+          </StyledTitle>
+        )}
+
+        <TableauReport
+          url={config.TableauUrl}
+          options={{
+            width: "100%",
+            height: "100%",
+            onFirstVizSizeKnown: displayTableauTitle
+          }}
+        />
+      </TableauContainer>
+      <StyledSendUsFeedbackCard />
+      <StyledCTAFooter />
+      <Disclaimer />
+    </Container>
+  );
+};
 
 const Container = styled.div`
   padding: 32px 16px;
@@ -36,11 +58,28 @@ const Container = styled.div`
   > div {
     border-radius: 4px;
   }
-  > div:nth-child(2) {
+`;
+
+const TableauContainer = styled.div`
+  > div {
     height: 827px;
   }
 `;
 
+const StyledTitle = styled(Title)`
+  background-color: ${colors.SecondaryBackground};
+  margin: 0;
+  padding: 16px 16px 0 16px;
+
+  @media ${devices.Desktop} {
+    padding: 16px 32px 0 32px;
+  }
+`;
+
+const UnbreakableWord = styled.span`
+  white-space: nowrap;
+`;
+
 const StyledSendUsFeedbackCard = styled(SendUsFeedbackCard)`
   margin-top: 16px;
 

src/pages/AnalysisPage/Introduction.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import styled from "styled-components";
 
-import { colors, fontSize, fontWeight, lineHeight, devices } from "../../ui";
+import { colors, devices } from "../../ui";
 
 import { Accordion } from "./Accordion";
 import { LaboratoryIcon } from "./LaboratoryIcon";
+import { Title } from "./Title";
 
 export const Introduction = () => (
   <Container>
     <TextContainer>
-      <Title>What is Anticovid?</Title>
+      <StyledTitle>What is Anticovid?</StyledTitle>
       <Paragraph>
         Anticovid is an open access platform gathering virtually all available
         information in a transparent manner regarding clinical research
@@ -92,17 +93,8 @@ const TextContainer = styled.div`
   }
 `;
 
-const Title = styled.h1`
-  font-family: Lora, Georgia;
-  color: ${colors.Primary};
-  font-size: ${fontSize.Medium};
-  font-weight: ${fontWeight.SemiBold};
-  line-height: ${lineHeight.Big};
+const StyledTitle = styled(Title)`
   margin: 0 0 4px 0;
-
-  @media ${devices.Desktop} {
-    font-size: ${fontSize.Big};
-  }
 `;
 
 const Paragraph = styled.p`

src/pages/AnalysisPage/Title.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+import { colors, fontSize, fontWeight, lineHeight, devices } from "../../ui";
+
+export const Title = styled.h1`
+  font-family: Lora, Georgia;
+  color: ${colors.Primary};
+  font-size: ${fontSize.Medium};
+  font-weight: ${fontWeight.SemiBold};
+  line-height: ${lineHeight.Big};
+
+  @media ${devices.Desktop} {
+    font-size: ${fontSize.Big};
+  }
+`;

src/pages/SearchPage/Facets.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { RefinementList, connectStats } from "react-instantsearch-dom";
+import { RefinementList } from "react-instantsearch-dom";
 import styled from "styled-components";
 
 import {

src/pages/SearchPage/Search.tsx

@@ -93,7 +93,7 @@ export const SearchPage = () => {
             />
             <StyledStats
               translations={{
-                stats(nbHits, timeSpentMS) {
+                stats(nbHits) {
                   return `${nbHits} trials found`;
                 }
               }}

src/ui/Checkbox.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { keyframes, css } from "styled-components";
-import { renderToStaticMarkup } from "react-dom/server";
 
 import { colors } from "./colors";