Clean up settings (#288)

react/src/about.js

@@ -12,7 +12,7 @@ class AboutPanel extends PageTemplate {
         super(props);
     }
 
-    main_content() {
+    main_content(template_info) {
         return (
             <div className="serif">
                 <div className={headerTextClass()}>About</div>

react/src/components/article-panel.js

@@ -24,7 +24,7 @@ class ArticlePanel extends PageTemplate {
         this.map_ref = React.createRef();
     }
 
-    main_content() {
+    main_content(template_info) {
         if (this.props.articleType == undefined) {
             throw new Error("articleType is undefined");
         }
@@ -78,16 +78,12 @@ class ArticlePanel extends PageTemplate {
         );
     }
 
-    has_screenshot_button() {
-        return true;
-    }
-
     screencap_elements() {
-        return {
+        return () => ({
             path: sanitize(this.props.longname) + ".png",
             overall_width: this.table_ref.current.offsetWidth * 2,
             elements_to_render: [this.headers_ref.current, this.table_ref.current, this.map_ref.current],
-        }
+        })
     }
 
     has_universe_selector() {

react/src/components/comparison-panel.js

@@ -39,23 +39,19 @@ class ComparisonPanel extends PageTemplate {
         this.map_ref = React.createRef();
     }
 
-    has_screenshot_button() {
-        return true;
-    }
-
     screencap_elements() {
-        return {
+        return () => ({
             path: sanitize(this.props.joined_string) + ".png",
             overall_width: this.table_ref.current.offsetWidth * 2,
             elements_to_render: [this.table_ref.current, this.map_ref.current],
-        }
+        })
     }
 
     has_universe_selector() {
         return true;
     }
 
-    main_content() {
+    main_content(template_info) {
         const self = this;
         if (this.props.names == undefined) {
             throw new Error("ComparisonPanel: names not set");
@@ -96,7 +92,7 @@ class ComparisonPanel extends PageTemplate {
                                         include_delete={this.props.datas.length > 1}
                                         on_click={() => on_delete(self.props.names, i)}
                                         on_change={(x) => on_change(self.props.names, i, x)}
-                                        screenshot_mode={this.state.screenshot_mode}
+                                        screenshot_mode={template_info.screenshot_mode}
                                     />
                                 </div>)
                             )}

react/src/components/mapper-panel.js

@@ -321,7 +321,7 @@ class MapperPanel extends PageTemplate {
         return super.render();
     }
 
-    main_content() {
+    main_content(template_info) {
         if (this.state.map_settings === undefined) {
             throw new Error("MapperPanel.main_content: map settings not set");
         }

react/src/components/quiz-panel.js

@@ -24,7 +24,7 @@ class QuizPanel extends PageTemplate {
         this.todays_quiz = this.props.todays_quiz;
     }
 
-    main_content() {
+    main_content(template_info) {
 
         const quiz = this.todays_quiz;
         const history = this.get_todays_quiz_history();

react/src/components/sidebar.tsx

@@ -3,12 +3,10 @@ import React from 'react';
 import "../style.css";
 import "./sidebar.css";
 import { mobileLayout } from '../utils/responsive';
-import { SettingsDictionary, useSetting } from '../page_template/settings';
+import { SettingsDictionary, useSetting, useStatisticCategoryMetadataCheckboxes } from '../page_template/settings';
 
-export function Sidebar(props: {
-    statistic_category_metadata_checkboxes: { name: string, setting_key: keyof SettingsDictionary }[]
-}) {
-    const statistic_category_metadata_checkboxes = props.statistic_category_metadata_checkboxes;
+export function Sidebar() {
+    const statistic_category_metadata_checkboxes = useStatisticCategoryMetadataCheckboxes();
     let sidebar_section_content = "sidebar-section-content";
     let sidebar_section_title = "sidebar-section-title";
     if (mobileLayout()) {

react/src/components/statistic-panel.js

@@ -32,16 +32,12 @@ class StatisticPanel extends PageTemplate {
         this.index_range = this.compute_index_range();
     }
 
-    has_screenshot_button() {
-        return true;
-    }
-
     screencap_elements() {
-        return {
+        return () => ({
             path: sanitize(this.props.joined_string) + ".png",
             overall_width: this.table_ref.current.offsetWidth * 2,
             elements_to_render: [this.headers_ref.current, this.table_ref.current],
-        }
+        })
     }
 
     has_universe_selector() {
@@ -108,7 +104,7 @@ class StatisticPanel extends PageTemplate {
         return style;
     }
 
-    main_content() {
+    main_content(template_info) {
         return <div>
             <div ref={this.headers_ref}>
                 <div className={headerTextClass()}>{this.props.rendered_statname}</div>

react/src/data-credit.js

@@ -54,7 +54,7 @@ class DataCreditPanel extends PageTemplate {
         return this._refs[name];
     }
 
-    main_content() {
+    main_content(template_info) {
         return (
             <div className="serif">
                 <div className={headerTextClass()}>Credits</div>

react/src/index.js

@@ -12,7 +12,7 @@ class IndexPanel extends PageTemplate {
         super(props);
     }
 
-    main_content() {
+    main_content(template_info) {
         return (
             <div>
                 <div>

react/src/page_template/template.js

@@ -10,70 +10,23 @@ import "@fontsource/jost/900.css";
 
 export { PageTemplate };
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 
 import { Header } from "../components/header";
 import { Sidebar } from "../components/sidebar";
 import "../common.css";
 import "../components/article.css";
-import { load_settings } from './settings';
 import { mobileLayout } from '../utils/responsive';
 import { create_screenshot } from '../components/screenshot';
-import { set_universe } from '../universe';
 
 class PageTemplate extends React.Component {
-    constructor(props) {
-        super(props);
-
-        const [settings, statistic_category_metadata_checkboxes] = load_settings();
-
-        this.statistic_category_metadata_checkboxes = statistic_category_metadata_checkboxes;
-
-        this.state = {
-            settings: settings,
-            hamburger_open: false,
-            screenshot_mode: false,
-        }
-    }
-
     render() {
-        const self = this;
-
-
-        const initiate_screenshot = async curr_universe => {
-            self.setState({ screenshot_mode: true });
-            setTimeout(async () => {
-                await self.screencap(curr_universe);
-                self.setState({ screenshot_mode: false });
-            })
-        }
-
-        return (
-            <Fragment>
-                <meta name="viewport" content="width=600" />
-                <div className={mobileLayout() ? "main_panel_mobile" : "main_panel"}>
-                    <Header
-                        hamburger_open={this.state.hamburger_open}
-                        set_hamburger_open={x => this.setState({ hamburger_open: x })}
-                        has_screenshot={this.has_screenshot_button()}
-                        has_universe_selector={this.has_universe_selector()}
-                        all_universes={this.props.universes}
-                        screenshot_mode={this.state.screenshot_mode}
-                        initiate_screenshot={curr_universe => initiate_screenshot(curr_universe)}
-                    />
-                    <div style={{ marginBlockEnd: "16px" }}></div>
-                    <BodyPanel
-                        hamburger_open={this.state.hamburger_open}
-                        main_content={this.main_content()}
-                        statistic_category_metadata={this.statistic_category_metadata_checkboxes}
-                    />
-                </div>
-            </Fragment>
-        );
-    }
-
-    has_screenshot_button() {
-        return false;
+        return <PageFunction
+            screencap_elements={this.screencap_elements()}
+            has_universe_selector={this.has_universe_selector()}
+            universes={this.props.universes}
+            main_content={template_info => this.main_content(template_info)}
+        />
     }
 
     has_universe_selector() {
@@ -82,28 +35,68 @@ class PageTemplate extends React.Component {
 
     screencap_elements() {
         // not implemented, should be overridden
-        return {
-            path: undefined,
-            overall_width: undefined,
-            elements_to_render: undefined,
-        }
+        return undefined;
     }
 
-    async screencap(curr_universe) {
-        const config = this.screencap_elements();
+    main_content(template_info) {
+        // not implemented, should be overridden
+        return (<div></div>);
+    }
+}
+
+function PageFunction({
+    screencap_elements,
+    has_universe_selector,
+    universes,
+    main_content,
+}) {
+    const [hamburger_open, set_hamburger_open] = useState(false);
+    const [screenshot_mode, set_screenshot_mode] = useState(false);
+
+    const has_screenshot_button = screencap_elements != undefined;
 
+    const screencap = async (curr_universe) => {
         try {
             console.log("Creating screenshot...");
-            await create_screenshot(config, this.has_universe_selector() ? curr_universe : undefined);
+            await create_screenshot(screencap_elements(), has_universe_selector ? curr_universe : undefined);
         } catch (e) {
             console.error(e);
         }
     }
 
-    main_content() {
-        // not implemented, should be overridden
-        return (<div></div>);
+    const initiate_screenshot = async curr_universe => {
+        set_screenshot_mode(true)
+        setTimeout(async () => {
+            await screencap(curr_universe);
+            set_screenshot_mode(false)
+        })
+    }
+
+    const template_info = {
+        screenshot_mode: screenshot_mode
     }
+
+    return (
+        <Fragment>
+            <meta name="viewport" content="width=600" />
+            <div className={mobileLayout() ? "main_panel_mobile" : "main_panel"}>
+                <Header
+                    hamburger_open={hamburger_open}
+                    set_hamburger_open={set_hamburger_open}
+                    has_screenshot={has_screenshot_button}
+                    has_universe_selector={has_universe_selector}
+                    all_universes={universes}
+                    screenshot_mode={screenshot_mode}
+                    initiate_screenshot={curr_universe => initiate_screenshot(curr_universe)}
+                />
+                <div style={{ marginBlockEnd: "16px" }}></div>
+                <BodyPanel
+                    hamburger_open={hamburger_open}
+                    main_content={main_content(template_info)}
+                />
+            </div>
+        </Fragment>
+    );
 }
 
 function TemplateFooter() {
@@ -132,14 +125,10 @@ function OtherCredits() {
 
 function BodyPanel(props) {
     if (props.hamburger_open) {
-        return <LeftPanel
-            statistic_category_metadata_checkboxes={props.statistic_category_metadata}
-        />
+        return <LeftPanel />
     }
     return <div className="body_panel">
-        {mobileLayout() ? undefined : <LeftPanel
-            statistic_category_metadata_checkboxes={props.statistic_category_metadata}
-        />}
+        {mobileLayout() ? undefined : <LeftPanel />}
         <div className={mobileLayout() ? "content_panel_mobile" : "right_panel"}>
             {props.main_content}
             <div className="gap"></div>
@@ -148,11 +137,10 @@ function BodyPanel(props) {
     </div>
 }
 
-function LeftPanel(props) {
+function LeftPanel() {
     return (
         <div className={mobileLayout() ? "left_panel_mobile" : "left_panel"}>
-            <Sidebar
-                statistic_category_metadata_checkboxes={props.statistic_category_metadata_checkboxes} />
+            <Sidebar />
         </div>
     )
 }