tudor.stanciu
/
cdn-frontend
mirror of https://dev.azure.com/tstanciu94/CDN/_git/CDN_Frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

prettier fix

master
Tudor Stanciu 2021-07-04 01:47:50 +03:00
parent 95d27176c2
commit 134b9b3f9d
4 changed files with 171 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc
View File

@ -2,5 +2,5 @@
"tabWidth": 2, "tabWidth": 2,
"singleQuote": false, "singleQuote": false,
"semi": true, "semi": true,
"trailingComma": "all" "trailingComma": "none"
} }

58
src/components/Header/Header.js
View File

@ -15,7 +15,7 @@ import {
Person as AccountIcon, Person as AccountIcon,
Search as SearchIcon, Search as SearchIcon,
Send as SendIcon, Send as SendIcon,
MenuOpen as MenuOpenIcon, MenuOpen as MenuOpenIcon
} from "@material-ui/icons"; } from "@material-ui/icons";
import classNames from "classnames"; import classNames from "classnames";
@ -31,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
import { import {
useLayoutState, useLayoutState,
useLayoutDispatch, useLayoutDispatch,
toggleSidebar, toggleSidebar
} from "../../context/LayoutContext"; } from "../../context/LayoutContext";
import { useUserDispatch, signOut } from "../../context/UserContext"; import { useUserDispatch, signOut } from "../../context/UserContext";
@ -41,29 +41,29 @@ const messages = [
variant: "warning", variant: "warning",
name: "Jane Hew", name: "Jane Hew",
message: "Hey! How is it going?", message: "Hey! How is it going?",
time: "9:32", time: "9:32"
}, },
{ {
id: 1, id: 1,
variant: "success", variant: "success",
name: "Lloyd Brown", name: "Lloyd Brown",
message: "Check out my new Dashboard", message: "Check out my new Dashboard",
time: "9:18", time: "9:18"
}, },
{ {
id: 2, id: 2,
variant: "primary", variant: "primary",
name: "Mark Winstein", name: "Mark Winstein",
message: "I want rearrange the appointment", message: "I want rearrange the appointment",
time: "9:15", time: "9:15"
}, },
{ {
id: 3, id: 3,
variant: "secondary", variant: "secondary",
name: "Liana Dutti", name: "Liana Dutti",
message: "Good news from sale department", message: "Good news from sale department",
time: "9:09", time: "9:09"
}, }
]; ];
const notifications = [ const notifications = [
@ -72,20 +72,20 @@ const notifications = [
id: 1, id: 1,
color: "success", color: "success",
type: "info", type: "info",
message: "What is the best way to get ...", message: "What is the best way to get ..."
}, },
{ {
id: 2, id: 2,
color: "secondary", color: "secondary",
type: "notification", type: "notification",
message: "This is just a simple notification", message: "This is just a simple notification"
}, },
{ {
id: 3, id: 3,
color: "primary", color: "primary",
type: "e-commerce", type: "e-commerce",
message: "12 new orders has arrived today", message: "12 new orders has arrived today"
}, }
]; ];
export default function Header(props) { export default function Header(props) {
@ -112,25 +112,19 @@ export default function Header(props) {
onClick={() => toggleSidebar(layoutDispatch)} onClick={() => toggleSidebar(layoutDispatch)}
className={classNames( className={classNames(
classes.headerMenuButtonSandwich, classes.headerMenuButtonSandwich,
classes.headerMenuButtonCollapse, classes.headerMenuButtonCollapse
)} )}
> >
{layoutState.isSidebarOpened ? ( {layoutState.isSidebarOpened ? (
<MenuOpenIcon <MenuOpenIcon
classes={{ classes={{
root: classNames( root: classNames(classes.headerIcon, classes.headerIconCollapse)
classes.headerIcon,
classes.headerIconCollapse,
),
}} }}
/> />
) : ( ) : (
<MenuIcon <MenuIcon
classes={{ classes={{
root: classNames( root: classNames(classes.headerIcon, classes.headerIconCollapse)
classes.headerIcon,
classes.headerIconCollapse,
),
}} }}
/> />
)} )}
@ -141,12 +135,12 @@ export default function Header(props) {
<div className={classes.grow} /> <div className={classes.grow} />
<div <div
className={classNames(classes.search, { className={classNames(classes.search, {
[classes.searchFocused]: isSearchOpen, [classes.searchFocused]: isSearchOpen
})} })}
> >
<div <div
className={classNames(classes.searchIcon, { className={classNames(classes.searchIcon, {
[classes.searchIconOpened]: isSearchOpen, [classes.searchIconOpened]: isSearchOpen
})} })}
onClick={() => setSearchOpen(!isSearchOpen)} onClick={() => setSearchOpen(!isSearchOpen)}
> >
@ -156,7 +150,7 @@ export default function Header(props) {
placeholder="Search…" placeholder="Search…"
classes={{ classes={{
root: classes.inputRoot, root: classes.inputRoot,
input: classes.inputInput, input: classes.inputInput
}} }}
/> />
</div> </div>
@ -164,7 +158,7 @@ export default function Header(props) {
color="inherit" color="inherit"
aria-haspopup="true" aria-haspopup="true"
aria-controls="mail-menu" aria-controls="mail-menu"
onClick={e => { onClick={(e) => {
setNotificationsMenu(e.currentTarget); setNotificationsMenu(e.currentTarget);
setIsNotificationsUnread(false); setIsNotificationsUnread(false);
}} }}
@ -181,7 +175,7 @@ export default function Header(props) {
color="inherit" color="inherit"
aria-haspopup="true" aria-haspopup="true"
aria-controls="mail-menu" aria-controls="mail-menu"
onClick={e => { onClick={(e) => {
setMailMenu(e.currentTarget); setMailMenu(e.currentTarget);
setIsMailsUnread(false); setIsMailsUnread(false);
}} }}
@ -199,7 +193,7 @@ export default function Header(props) {
color="inherit" color="inherit"
className={classes.headerMenuButton} className={classes.headerMenuButton}
aria-controls="profile-menu" aria-controls="profile-menu"
onClick={e => setProfileMenu(e.currentTarget)} onClick={(e) => setProfileMenu(e.currentTarget)}
> >
<AccountIcon classes={{ root: classes.headerIcon }} /> <AccountIcon classes={{ root: classes.headerIcon }} />
</IconButton> </IconButton>
@ -225,7 +219,7 @@ export default function Header(props) {
{messages.length} New Messages {messages.length} New Messages
</Typography> </Typography>
</div> </div>
{messages.map(message => ( {messages.map((message) => (
<MenuItem key={message.id} className={classes.messageNotification}> <MenuItem key={message.id} className={classes.messageNotification}>
<div className={classes.messageNotificationSide}> <div className={classes.messageNotificationSide}>
<UserAvatar color={message.variant} name={message.name} /> <UserAvatar color={message.variant} name={message.name} />
@ -236,7 +230,7 @@ export default function Header(props) {
<div <div
className={classNames( className={classNames(
classes.messageNotificationSide, classes.messageNotificationSide,
classes.messageNotificationBodySide, classes.messageNotificationBodySide
)} )}
> >
<Typography weight="medium" gutterBottom> <Typography weight="medium" gutterBottom>
@ -266,7 +260,7 @@ export default function Header(props) {
className={classes.headerMenu} className={classes.headerMenu}
disableAutoFocusItem disableAutoFocusItem
> >
{notifications.map(notification => ( {notifications.map((notification) => (
<MenuItem <MenuItem
key={notification.id} key={notification.id}
onClick={() => setNotificationsMenu(null)} onClick={() => setNotificationsMenu(null)}
@ -301,7 +295,7 @@ export default function Header(props) {
<MenuItem <MenuItem
className={classNames( className={classNames(
classes.profileMenuItem, classes.profileMenuItem,
classes.headerMenuItem, classes.headerMenuItem
)} )}
> >
<AccountIcon className={classes.profileMenuIcon} /> Profile <AccountIcon className={classes.profileMenuIcon} /> Profile
@ -309,7 +303,7 @@ export default function Header(props) {
<MenuItem <MenuItem
className={classNames( className={classNames(
classes.profileMenuItem, classes.profileMenuItem,
classes.headerMenuItem, classes.headerMenuItem
)} )}
> >
<AccountIcon className={classes.profileMenuIcon} /> Tasks <AccountIcon className={classes.profileMenuIcon} /> Tasks
@ -317,7 +311,7 @@ export default function Header(props) {
<MenuItem <MenuItem
className={classNames( className={classNames(
classes.profileMenuItem, classes.profileMenuItem,
classes.headerMenuItem, classes.headerMenuItem
)} )}
> >
<AccountIcon className={classes.profileMenuIcon} /> Messages <AccountIcon className={classes.profileMenuIcon} /> Messages

53
src/components/Sidebar/Sidebar.js
View File

@ -9,7 +9,7 @@ import {
QuestionAnswer as SupportIcon, QuestionAnswer as SupportIcon,
LibraryBooks as LibraryIcon, LibraryBooks as LibraryIcon,
HelpOutline as FAQIcon, HelpOutline as FAQIcon,
ArrowBack as ArrowBackIcon, ArrowBack as ArrowBackIcon
} from "@material-ui/icons"; } from "@material-ui/icons";
import { useTheme } from "@material-ui/styles"; import { useTheme } from "@material-ui/styles";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
@ -26,7 +26,7 @@ import Dot from "./components/Dot";
import { import {
useLayoutState, useLayoutState,
useLayoutDispatch, useLayoutDispatch,
toggleSidebar, toggleSidebar
} from "../../context/LayoutContext"; } from "../../context/LayoutContext";
const structure = [ const structure = [
@ -35,14 +35,14 @@ const structure = [
id: 1, id: 1,
label: "Typography", label: "Typography",
link: "/app/typography", link: "/app/typography",
icon: <TypographyIcon />, icon: <TypographyIcon />
}, },
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> }, { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
{ {
id: 3, id: 3,
label: "Notifications", label: "Notifications",
link: "/app/notifications", link: "/app/notifications",
icon: <NotificationsIcon />, icon: <NotificationsIcon />
}, },
{ {
id: 4, id: 4,
@ -52,34 +52,49 @@ const structure = [
children: [ children: [
{ label: "Icons", link: "/app/ui/icons" }, { label: "Icons", link: "/app/ui/icons" },
{ label: "Charts", link: "/app/ui/charts" }, { label: "Charts", link: "/app/ui/charts" },
{ label: "Maps", link: "/app/ui/maps" }, { label: "Maps", link: "/app/ui/maps" }
], ]
}, },
{ id: 5, type: "divider" }, { id: 5, type: "divider" },
{ id: 6, type: "title", label: "HELP" }, { id: 6, type: "title", label: "HELP" },
{ id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> }, {
{ id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> }, id: 7,
{ id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> }, label: "Library",
link: "https://flatlogic.com/templates",
icon: <LibraryIcon />
},
{
id: 8,
label: "Support",
link: "https://flatlogic.com/forum",
icon: <SupportIcon />
},
{
id: 9,
label: "FAQ",
link: "https://flatlogic.com/forum",
icon: <FAQIcon />
},
{ id: 10, type: "divider" }, { id: 10, type: "divider" },
{ id: 11, type: "title", label: "PROJECTS" }, { id: 11, type: "title", label: "PROJECTS" },
{ {
id: 12, id: 12,
label: "My recent", label: "My recent",
link: "", link: "",
icon: <Dot size="small" color="warning" />, icon: <Dot size="small" color="warning" />
}, },
{ {
id: 13, id: 13,
label: "Starred", label: "Starred",
link: "", link: "",
icon: <Dot size="small" color="primary" />, icon: <Dot size="small" color="primary" />
}, },
{ {
id: 14, id: 14,
label: "Background", label: "Background",
link: "", link: "",
icon: <Dot size="small" color="secondary" />, icon: <Dot size="small" color="secondary" />
}, }
]; ];
function Sidebar({ location }) { function Sidebar({ location }) {
@ -93,7 +108,7 @@ function Sidebar({ location }) {
// local // local
var [isPermanent, setPermanent] = useState(true); var [isPermanent, setPermanent] = useState(true);
useEffect(function() { useEffect(function () {
window.addEventListener("resize", handleWindowWidthChange); window.addEventListener("resize", handleWindowWidthChange);
handleWindowWidthChange(); handleWindowWidthChange();
return function cleanup() { return function cleanup() {
@ -106,13 +121,13 @@ function Sidebar({ location }) {
variant={isPermanent ? "permanent" : "temporary"} variant={isPermanent ? "permanent" : "temporary"}
className={classNames(classes.drawer, { className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened, [classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened, [classes.drawerClose]: !isSidebarOpened
})} })}
classes={{ classes={{
paper: classNames({ paper: classNames({
[classes.drawerOpen]: isSidebarOpened, [classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened, [classes.drawerClose]: !isSidebarOpened
}), })
}} }}
open={isSidebarOpened} open={isSidebarOpened}
> >
@ -121,13 +136,13 @@ function Sidebar({ location }) {
<IconButton onClick={() => toggleSidebar(layoutDispatch)}> <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
<ArrowBackIcon <ArrowBackIcon
classes={{ classes={{
root: classNames(classes.headerIcon, classes.headerIconCollapse), root: classNames(classes.headerIcon, classes.headerIconCollapse)
}} }}
/> />
</IconButton> </IconButton>
</div> </div>
<List className={classes.sidebarList}> <List className={classes.sidebarList}>
{structure.map(link => ( {structure.map((link) => (
<SidebarLink <SidebarLink
key={link.id} key={link.id}
location={location} location={location}

168
src/components/Sidebar/SidebarView.js
View File

@ -1,9 +1,5 @@
import React from 'react'; import React from "react";
import { import { Drawer, IconButton, List, withStyles } from "@material-ui/core";
Drawer,
IconButton,
List,
withStyles } from "@material-ui/core";
import { import {
Home as HomeIcon, Home as HomeIcon,
NotificationsNone as NotificationsIcon, NotificationsNone as NotificationsIcon,
@ -13,126 +9,182 @@ import {
QuestionAnswer as SupportIcon, QuestionAnswer as SupportIcon,
LibraryBooks as LibraryIcon, LibraryBooks as LibraryIcon,
HelpOutline as FAQIcon, HelpOutline as FAQIcon,
ArrowBack as ArrowBackIcon, ArrowBack as ArrowBackIcon
} from "@material-ui/icons"; } from "@material-ui/icons";
import classNames from 'classnames'; import classNames from "classnames";
import SidebarLink from './components/SidebarLink/SidebarLinkContainer'; import SidebarLink from "./components/SidebarLink/SidebarLinkContainer";
import Dot from './components/Dot'; import Dot from "./components/Dot";
const structure = [ const structure = [
{ id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> }, { id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
{ id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> }, {
{ id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> }, id: 1,
{ id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />}, label: "Typography",
link: "/app/typography",
icon: <TypographyIcon />
},
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
{
id: 3,
label: "Notifications",
link: "/app/notifications",
icon: <NotificationsIcon />
},
{ {
id: 4, id: 4,
label: 'UI Elements', label: "UI Elements",
link: '/app/ui', link: "/app/ui",
icon: <UIElementsIcon />, icon: <UIElementsIcon />,
children: [ children: [
{ label: 'Icons', link: '/app/ui/icons' }, { label: "Icons", link: "/app/ui/icons" },
{ label: 'Charts', link: '/app/ui/charts' }, { label: "Charts", link: "/app/ui/charts" },
{ label: 'Maps', link: '/app/ui/maps' }, { label: "Maps", link: "/app/ui/maps" }
], ]
}, },
{ id: 5, type: 'divider' }, { id: 5, type: "divider" },
{ id: 6, type: 'title', label: 'HELP' }, { id: 6, type: "title", label: "HELP" },
{ id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> }, {
{ id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> }, id: 7,
{ id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />}, label: "Library",
{ id: 10, type: 'divider' }, link: "https://flatlogic.com/templates",
{ id: 11, type: 'title', label: 'PROJECTS' }, icon: <LibraryIcon />
{ id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> }, },
{ id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> }, {
{ id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> }, id: 8,
label: "Support",
link: "https://flatlogic.com/forum/",
icon: <SupportIcon />
},
{
id: 9,
label: "FAQ",
link: "https://flatlogic.com/forum/",
icon: <FAQIcon />
},
{ id: 10, type: "divider" },
{ id: 11, type: "title", label: "PROJECTS" },
{
id: 12,
label: "My recent",
link: "",
icon: <Dot size="small" color="secondary" />
},
{
id: 13,
label: "Starred",
link: "",
icon: <Dot size="small" color="primary" />
},
{
id: 14,
label: "Background",
link: "",
icon: <Dot size="small" color="secondary" />
}
]; ];
const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => { const SidebarView = ({
classes,
theme,
toggleSidebar,
isSidebarOpened,
isPermanent,
location
}) => {
return ( return (
<Drawer <Drawer
variant={isPermanent ? 'permanent' : 'temporary'} variant={isPermanent ? "permanent" : "temporary"}
className={classNames(classes.drawer, { className={classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened, [classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened, [classes.drawerClose]: !isSidebarOpened
})} })}
classes={{ classes={{
paper: classNames(classes.drawer, { paper: classNames(classes.drawer, {
[classes.drawerOpen]: isSidebarOpened, [classes.drawerOpen]: isSidebarOpened,
[classes.drawerClose]: !isSidebarOpened, [classes.drawerClose]: !isSidebarOpened
}), })
}} }}
open={isSidebarOpened} open={isSidebarOpened}
> >
<div className={classes.mobileBackButton}> <div className={classes.mobileBackButton}>
<IconButton <IconButton onClick={toggleSidebar}>
onClick={toggleSidebar} <ArrowBackIcon
> classes={{
<ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} /> root: classNames(classes.headerIcon, classes.headerIconCollapse)
}}
/>
</IconButton> </IconButton>
</div> </div>
<List className={classes.sidebarList}> <List className={classes.sidebarList}>
{structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)} {structure.map((link) => (
<SidebarLink
key={link.id}
location={location}
isSidebarOpened={isSidebarOpened}
{...link}
/>
))}
</List> </List>
</Drawer> </Drawer>
); );
} };
const drawerWidth = 240; const drawerWidth = 240;
const styles = theme => ({ const styles = (theme) => ({
menuButton: { menuButton: {
marginLeft: 12, marginLeft: 12,
marginRight: 36, marginRight: 36
}, },
hide: { hide: {
display: 'none', display: "none"
}, },
drawer: { drawer: {
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 0,
whiteSpace: 'nowrap', whiteSpace: "nowrap",
top: theme.spacing.unit * 8, top: theme.spacing.unit * 8,
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
top: 0, top: 0
} }
}, },
drawerOpen: { drawerOpen: {
width: drawerWidth, width: drawerWidth,
transition: theme.transitions.create('width', { transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen
}), })
}, },
drawerClose: { drawerClose: {
transition: theme.transitions.create('width', { transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen
}), }),
overflowX: 'hidden', overflowX: "hidden",
width: theme.spacing.unit * 7 + 40, width: theme.spacing.unit * 7 + 40,
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
width: drawerWidth, width: drawerWidth
} }
}, },
toolbar: { toolbar: {
...theme.mixins.toolbar, ...theme.mixins.toolbar,
[theme.breakpoints.down("sm")]: { [theme.breakpoints.down("sm")]: {
display: 'none', display: "none"
} }
}, },
content: { content: {
flexGrow: 1, flexGrow: 1,
padding: theme.spacing.unit * 3, padding: theme.spacing.unit * 3
}, },
mobileBackButton: { mobileBackButton: {
marginTop: theme.spacing.unit * .5, marginTop: theme.spacing.unit * 0.5,
marginLeft: theme.spacing.unit * 3, marginLeft: theme.spacing.unit * 3,
[theme.breakpoints.only("sm")]: { [theme.breakpoints.only("sm")]: {
marginTop: theme.spacing.unit * .625, marginTop: theme.spacing.unit * 0.625
}, },
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
display: 'none', display: "none"
} }
} }
}); });