more boilerplate
This commit is contained in:
parent
c149d99b57
commit
125dc35dfa
16 changed files with 818 additions and 1154 deletions
1829
package-lock.json
generated
1829
package-lock.json
generated
File diff suppressed because it is too large
Load diff
14
package.json
14
package.json
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
20
src/App.jsx
20
src/App.jsx
|
|
@ -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
25
src/components/Navbar.jsx
Normal 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>
|
||||
|
||||
<Typography>TODO: page</Typography>
|
||||
<>
|
||||
<Button color='inherit' variant='outlined' size='small' to='/' component={Link}>Home</Button>
|
||||
<Button color='inherit' variant='outlined' size='small' to='/explorer' component={Link}>Explorer</Button>
|
||||
<Button color='inherit' variant='outlined' size='small' to='/login' component={Link}>Login</Button>
|
||||
</>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
5
src/containers/Buffet.jsx
Normal file
5
src/containers/Buffet.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default function Buffet() {
|
||||
return <>
|
||||
Buffet
|
||||
</>
|
||||
}
|
||||
5
src/containers/Dashboard.jsx
Normal file
5
src/containers/Dashboard.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default function Dashboard() {
|
||||
return <>
|
||||
Dashboard
|
||||
</>
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default function Home() {
|
||||
return <>
|
||||
Home
|
||||
</>
|
||||
}
|
||||
|
|
@ -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
5
src/containers/Login.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default function Login() {
|
||||
return <>
|
||||
Login
|
||||
</>
|
||||
}
|
||||
5
src/containers/Mail.jsx
Normal file
5
src/containers/Mail.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default function Mail() {
|
||||
return <>
|
||||
Mail
|
||||
</>
|
||||
}
|
||||
5
src/containers/QA.jsx
Normal file
5
src/containers/QA.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default function QA() {
|
||||
return <>
|
||||
QA
|
||||
</>
|
||||
}
|
||||
|
|
@ -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 }
|
||||
19
src/contexts/UserContext.js
Normal file
19
src/contexts/UserContext.js
Normal 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
3
src/contexts/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import UserProvider, { useUser } from './UserContext'
|
||||
|
||||
export { UserProvider, useUser }
|
||||
5
src/var.js
Normal file
5
src/var.js
Normal 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 }
|
||||
Reference in a new issue