Skip to content

Commit eb09bc7

Browse files
author
Carter Hawks
committed
added some mockup logged-in user UI, added page titles in router, add gallery image density slider
1 parent 8a4b589 commit eb09bc7

File tree

13 files changed

+343
-84
lines changed

13 files changed

+343
-84
lines changed

‎frontend/package-lock.json

+43
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@
1818
"@testing-library/user-event": "^13.5.0",
1919
"@types/react-router-dom": "^5.3.3",
2020
"bootstrap": "^5.2.3",
21+
"dateformat": "^5.0.3",
2122
"inter-ui": "^3.19.3",
2223
"react": "^18.2.0",
2324
"react-bootstrap": "^2.7.0",
2425
"react-dom": "^18.2.0",
26+
"react-git-info": "^2.0.1",
2527
"react-responsive-masonry": "^2.1.7",
2628
"react-router-dom": "^6.7.0",
2729
"react-scripts": "5.0.1",

‎frontend/src/App.js

+73-32
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { BrowserRouter, Routes, Route } from "react-router-dom"; // Link
2+
import { GeistProvider, CssBaseline, Button } from '@geist-ui/react';
3+
import { useState } from "react";
24

35
import "./App.css";
46

@@ -23,46 +25,85 @@ import GalleryPage from "./pages/Gallery/GalleryPage";
2325
import OrganizePage from "./pages/Organize/OrganizePage";
2426

2527
import BaseLayout from "./pages/BaseLayout";
28+
import Page from "./pages/Page";
29+
30+
// https://beta.reactjs.org/learn/sharing-state-between-components
2631

2732
function App() {
33+
const [themeType, setThemeType] = useState('light')
34+
const enableDebugThemeButton = false;
35+
const switchThemes = () => {
36+
setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
37+
}
38+
2839
return (
2940

3041
<div className="App">
31-
<BrowserRouter>
32-
<Routes>
33-
34-
35-
{/* could refactor this to use contexts to inform the layout https://reactjs.org/docs/context.html */}
36-
<Route element={<BaseLayout/>}>
37-
<Route path="*" element={<NotFoundPage/>} />
38-
<Route path="/" element={<HomePage/>} />
39-
<Route path="geist-test" element={<GeistTestPage />} />
40-
</Route>
41-
<Route element={<BaseLayout centered/>}>
42-
<Route path="login" element={<LoginPage/>} />
43-
<Route path="register" element={<RegisterPage />}/>
44-
</Route>
45-
<Route element={<BaseLayout wide/>}>
46-
<Route path="gallery" element={<GalleryPage/>}/>
47-
<Route path="organize" element={<OrganizePage/>}/>
48-
</Route>
49-
50-
{/* Legacy routes */}
51-
<Route path="old" element={<Layout />}>
52-
<Route index element={<Home />} />
53-
<Route path="about" element={<About />} />
54-
<Route path="stars" element={<StarsContainer />}>
55-
<Route path=":starId" element={<StarDetails />} />
42+
<GeistProvider themeType={themeType}>
43+
<CssBaseline/>
44+
{ enableDebugThemeButton && <Button onClick={switchThemes} height="200px">switch theme</Button> }
45+
46+
<BrowserRouter>
47+
<Routes>
48+
49+
{/* could also refactor to use loaders to preload data for the route https://reactrouter.com/en/main/route/loader */}
50+
{/* could refactor this to use contexts to inform the layout https://reactjs.org/docs/context.html */}
51+
52+
<Route element={<BaseLayout/>}>
53+
54+
<Route path="*" element={(
55+
<Page title="Not Found" children={<NotFoundPage/>}/>
56+
)} />
57+
<Route path="/" element={(
58+
<Page title="Home" children={<HomePage/>}/>
59+
)} />
60+
<Route path="geist-test" element={(
61+
<Page title="Geist Testing" children={<GeistTestPage />}/>
62+
)} />
63+
64+
</Route>
65+
66+
<Route element={<BaseLayout centered/>}>
67+
68+
<Route path="login" element={(
69+
<Page title="Login" children={<LoginPage/>}/>
70+
)} />
71+
<Route path="register" element={(
72+
<Page title="Register" children={<RegisterPage />}/>
73+
)} />
74+
75+
</Route>
76+
77+
<Route element={<BaseLayout wide/>}>
78+
79+
<Route path="gallery" element={(
80+
<Page title="Gallery" children={<GalleryPage/>}/>
81+
)} />
82+
<Route path="organize" element={(
83+
<Page title="Organize" children={<OrganizePage/>}/>
84+
)} />
85+
5686
</Route>
57-
<Route path="clusters" element={<ClusterContainer />}>
58-
<Route path=":clusterId" element={<ClusterDetails />} />
87+
88+
{/* Legacy routes */}
89+
<Route path="old" element={<Layout />}>
90+
<Route index element={<Home />} />
91+
<Route path="about" element={<About />} />
92+
<Route path="stars" element={<StarsContainer />}>
93+
<Route path=":starId" element={<StarDetails />} />
94+
</Route>
95+
<Route path="clusters" element={<ClusterContainer />}>
96+
<Route path=":clusterId" element={<ClusterDetails />} />
97+
</Route>
98+
<Route path="test" element={<Testing />} />
99+
<Route path="*" element={<NotFound />} />
59100
</Route>
60-
<Route path="test" element={<Testing />} />
61-
<Route path="*" element={<NotFound />} />
62-
</Route>
63101

64-
</Routes>
65-
</BrowserRouter>
102+
</Routes>
103+
</BrowserRouter>
104+
105+
{/* <YourComponent onClick={switchThemes} /> */}
106+
</GeistProvider>
66107
</div>
67108
);
68109
}

‎frontend/src/components/Footer/Footer.css

+10-3
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,21 @@
2727
font-weight: 500;
2828
}
2929

30-
.icon-text-wrapper {
31-
display: flex;
30+
.icon-text-wrapper, .tooltip {
31+
display: flex !important;
3232
align-items: center;
3333
justify-content: flex-end;
34-
align-self: flex-end;
34+
/* align-self: flex-end; why is this here? */
3535
font-size: 1.05rem;
3636
}
3737

38+
.github-info-column {
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: flex-end;
42+
align-self: flex-end;
43+
}
44+
3845
.copyright-info {
3946
flex-grow: 1;
4047
}

‎frontend/src/components/Footer/Footer.jsx

+34-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { GitCommit as GitCommitIcon, GitBranch as GitBranchIcon, Calendar as CalendarIcon } from '@geist-ui/icons'
2-
3-
import { Text, Spacer, Divider } from '@geist-ui/core';
2+
import { Text, Spacer, Divider, Tooltip } from '@geist-ui/core';
3+
import GitInfo from 'react-git-info/macro';
4+
import dateFormat from 'dateformat';
45

56
import './Footer.css';
67

@@ -9,6 +10,15 @@ function getYear() {
910
}
1011

1112
const Footer = (props) => {
13+
const gitInfo = GitInfo();
14+
let time = new Date(gitInfo.commit.date);
15+
16+
let shortTime = dateFormat(time, "hh:MMTT dd/mm/yy Z");
17+
let longTime = dateFormat(time, "dddd, mmmm dS, yyyy, h:MM:ss TT Z");
18+
// console.log(time);
19+
// let datetimeString2 = time.getHours() + ":" + time.getMinutes() + " " + time.getDay() + "/" + time.getMonth() + "/" + time.getFullYear();
20+
// let datetimeString = time.toTimeString() + " " + time.toDateString();
21+
1222
return (
1323
<>
1424
<div className="footer">
@@ -18,19 +28,29 @@ const Footer = (props) => {
1828
<div className="copyright-info">
1929
© {getYear()} Stellection
2030
</div>
21-
<div className='icon-text-wrapper'>
22-
<GitCommitIcon size={18} className='icon'/>
23-
<Spacer inline w={.35} />
24-
<Text small className="code-text">a748bc3d</Text>
25-
<Spacer inline w={3}/>
26-
<GitBranchIcon size={18} className='icon'/>
27-
<Spacer inline w={.35} />
28-
<Text small className="code-text">main</Text>
29-
<Spacer inline w={3}/>
30-
<CalendarIcon size={18} className='icon'/>
31-
<Spacer inline w={.35} />
32-
<Text small className="">13 minutes ago</Text>
31+
<div class="github-info-column">
32+
33+
<div className='icon-text-wrapper'>
34+
<Tooltip text={gitInfo.commit.message} type="dark" placement="top" leaveDelay={50}>
35+
<GitCommitIcon size={20} className='icon'/>
36+
<Spacer inline w={.35} />
37+
<Text small className="code-text">{gitInfo.commit.shortHash}</Text>
38+
<Spacer inline w={1.5}/>
39+
<GitBranchIcon size={20} className='icon'/>
40+
<Spacer inline w={.35} />
41+
<Text small className="code-text">{gitInfo.branch}</Text>
42+
</Tooltip>
43+
<Spacer inline w={1.5}/>
44+
<Tooltip text={longTime} type="dark" placement="top" leaveDelay={50}>
45+
<CalendarIcon size={20} className='icon'/>
46+
<Spacer inline w={.35} />
47+
<Text small className="">{shortTime}</Text>
48+
</Tooltip>
49+
</div>
50+
51+
3352
</div>
53+
3454
</div>
3555

3656

0 commit comments

Comments
 (0)