From 32e1528d790b1c9cac265712e83061a9d896135e Mon Sep 17 00:00:00 2001
From: Kavi Gupta <kavi@berkeley.edu>
Date: Tue, 13 Aug 2024 02:29:30 -0400
Subject: [PATCH] make pagetemplate mostly a functional component

---
 react/src/components/article-panel.js    |   8 +-
 react/src/components/comparison-panel.js |   8 +-
 react/src/components/statistic-panel.js  |   8 +-
 react/src/page_template/template.js      | 119 +++++++++++------------
 4 files changed, 64 insertions(+), 79 deletions(-)

diff --git a/react/src/components/article-panel.js b/react/src/components/article-panel.js
index 3ef6a2f92..74950a053 100644
--- a/react/src/components/article-panel.js
+++ b/react/src/components/article-panel.js
@@ -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() {
diff --git a/react/src/components/comparison-panel.js b/react/src/components/comparison-panel.js
index e112523d2..bf044ace7 100644
--- a/react/src/components/comparison-panel.js
+++ b/react/src/components/comparison-panel.js
@@ -39,16 +39,12 @@ 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() {
diff --git a/react/src/components/statistic-panel.js b/react/src/components/statistic-panel.js
index a1e70846e..ce0ddb95d 100644
--- a/react/src/components/statistic-panel.js
+++ b/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() {
diff --git a/react/src/page_template/template.js b/react/src/page_template/template.js
index 7290b67ec..710f8f452 100644
--- a/react/src/page_template/template.js
+++ b/react/src/page_template/template.js
@@ -10,7 +10,7 @@ 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";
@@ -20,56 +20,13 @@ import { mobileLayout } from '../utils/responsive';
 import { create_screenshot } from '../components/screenshot';
 
 class PageTemplate extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            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 });
-            })
-        }
-
-        const template_info = {
-            screenshot_mode: this.state.screenshot_mode
-        }
-
-        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(template_info)}
-                    />
-                </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() {
@@ -78,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(template_info) {
-        // 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() {