required padding added, added dev-tools link in footer

PolicyEngine · Oct 7, 2024 · f5b5129 · f5b5129
1 parent 0794959
commit f5b5129
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 126 deletions.
diff --git a/src/data/developerToolsList.js b/src/data/developerToolsList.js
@@ -1,7 +1,7 @@
 // A JSON data structure that describes PolicyEngine Developer tools,
 // for use on the Developer Hub page
-import apiImage from "../images/apistatus.png";
-import simImage from "../images/simulation.png";
+import apiImage from "../images/devHub/apistatus.png";
+import simImage from "../images/devHub/simulation.png";
 export const devTools = [
   {
     title: "API Status",

diff --git a/src/images/apistatus.png → src/images/devHub/apistatus.png b/src/images/apistatus.png → src/images/devHub/apistatus.png
diff --git a/src/images/simulation.png → src/images/devHub/simulation.png b/src/images/simulation.png → src/images/devHub/simulation.png
diff --git a/src/layout/Footer.jsx b/src/layout/Footer.jsx
@@ -61,6 +61,12 @@ function LinkSection() {
       label: "Terms and Conditions",
       isInternal: true,
     },
+    {
+      link: `/${countryId}/developer-tools`,
+      label: "Developer tools",
+      isInternal: true,
+    },
+
   ];
 
   const links = linkData.map((link, index) => {

diff --git a/src/pages/DeveloperHome.jsx b/src/pages/DeveloperHome.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Section from "../layout/Section";
 import { devTools } from "../data/developerToolsList";
 import style from "../style/index.js";
@@ -8,22 +8,15 @@ import { useLocation } from "react-router-dom";
 
 const DeveloperHome = () => {
   const displayCategory = useDisplayCategory();
-  console.log(displayCategory);
+  const { pathname } = useLocation();
 
+  useEffect(() => {
+    console.log("Scrolling to top on pathname change:", pathname);
+    window.scrollTo(0, 0); // Fallback to non-smooth scroll
+  }, [pathname]);
   return (
     <>
       <Section>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            paddingBottom: "3rem",
-          }}
-        >
-          <h2>Developer Tools</h2>
-        </div>
-
         <div
           style={
             {
@@ -47,7 +40,7 @@ const DeveloperHome = () => {
           }
         >
           {devTools.map((tool, index) => (
-            <MobileBox key={index} tool={tool} />
+            <ToolsCard key={index} tool={tool} />
           ))}
         </div>
       </Section>
@@ -57,19 +50,19 @@ const DeveloperHome = () => {
 
 export default DeveloperHome;
 
-function MobileBox({ tool }) {
+function ToolsCard({ tool }) {
   const displayCategory = useDisplayCategory();
   const mobile = displayCategory === "mobile";
   const tablet = displayCategory === "tablet";
 
   return (
-    <ToolBox
+    <ToolsStruct
       tablet={tablet}
       mobile={mobile}
       top={
         <div
           style={{
-            width: mobile || tablet ? "250px" : "100%",
+            width: mobile ? "150px" : tablet ? "350px" : "100%",
             height: mobile ? 150 : 300,
           }}
         >
@@ -120,6 +113,8 @@ function MobileBox({ tool }) {
           style={{
             paddingTop: "1rem",
             paddingLeft: "1rem",
+            paddingRight: "1rem",
+            width: `${mobile ? "150px" : "100%"}`,
           }}
         >
           {tool.title}
@@ -136,11 +131,11 @@ function MobileBox({ tool }) {
           </p>
         )}
       </div>
-    </ToolBox>
+    </ToolsStruct>
   );
 }
 
-function ToolBox({
+function ToolsStruct({
   children,
   top,
   tablet,
@@ -150,7 +145,6 @@ function ToolBox({
   style,
   mobile,
 }) {
-  console.log(mobile);
   return (
     <div
       style={{

diff --git a/src/pages/DeveloperLayout.jsx b/src/pages/DeveloperLayout.jsx
@@ -1,58 +1,45 @@
 import Header from "../layout/Header.jsx";
 import Footer from "../layout/Footer.jsx";
-import Section from "../layout/Section.jsx";
 import style from "../style/index.js";
 import PageHeader from "../layout/PageHeader.jsx";
-import { devTools } from "../data/developerToolsList.js";
-import useDisplayCategory from "../hooks/useDisplayCategory.js";
-import { Link, Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import { Helmet } from "react-helmet";
-import LinkButton from "../controls/LinkButton.jsx";
-import { useEffect, useState } from "react";
+
 
 export default function DeveloperLayout() {
-  const location = useLocation();
-  const pathParts = location.pathname.split("/");
-  const countryId = pathParts[1]; // Assumes the countryId is always the second segment in the path
-  const displayCategory = useDisplayCategory();
+  const { pathname } = useLocation();
+
+
+  if (pathname.length > 20) {
+    return (
+      <main>
+        <Outlet />
+      </main>
+    );
+  }
 
   return (
-    <>
+    <main>
       <Helmet>
-        <title>Developer Hub | PolicyEngine</title>
+        <title>Developer Tools | PolicyEngine</title>
       </Helmet>
-      <div>
+      <div >
         <Header />
+
         <PageHeader
-          title="Developer Hub"
+          title="Developer Tools"
           backgroundColor={style.colors.BLUE_98}
         >
           <p style={{ margin: 0 }}>
-            Welcome to the Developer Hub page for PolicyEngine! This hub is
+            Welcome to the Developer Tools page for PolicyEngine! This hub is
             designed to enhance your experience with our open-source projects by
             providing quick access to essential resources.
           </p>
         </PageHeader>
+
         <Outlet />
         <Footer />
       </div>
-    </>
+    </main>
   );
 }
-
-const DynamicBanner = () => {
-  const location = useLocation();
-  const pathParts = location.pathname.split("/");
-
-  return (
-    <>
-      <PageHeader title="Developer Hub" backgroundColor={style.colors.BLUE_98}>
-        <p style={{ margin: 0 }}>
-          Welcome to the Developer Hub page for PolicyEngine! This hub is
-          designed to enhance your experience with our open-source projects by
-          providing quick access to essential resources.
-        </p>
-      </PageHeader>
-    </>
-  );
-};
diff --git a/src/pages/Simulations.jsx b/src/pages/Simulations.jsx
@@ -12,9 +12,7 @@ import { Button, Drawer } from "antd";
 import CodeBlock from "../layout/CodeBlock";
 import PageHeader from "../layout/PageHeader";
 import style from "../style";
-import { Link, useNavigate } from "react-router-dom";
-import ArrowButton from "../controls/ArrowButton";
-import useMobile from "../layout/Responsive";
+import { Link } from "react-router-dom";
 
 export default function SimulationsPage() {
   // call /simulations endpoint, which returns
@@ -39,7 +37,7 @@ export default function SimulationsPage() {
     
     Then put the results in a table with all columns. Refresh the table every 10 seconds.
     */
-  const navigate = useNavigate(-1);
+
   const [data, setData] = useState([]);
   const fetchSimulations = async () => {
     apiCall("/simulations").then((response) => {
@@ -109,46 +107,20 @@ export default function SimulationsPage() {
     { title: "Duration", dataIndex: "duration", key: "duration" },
     { title: "Link", dataIndex: "link", key: "link" },
   ];
-  const mobile = useMobile();
 
   return (
     <>
-      {/* <Header /> */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-
-          paddingTop: 70,
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center", // Center vertically
-            marginBottom: "50px",
-            width: "90%",
-            justifyContent: "space-between", // Space items across the width
-          }}
-        >
-          <ArrowButton direction={"left"} onClick={() => navigate(-1)} />
-          <h1
-            style={{
-              flex: 1, // Allow the title to take up remaining space
-              textAlign: "center", // Center the text
-              margin: 0, // Remove default margin for proper centering
-            }}
-          >
-            Simulations
-          </h1>
-
-        </div>
-
-        <Section>
-          <Table dataSource={data} columns={columns} rowKey="start_time" />
-        </Section>
-      </div>
+      <Header />
+      <PageHeader title="Simulations" backgroundColor={style.colors.BLUE_98}>
+        <p style={{ margin: 0 }}>
+          This page shows the simulations that are currently running or have run
+          in the past for the current version of the API. The table below is
+          updated every 15 seconds.
+        </p>
+      </PageHeader>
+      <Section>
+        <Table dataSource={data} columns={columns} rowKey="start_time" />
+      </Section>
       <Footer />
     </>
   );
@@ -245,4 +217,4 @@ function ErrorMessage(props) {
       </Button>
     </>
   );
-}
+}
diff --git a/src/pages/StatusPage.jsx b/src/pages/StatusPage.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
 import useMobile from "../layout/Responsive";
-import style from "../style";
 import Header from "../layout/Header";
 import Footer from "../layout/Footer";
 import { countryApiCall, apiCall } from "../api/call";
@@ -14,9 +13,6 @@ import {
   COUNTRY_NAMES,
 } from "../data/countries";
 import { Helmet } from "react-helmet";
-import PageHeader from "../layout/PageHeader";
-import ArrowButton from "../controls/ArrowButton";
-import { useNavigate } from "react-router-dom";
 
 function ApiStatus({ apiStatus, apiCategory, countryNames }) {
   return (
@@ -63,8 +59,6 @@ function ApiStatus({ apiStatus, apiCategory, countryNames }) {
 
 export function StatusPage() {
   const mobile = useMobile();
-  const navigate = useNavigate();
-
   const [countryStatuses, setCountryStatuses] = useState(
     INITIAL_COUNTRY_STATUSES,
   );
@@ -129,6 +123,7 @@ export function StatusPage() {
 
   return (
     <>
+      <Header />
       <div
         style={{
           paddingLeft: 50,
@@ -141,34 +136,13 @@ export function StatusPage() {
           textAlign: "center",
         }}
       >
-       <div
-  style={{
-    display: "flex",
-    alignItems: "center", // Center vertically
-    marginBottom: "50px",
-    width: "60%",
-    justifyContent: "space-between", // Space out items
-  }}
->
-  <ArrowButton direction={"left"} onClick={() => navigate(-1)} />
-
-  <h1 style={{ 
-      flex: 1, // Allow the title to take up remaining space
-      textAlign: "center", // Center the text
-      margin: 0, // Remove default margin for proper centering
-  }}>
-    API status
-  </h1>
-
-
-</div>
-
         <div
           style={{
             paddingRight: 0,
             paddingLeft: 0,
           }}
         >
+          <h1>PolicyEngine API status</h1>
           <iframe
             title="PolicyEngine API status"
             src="https://policyengine.betteruptime.com"
@@ -219,4 +193,4 @@ export function StatusPage() {
       <Footer />
     </>
   );
-}
+}