Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable TAB URL #111

Open
henricasanova opened this issue Sep 2, 2022 · 1 comment
Open

Enable TAB URL #111

henricasanova opened this issue Sep 2, 2022 · 1 comment

Comments

@henricasanova
Copy link
Contributor

No description provided.

@derrickluyen
Copy link
Contributor

derrickluyen commented Sep 2, 2022

Tried to implement using the below section of code.

import React, { Component } from "react"
import Layout from "../../components/layout"
import PageHeader from "../../components/page_header"
import { Segment, Tab } from "semantic-ui-react"
import "katex/dist/katex.min.css"
import "./pedagogic_modules.css"

import WorkAndSpeed from "./include_single_core_computing/work_and_speed"
import TimeSharing from "./include_single_core_computing/time_sharing"
import Memory from "./include_single_core_computing/memory"
import IO from "./include_single_core_computing/io"
import Capstone from "./include_single_core_computing/capstone"
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';


class SingleCoreComputing extends Component {

  render() {
    const module = "A.1"
    const panes = [
      {
        menuItem: {
          key: "work_and_speed",
          content: "Work and Speed",
          to: "/work_and_speed"
        },
        pane: (
          <Route path="/work_and_speed"
                 render={() => (<Tab.Pane><WorkAndSpeed module={module} tab={"work_and_speed"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "time_sharing",
          content: "Time Sharing",
          to: "/time_sharing"
        },
        pane: (
          <Route path="/time_sharing"
                 render={() => (<Tab.Pane><TimeSharing module={module} tab={"time_sharing"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "memory",
          content: "Memory",
          to: "/memory"
        },
        pane: (
          <Route path="/memory"
                 render={() => (<Tab.Pane><Memory module={module} tab={"memory"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "io",
          content: "I/O",
          to: "/io"
        },
        pane: (
          <Route path="/io"
                 render={() => (<Tab.Pane><IO module={module} tab={"io"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "capstone",
          content: "Capstone",
          to: "/capstone"
        },
        pane: (
          <Route path="/capstone"
                 render={() => (<Tab.Pane><Capstone module={module} tab={"capstone"}/></Tab.Pane>)}
          />
        )
      },
    ]

    return (
      <Layout>
        <PageHeader title="A.1. Single-core Computing"/>

        <Segment style={{ marginBottom: "2em" }}>
          The goal of this module is to provide you with basic knowledge about sequential computing (i.e., running a
          program on a single core).
          <br/><br/>
          There is a lot of complexity under the cover, which belongs in Computer Architecture and Operating Systems{" "}
          <a className="link" href="/textbooks"> textbooks </a> . Instead, we take a high-level approach, with a focus on
          performance.
          <br/><br/>
          Go through the tabs below in sequence…
        </Segment>

        <Router>
          <div className="App" style={{ margin: "50px" }}>
            <Switch>
              <Tab className="tab-panes" renderActiveOnly={false} activeIndex={-1} panes={panes}
              />
            </Switch>
          </div>
        </Router>
      </Layout>
    );
  }

}

ReactDOM.render(<SingleCoreComputing />, document.getElementById("___gatsby"));

Main changes from original code:

  • converted SingleCoreComputing into a class that extends Component, thus making a render method necessary
  • adding to field to menuItems and adding the pane field with Route tag + path for each pane
  • adding Router and Switch tags around the Tab tag
  • use ReactDOM render (also tried hydrate) and get the component with id ___gatsby (equivalent to root)

This approach did not work and resulted in the below error. I tried resolving the error with gatsby clean to clear cache, changing useStaticQuery in layout.js by creating a custom Header in header.js that used StaticQuery, and a couple of other things that all led back to this same error.

Screen Shot 2022-08-29 at 8 58 46 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants