Skip to content

feat: Add Footer to every page with nav #1009

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Apr 14, 2022
Merged

feat: Add Footer to every page with nav #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e0a650
Add Footer to AuthAndNav, rename
presleyp Apr 13, 2022
74211bb
Fix in preferences layout
presleyp Apr 14, 2022
27c06fd
Remove double footer
presleyp Apr 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions site/src/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react"
import { Route, Routes } from "react-router-dom"
import { AuthAndNav, RequireAuth } from "./components"
import { RequireAuth } from "./components"
import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
import { PreferencesLayout } from "./components/Preferences/Layout"
import { IndexPage } from "./pages"
import { NotFoundPage } from "./pages/404"
Expand Down Expand Up @@ -39,18 +40,18 @@ export const AppRouter: React.FC = () => (
<Route
index
element={
<AuthAndNav>
<AuthAndFrame>
<TemplatesPage />
</AuthAndNav>
</AuthAndFrame>
}
/>
<Route path=":organization/:template">
<Route
index
element={
<AuthAndNav>
<AuthAndFrame>
<TemplatePage />
</AuthAndNav>
</AuthAndFrame>
}
/>
<Route
Expand All @@ -68,35 +69,35 @@ export const AppRouter: React.FC = () => (
<Route
path=":workspace"
element={
<AuthAndNav>
<AuthAndFrame>
<WorkspacePage />
</AuthAndNav>
</AuthAndFrame>
}
/>
</Route>

<Route
path="users"
element={
<AuthAndNav>
<AuthAndFrame>
<UsersPage />
</AuthAndNav>
</AuthAndFrame>
}
/>
<Route
path="orgs"
element={
<AuthAndNav>
<AuthAndFrame>
<OrganizationsPage />
</AuthAndNav>
</AuthAndFrame>
}
/>
<Route
path="settings"
element={
<AuthAndNav>
<AuthAndFrame>
<SettingsPage />
</AuthAndNav>
</AuthAndFrame>
}
/>

Expand Down
21 changes: 21 additions & 0 deletions site/src/components/AuthAndFrame/AuthAndFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from "react"
import { Navbar } from "../Navbar"
import { Footer } from "../Page/Footer"
import { RequireAuth } from "../Page/RequireAuth"

interface AuthAndFrameProps {
children: JSX.Element
}

/**
* Wraps page in RequireAuth and renders it between Navbar and Footer
*/
export const AuthAndFrame: React.FC<AuthAndFrameProps> = ({ children }) => (
<RequireAuth>
<>
<Navbar />
{children}
<Footer />
</>
</RequireAuth>
)
12 changes: 0 additions & 12 deletions site/src/components/Page/AuthAndNav.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion site/src/components/Page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export * from "./AuthAndNav"
export * from "./Footer"
export * from "./RequireAuth"
6 changes: 3 additions & 3 deletions site/src/components/Preferences/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Box from "@material-ui/core/Box"
import React from "react"
import { Outlet } from "react-router-dom"
import { AuthAndNav } from "../Page"
import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
import { TabPanel } from "../TabPanel"

export const Language = {
Expand All @@ -21,14 +21,14 @@ const menuItems = [

export const PreferencesLayout: React.FC = () => {
return (
<AuthAndNav>
<AuthAndFrame>
<Box display="flex" flexDirection="column">
<Box style={{ maxWidth: "1380px", margin: "1em auto" }}>
<TabPanel title={Language.preferencesLabel} menuItems={menuItems}>
<Outlet />
</TabPanel>
</Box>
</Box>
</AuthAndNav>
</AuthAndFrame>
)
}
2 changes: 0 additions & 2 deletions site/src/pages/templates/[organization]/[template]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { EmptyState } from "../../../../components/EmptyState"
import { ErrorSummary } from "../../../../components/ErrorSummary"
import { Header } from "../../../../components/Header"
import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
import { Footer } from "../../../../components/Page"
import { Column, Table } from "../../../../components/Table"
import { unsafeSWRArgument } from "../../../../util"
import { firstOrItem } from "../../../../util/array"
Expand Down Expand Up @@ -98,7 +97,6 @@ export const TemplatePage: React.FC = () => {
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
<Table {...tableProps} />
</Paper>
<Footer />
</div>
)
}
Expand Down
2 changes: 0 additions & 2 deletions site/src/pages/templates/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { CodeExample } from "../../components/CodeExample/CodeExample"
import { ErrorSummary } from "../../components/ErrorSummary"
import { Header } from "../../components/Header"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
import { Footer } from "../../components/Page"
import { Column, Table } from "../../components/Table"

export const TemplatesPage: React.FC = () => {
Expand Down Expand Up @@ -74,7 +73,6 @@ export const TemplatesPage: React.FC = () => {
<Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
<Table {...tableProps} />
</Paper>
<Footer />
</div>
)
}
Expand Down
3 changes: 0 additions & 3 deletions site/src/pages/workspaces/[workspace].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import useSWR from "swr"
import * as Types from "../../api/types"
import { ErrorSummary } from "../../components/ErrorSummary"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
import { Footer } from "../../components/Page"
import { Workspace } from "../../components/Workspace"
import { unsafeSWRArgument } from "../../util"
import { firstOrItem } from "../../util/array"
Expand Down Expand Up @@ -50,8 +49,6 @@ export const WorkspacePage: React.FC = () => {
<div className={styles.inner}>
<Workspace organization={organization} template={template} workspace={workspace} />
</div>

<Footer />
</div>
)
}
Expand Down