lazarkostic
/
react-template
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

navigation

navigation
Dunja Djokic 2 år sedan
förälder
cf75fbeef3
incheckning
339f9373eb
8 ändrade filer med 249 tillägg och 178 borttagningar
Delad Vy Visa Diff Statistik
  1. 11
    13
      src/App.js
  2. 15
    6
      src/AppRoutes.js
  3. 153
    152
      src/components/Navbar/NavbarComponent.js
  4. 10
    5
      src/pages/AuthCallbackPage/AuthCallbackPage.js
  5. 11
    0
      src/pages/ErrorPage/ErrorPage.js
  6. 7
    2
      src/pages/HomePage/HomePage.js
  7. 31
    0
      src/pages/ProfilePage/ProfilePage.js
  8. 11
    0
      src/pages/SettingsPage/SettingsPage.js

+ 11
- 13
src/App.js Visa fil

@@ -1,5 +1,5 @@
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
// import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import i18next from "i18next";
import AppRoutes from "./AppRoutes";
@@ -11,15 +11,15 @@ import "react-toastify/dist/ReactToastify.css";
import { StyledEngineProvider } from "@mui/material";
import { authScopeStringGetHelper } from "util/authScopeHelpers";
import { LANGUAGE } from "constants/localStorage";
import { HOME_PAGE } from "constants/pages";
import { useSelector } from "react-redux";
import { selectCurrentToken } from "features/auth/authSlice";
// import { HOME_PAGE } from "constants/pages";
// import { useSelector } from "react-redux";
// import { selectCurrentToken } from "features/auth/authSlice";

const App = () => {
const { i18n } = useTranslation();
const navigate = useNavigate();
// const navigate = useNavigate();

const auth = useSelector(selectCurrentToken);
// const auth = useSelector(selectCurrentToken);

useEffect(() => {
const lang = authScopeStringGetHelper(LANGUAGE);
@@ -29,13 +29,11 @@ const App = () => {
}
}, []);

useEffect(() => {

if (auth !== null) {
navigate(HOME_PAGE, { replace: true });
}
}, []);
// useEffect(() => {
// if (auth !== null) {
// navigate(HOME_PAGE, { replace: true });
// }
// }, []);

return (
<>

+ 15
- 6
src/AppRoutes.js Visa fil

@@ -6,15 +6,24 @@ import RegisterPage from "pages/RegisterPage/RegisterPage";
import HomePage from "pages/HomePage/HomePage";
import RequireAuth from "components/RequireAuth/RequireAuth";
import AuthCallback from "pages/AuthCallbackPage/AuthCallbackPage";
import ProfilePage from "pages/ProfilePage/ProfilePage";
import SettingsPage from "pages/SettingsPage/SettingsPage";
import Error from "pages/ErrorPage/ErrorPage";

const AppRoutes = () => (
<Routes>
<Route path="/" element={<LoginPage />} />
<Route path="login" element={<LoginPage />} />
<Route exact path="register" element={<RegisterPage />} />
<Route path="/api/auth/:provider/callback" element={<AuthCallback />} />
<Route element={<RequireAuth />}>
<Route path="home" element={<HomePage />} />
<Route path="login" element={<LoginPage />} errorElement={<Error />} />
<Route
exact
path="register"
element={<RegisterPage />}
errorElement={<Error />}
/>
<Route path="api/auth/:provider/callback" element={<AuthCallback />} />
<Route element={<RequireAuth />} errorElement={<Error />}>
<Route path="/" element={<HomePage />} />
<Route path="profile" element={<ProfilePage />} />
<Route path="settings" element={<SettingsPage />} />
</Route>
</Routes>
);

+ 153
- 152
src/components/Navbar/NavbarComponent.js Visa fil

@@ -1,169 +1,170 @@
import React, { useState, useMemo, useContext } from "react";
import {
AppBar,
Badge,
Box,
IconButton,
Toolbar,
Typography,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
} from "@mui/material";
import { useTheme } from "@mui/system";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket";
import LogoutIcon from "@mui/icons-material/Logout";
import Brightness4Icon from "@mui/icons-material/Brightness4";
import Brightness7Icon from "@mui/icons-material/Brightness7";
import MenuList from "../MenuList/MenuListComponent";
import Drawer from "../Drawer/DrawerComponent";
import { ColorModeContext } from "context/ColorModeContext";
import { useDispatch } from "react-redux";
import { logOut } from "features/auth/authSlice";
import React, { useState } from "react";

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import MenuItem from "@mui/material/MenuItem";
import AdbIcon from "@mui/icons-material/Adb";
import Link from "@mui/material/Link";

const pages = ["Profile", "Settings"];
const settings = ["Profile", "Logout"];

const NavbarComponent = () => {
const dispatch = useDispatch();
const [openDrawer, setOpenDrawer] = useState(false);
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down("sm"));
const toggleColorMode = useContext(ColorModeContext);
const [anchorElNav, setAnchorElNav] = useState(null);
const [anchorElUser, setAnchorElUser] = useState(null);

const handleToggleDrawer = () => {
setOpenDrawer(!openDrawer);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};

const handleLogout = () => {
dispatch(logOut());
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};

const drawerContent = useMemo(
() => (
<List>
<ListItemButton divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 1</ListItemText>
</ListItemIcon>
</ListItemButton>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 2</ListItemText>
</ListItemIcon>
</ListItem>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemText>Link 3</ListItemText>
</ListItem>
<ListItem divider>
<IconButton onClick={toggleColorMode}>
<ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
{theme.palette.mode === "dark" ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</ListItem>
</List>
),
[handleToggleDrawer]
);
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};

return (
<AppBar
elevation={2}
sx={{ backgroundColor: "background.default", position: "relative" }}
>
<Toolbar>
<Box
component="div"
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
}}
>
{matches ? (
<Drawer
open={openDrawer}
toggleOpen={handleToggleDrawer}
content={drawerContent}
/>
) : (
<Box sx={{ display: "flex" }}>
<Typography
variant="h6"
sx={{
marginRight: 3,
cursor: "pointer",
color: "text.primary",
}}
>
Link 1
</Typography>
<Typography
variant="body1"
sx={{
marginRight: 3,
cursor: "pointer",
color: "text.primary",
}}
>
Link 2
</Typography>
<Typography
variant="subtitle1"
sx={{
marginRight: 3,
cursor: "pointer",
color: "text.primary",
}}
>
Link 3
</Typography>
</Box>
)}
<Box>
<MenuList />
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
{/* <AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} /> */}
<Typography
variant="h6"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
Home
</Typography>

<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: "block", md: "none" },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Link
href={`/${page.toLowerCase()}`}
underline="none"
textAlign="center"
>
{page}
</Link>
</MenuItem>
))}
</Menu>
</Box>
<Box
<AdbIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
mr: 2,
display: { xs: "flex", md: "none" },
flexGrow: 1,
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
{matches ? (
<Box>
<IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton>
</Box>
) : (
<Box>
<IconButton>
<Badge badgeContent={3} color="primary">
<ShoppingBasketIcon color="action" />
</Badge>
</IconButton>
<IconButton sx={{ ml: 1 }} onClick={toggleColorMode}>
{theme.palette.mode === "dark" ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
<IconButton onClick={handleLogout}>
<LogoutIcon />
</IconButton>
</Box>
)}
HOME
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
href={`/${page.toLowerCase()}`}
sx={{ my: 2, color: "white", display: "block" }}
>
{page}
</Button>
))}
</Box>

<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: "45px" }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Box>
</Toolbar>
</Toolbar>
</Container>
</AppBar>
);
};

+ 10
- 5
src/pages/AuthCallbackPage/AuthCallbackPage.js Visa fil

@@ -11,9 +11,12 @@ function AuthCallback() {
const { provider } = useParams();
const location = useLocation();
const dispatch = useDispatch();
const navigate = useNavigate()
const navigate = useNavigate();

const { data, isLoading } = useProviderLoginQuery({ provider, search: location.search });
const { data, isLoading } = useProviderLoginQuery({
provider,
search: location.search,
});

useEffect(() => {
if (data?.jwt && data?.refreshToken && data?.user) {
@@ -22,9 +25,11 @@ function AuthCallback() {
}
}, [data]);

return <div>
<BackdropComponent position="absolute" isLoading={isLoading} />
</div>;
return (
<div>
<BackdropComponent position="absolute" isLoading={isLoading} />
</div>
);
}

AuthCallback.propTypes = {

+ 11
- 0
src/pages/ErrorPage/ErrorPage.js Visa fil

@@ -0,0 +1,11 @@
import React from "react";

const Error = () => {
return (
<>
<p>Oops something went wrong!</p>
</>
);
};

export default Error;

+ 7
- 2
src/pages/HomePage/HomePage.js Visa fil

@@ -8,9 +8,14 @@ import PagingSortingFilteringExampleServerSide from "components/PagingSorting/Pa
import PagingSortingFilteringExample from "components/PagingSorting/PagingSortingFilteringExample";
import { useAllPostsQuery } from "features/posts/postsApiSlice";
import BackdropComponent from "components/Backdrop/BackdropComponent";
// import { useLocation } from "react-router-dom";

const HomePage = () => {
const {data, isLoading} = useAllPostsQuery()
console.log('posts', data?.data)
const { data, isLoading } = useAllPostsQuery();
console.log("posts", data?.data);
// let navigate = useLocation();
// console.log("navigate", navigate);

return (
<>
<NavbarComponent />

+ 31
- 0
src/pages/ProfilePage/ProfilePage.js Visa fil

@@ -0,0 +1,31 @@
import { Autocomplete, TextField } from "@mui/material";
import React from "react";
import { useLocation } from "react-router-dom";

const top100Films = [
{ label: "The Godfather", id: 1 },
{ label: "Pulp Fiction", id: 2 },
];

// or
// const top100Films = ["The Godfather", "Pulp Fiction"];

const ProfilePage = () => {
let navigate = useLocation();

console.log("navigate", navigate);

return (
<>
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</>
);
};

export default ProfilePage;

+ 11
- 0
src/pages/SettingsPage/SettingsPage.js Visa fil

@@ -0,0 +1,11 @@
import React from "react";

const SettingsPage = () => {
return (
<>
<p>Settings page</p>
</>
);
};

export default SettingsPage;

Write Förhandsgranska
Laddar…
Avbryt
Spara