more boilerplate

This commit is contained in:
“spicecat” 2022-07-06 00:45:28 -05:00
commit 125dc35dfa
16 changed files with 818 additions and 1154 deletions

1829
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,22 +1,24 @@
{
"name": "reactjs-minimal-boilerplate",
"name": "qoverflow",
"version": "0.1.0",
"private": true,
"homepage": "",
"dependencies": {
"@mui/material": "^5.8.7",
"dotenv": "^16.0.1",
"formik": "^2.2.9",
"gh-pages": "^4.0.0",
"nodemon": "^2.0.16",
"react": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"superagent": "^7.1.6"
"superagent": "^7.1.6",
"superagent-cache": "^3.1.1"
},
"scripts": {
"start": "PORT=3006 react-scripts start",
"start": "PORT=3000 react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -b gh-pages -d build",
"dev": "nodemon index.js"
"deploy": "gh-pages -b gh-pages -d build"
},
"eslintConfig": {
"extends": [

View file

@ -6,9 +6,9 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#000000" />
<meta name="description" content="Reactjs minimal boilerplate" />
<meta name="description" content="qOverflow" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Reactjs Minimal Boilerplate</title>
<title>qOverflow</title>
</head>
<body>

View file

@ -1,14 +1,20 @@
import './App.css'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { Home, Layout, NotFound } from './containers'
import { Buffet, Dashboard, Layout, Mail, NotFound, QA } from './containers'
import { UserProvider } from './contexts'
export default function App() {
return <BrowserRouter basename=''>
<Routes>
<Route path='/' element={<Layout />}>
<Route index element={<Home />} />
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
<UserProvider>
<Routes>
<Route path='/' element={<Layout />}>
<Route index element={<Buffet />} />
<Route path='dashboard' element={<Dashboard />} />
<Route path='mail' element={<Mail />} />
<Route path='qa' element={<QA />} />
<Route path='*' element={<NotFound />} />
</Route>
</Routes>
</UserProvider>
</BrowserRouter>
}

25
src/components/Navbar.jsx Normal file
View file

@ -0,0 +1,25 @@
import { Link } from 'react-router-dom'
import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material'
import { useUser } from '../contexts'
// import HomeIcon from '@mui/icons-material/Home'
export default function Navbar() {
const { username } = useUser()
return (
<AppBar position='static'>
<Toolbar variant='dense'>
<IconButton color='inherit' className='menu-button' component={Link} to='/' >
{/* <HomeIcon /> */}
</IconButton>
&nbsp;
<Typography>TODO: page</Typography>
<>
<Button color='inherit' variant='outlined' size='small' to='/' component={Link}>Home</Button>&nbsp;
<Button color='inherit' variant='outlined' size='small' to='/explorer' component={Link}>Explorer</Button>&nbsp;
<Button color='inherit' variant='outlined' size='small' to='/login' component={Link}>Login</Button>&nbsp;
</>
</Toolbar>
</AppBar>
)
}

View file

@ -0,0 +1,5 @@
export default function Buffet() {
return <>
Buffet
</>
}

View file

@ -0,0 +1,5 @@
export default function Dashboard() {
return <>
Dashboard
</>
}

View file

@ -1,5 +0,0 @@
export default function Home() {
return <>
Home
</>
}

View file

@ -1,7 +1,9 @@
import { Outlet } from 'react-router-dom'
import Navbar from '../components/Navbar'
export default function Layout() {
return <div>
return <div className='body'>
<Navbar />
<Outlet />
</div>
}

5
src/containers/Login.jsx Normal file
View file

@ -0,0 +1,5 @@
export default function Login() {
return <>
Login
</>
}

5
src/containers/Mail.jsx Normal file
View file

@ -0,0 +1,5 @@
export default function Mail() {
return <>
Mail
</>
}

5
src/containers/QA.jsx Normal file
View file

@ -0,0 +1,5 @@
export default function QA() {
return <>
QA
</>
}

View file

@ -1,5 +1,8 @@
import Home from './Home'
import Buffet from './Buffet'
import Dashboard from './Dashboard'
import Layout from './Layout'
import Mail from './Mail'
import NotFound from './NotFound'
import QA from './QA'
export { Home, Layout, NotFound }
export { Buffet, Dashboard, Layout, Mail, NotFound, QA }

View file

@ -0,0 +1,19 @@
import { createContext, useContext, useState } from 'react'
const initialUserData = {
username: '',
}
const UserContext = createContext(initialUserData)
export default function UserProvider({ children }) {
const [userData, setUserData] = useState(initialUserData)
return (
<UserContext.Provider value={{ userData, setUserData }}>
{children}
</UserContext.Provider>
)
}
export const useUser = () => useContext(UserContext)

3
src/contexts/index.js Normal file
View file

@ -0,0 +1,3 @@
import UserProvider, { useUser } from './UserContext'
export { UserProvider, useUser }

5
src/var.js Normal file
View file

@ -0,0 +1,5 @@
const API = 'https://qoverflow.api.hscc.bdpa.org/v1',
SERVER = 'http://localhost:8000',
API_KEY = process.env.API_KEY
export { API, SERVER, API_KEY }