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

🍎πŸͺ ↣ [STA-13 HDASH-5] Attempting to fix inheritance issues with layouts #40

Open
wants to merge 1 commit into
base: sta-1-basic-dashboard-index-format
Choose a base branch
from

Conversation

Gizmotronn
Copy link
Member

On the magic frontend, the tags run through the component. This allows us to automate the magic signin useStates/useEffects & have the header menu included, but it leads to issues with custom pages (say from other formats/templates like this main dashboard) (see image below):

I don't think this will format correctly on mobile devices (and it looks sort of odd on desktop views. Maybe we can add a custom header format and remove the margins between the menu divider and the header, include deeplinking to other parts of the app)

The main issue is that currently we don't seem to be able to add multiple layouts with react-router-dom…

import Header from "./header";

const Layout = ({ children }) => (
  <>
    <Header />
    <main>
      <div className="container">{children}</div>
    </main>
    <style>{`
      * {
        font-family: sans-serif !important;
        outline: none;
      }
      .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
      }
    `}</style>
  </>
);

export default Layout;

Here's my attempt to create a new layout:
src/components/db-layout.js

import Header from "./header";
import Dashboard from "../pages/Dashboard";

const dbLayout = ({}) => (
  <>
    <Header />
    <main>
      <Dashboard />
    </main>
  </>
);

export default dbLayout;

App.jsx has the Route configuration for different pages:

return (
    
    <Router>
      <Switch>
        <UserContext.Provider value={[user, setUser]}>
          <LifetimeContext.Provider value={[lifetimeAccess, setLifetimeAccess]}>
            <LifetimeAccessRequestStatusContext.Provider
              value={[
                lifetimeAccessRequestStatus,
                setLifetimeAccessRequestStatus,
              ]}
            >
              <Layout>
                <Route path="/" exact component={Home} />
                <Route path="/premium-content" component={PremiumContent} />
                <Route path="/signup" component={SignUp} />
                <Route path="/login" component={Login} />
                <Route path="/profile" component={Profile} />
                <Route path="/dashboard" component={Dashboard} />
                <Route
                  path="/payment"
                  render={(props) => {
                    return (
                      <Payment
                        Elements={Elements}
                        PaymentForm={PaymentForm}
                        promise={promise}
                      />
                    );
                  }}
                />
              </Layout>
              <div>
              </div>
            </LifetimeAccessRequestStatusContext.Provider>
          </LifetimeContext.Provider>
        </UserContext.Provider>
      </Switch>
    </Router>
  );

@Gizmotronn Gizmotronn added bug Something isn't working flask backend attempts with flask frontend labels Oct 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working flask backend attempts with flask frontend
Projects
Development

Successfully merging this pull request may close these issues.

2 participants