Skip to content
Snippets Groups Projects
Commit f8eb1c09 authored by Remco Tukker's avatar Remco Tukker
Browse files

dont change state while rendering and allow activating preview from all pages

parent 663fd02d
No related branches found
No related tags found
1 merge request!71Create a preview mode for publishing survey data
......@@ -8,6 +8,7 @@ import { Sections } from "../helpers/constants";
import PolicySidebar from "./PolicySidebar";
import { Chart as ChartJS } from 'chart.js';
import { usePreview } from "../helpers/usePreview";
ChartJS.defaults.font.size = 16;
ChartJS.defaults.font.family = 'Open Sans';
......@@ -22,11 +23,17 @@ interface inputProps {
}
function DataPage({ title, description, filter, children, category }: inputProps): ReactElement {
const preview = usePreview();
const locationWithoutPreview = window.location.origin + window.location.pathname;
return (
<>
{category === Sections.Organisation && <OrganizationSidebar />}
{category === Sections.Policy && <PolicySidebar />}
<PageHeader type={'data'} />
{ preview && <Row className="preview-banner">
<span>You are viewing a preview of the website which includes pre-published survey data. <a href={locationWithoutPreview}>Click here</a> to deactivate preview mode.</span>
</Row>}
<SectionNavigation activeCategory={category} />
<Container className="grow">
<Row>
......
import { useContext, useEffect, useMemo, useState } from "react";
import { PreviewContext } from "./PreviewProvider";
import { useEffect, useMemo, useState } from "react";
import { Nren, NrenAndYearDatapoint } from "../Schema";
import { usePreview } from "./usePreview";
function getYearsAndNrens(sourceData: NrenAndYearDatapoint[]) {
......@@ -18,7 +18,7 @@ export function useData<Datatype extends NrenAndYearDatapoint>(url, setFilterSel
const [data, setData] = useState<Datatype[]>([]);
const {preview} = useContext(PreviewContext);
const preview = usePreview();
const loadUrl = url + (preview ? '?preview' : '');
useEffect(() => {
......@@ -35,12 +35,6 @@ export function useData<Datatype extends NrenAndYearDatapoint>(url, setFilterSel
const newSelectedNrens = visibleNrens.length ? previous.selectedNrens : [...nrens.keys()];
return { selectedYears: newSelectedYears, selectedNrens: newSelectedNrens };
});
// TODO for budget we could use this fallback instead:
// setFilterSelection(previous => {
// const visibleNrens = previous.selectedNrens.filter(nren => nrens.has(nren));
// const newSelectedNrens = visibleNrens.length ? previous.selectedNrens : [...nrens.keys()];
// return { selectedYears: previous.selectedYears, selectedNrens: newSelectedNrens };
// });
});
}, [loadUrl, setFilterSelection]);
......
import { useContext, useEffect } from "react";
import { PreviewContext } from "./PreviewProvider";
import { useSearchParams } from "react-router-dom";
export function usePreview() {
const { preview, setPreview } = useContext(PreviewContext);
const [searchParams] = useSearchParams();
const previewParameter = searchParams.get('preview');
useEffect(() => {
if (previewParameter !== null) {
setPreview(true);
}
}, [previewParameter, setPreview]);
return preview;
}
\ No newline at end of file
......@@ -88,4 +88,10 @@
display: flex;
flex-direction: column;
min-height: 100vh;
}
.preview-banner {
background-color: pink;
text-align: center;
padding: 2em;
}
\ No newline at end of file
import React, { ReactElement, useContext } from "react";
import React, { ReactElement } from "react";
import { Container, Row } from "react-bootstrap";
import CollapsibleBox from "../components/CollapsibleBox";
import PageHeader from "../components/global/PageHeader"
import Banner from "../components/global/Banner";
import { Link, useSearchParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { Sections } from "../helpers/constants";
import { PreviewContext } from "../helpers/PreviewProvider";
import { usePreview } from "../helpers/usePreview";
function CompendiumData(): ReactElement {
const [searchParams] = useSearchParams();
const { setPreview } = useContext(PreviewContext);
if (searchParams.get('preview') !== null) {
setPreview(true);
}
usePreview();
return (
<main className="grow">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment