forked from CouncilDataProject/cdp-frontend
/
App.tsx
116 lines (102 loc) · 3.68 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import styled from "@emotion/styled";
import { Global, css } from "@emotion/react";
import { useAppConfigContext } from "./AppConfigContext";
import { LanguageConfigProvider } from "./LanguageConfigContext";
import useDocumentTitle from "../hooks/useDocumentTitle";
import { Header } from "../components/Layout/Header";
import { Footer } from "../components/Layout/Footer";
import { HomePage } from "../pages/HomePage";
/* import { SearchPage } from "../pages/SearchPage"; */
import { SearchEventsPage } from "../pages/SearchEventsPage";
import { EventPage } from "../pages/EventPage";
import { EventsPage } from "../pages/EventsPage";
import { PersonPage } from "../pages/PersonPage";
import { PeoplePage } from "../pages/PeoplePage";
import ErrorPage from "../pages/ErrorPage/ErrorPage";
import { SEARCH_TYPE } from "../pages/SearchPage/types";
import { strings } from "../assets/LocalizedStrings";
import { SUPPORTED_LANGUAGES } from "../constants/ProjectConstants";
import { screenWidths } from "../styles/mediaBreakpoints";
import "@councildataproject/cdp-design/dist/images.css";
import "@councildataproject/cdp-design/dist/colors.css";
import "@mozilla-protocol/core/protocol/css/protocol.css";
import "@mozilla-protocol/core/protocol/css/protocol-components.css";
import "semantic-ui-css/semantic.min.css";
const FlexContainer = styled.div({
// The App takes up at least 100% of the view height
minHeight: "100vh",
display: "flex",
flexDirection: "column",
});
const Main = styled.main({
boxSizing: "border-box",
width: "100%",
padding: "16px",
// Main component takes up all of the remaining height of the flex container
flex: 1,
// Align center across the horizontal axis
alignSelf: "center",
display: "flex",
flexDirection: "column",
[`@media (min-width:${screenWidths.tablet})`]: {
padding: "32px",
maxWidth: "1280px",
},
});
function App() {
useDocumentTitle(strings.council_data_project);
const { municipality } = useAppConfigContext();
const [language, setLanguage] = useState(SUPPORTED_LANGUAGES[0]);
return (
<>
<LanguageConfigProvider languageConfig={{ language, setLanguage }}>
<Router basename="/">
<Global
styles={css`
html,
body {
font-size: 100%;
}
body {
font-family: Inter, X-LocaleSpecific, sans-serif;
}
`}
/>
<FlexContainer>
<Header municipalityName={municipality.name} />
<Main>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
{/* <Route exact path="/search">
<SearchPage />
</Route> */}
<Route exact path={`/${SEARCH_TYPE.EVENT}`}>
<EventsPage />
</Route>
<Route exact path={`/${SEARCH_TYPE.EVENT}/search`}>
<SearchEventsPage />
</Route>
<Route exact path={`/${SEARCH_TYPE.EVENT}/:id`}>
<EventPage />
</Route>
<Route exact path="/people">
<PeoplePage />
</Route>
<Route exact path="/people/:id">
<PersonPage />
</Route>
<Route component={ErrorPage} />
</Switch>
</Main>
<Footer footerLinksSections={municipality.footerLinksSections} />
</FlexContainer>
</Router>
</LanguageConfigProvider>
</>
);
}
export default App;