Skip to content

Commit 24bb056

Browse files
azat-ismagilovazat-ismagilov
committed
Use MUI components instead of custom css styles
1 parent 066257a commit 24bb056

18 files changed

+311
-395
lines changed

‎src/App.jsx

+21-10
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,35 @@
1+
import { Box, Container, Grid, Stack } from "@mui/material";
2+
import CssBaseline from "@mui/material/CssBaseline";
3+
import { ThemeProvider } from "@mui/material/styles";
4+
15
import { useAppContext } from "./components/AppContext";
26
import Body from "./components/Body/Body";
37
import Header from "./components/Header/Header";
4-
import MobileYearWrapper from "./components/Header/MobileYearWrapper";
5-
import Logo from "./components/Logo";
8+
import { DesktopLogo } from "./components/Logo";
69
import Sidebar from "./components/Sidebar";
10+
import theme from "./theme";
711

812
import "./styles/App.css";
913

1014

1115
function App() {
12-
const { desktop, mobile } = useAppContext();
16+
const { desktop } = useAppContext();
1317

1418
return (
15-
<div className="content-layout">
16-
<Logo />
17-
<Header />
18-
{desktop && <Sidebar />}
19-
{mobile && <MobileYearWrapper />}
20-
<Body />
21-
</div>
19+
<ThemeProvider theme={theme}>
20+
<CssBaseline />
21+
<Grid container columns={10} height="100vh" p={2} pb={0} spacing={1}>
22+
{desktop &&
23+
<Grid item xs={2} display="flex" flexDirection="column" justifyContent="space-between">
24+
<DesktopLogo />
25+
<Sidebar />
26+
</Grid>}
27+
<Grid item xs display="flex" flexDirection="column" justifyContent="space-between">
28+
<Header />
29+
<Body />
30+
</Grid>
31+
</Grid>
32+
</ThemeProvider>
2233
);
2334
}
2435

‎src/components/Body/Body.jsx

+17-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useRef, useState } from "react";
22
import InfiniteScroll from "react-infinite-scroller";
3+
import { Box,Typography } from "@mui/material";
34

45
import "../../consts";
56

@@ -10,7 +11,6 @@ import MyModal from "./MyModal";
1011
import PhotoGridByYear from "./PhotoGridByYear";
1112

1213
import "../../styles/Body.css";
13-
import "../../styles/App.css";
1414

1515
const Body = () => {
1616
const { data, setFullscreenPhotoId, setIsSlideShow, desktop } = useAppContext();
@@ -96,25 +96,22 @@ const Body = () => {
9696
return (
9797
<div className="body" ref={scrollRef}>
9898
{desktop && data.text && <h1 style={{ width: "100%" }}>{data.text}</h1>}
99-
<div >
100-
<InfiniteScroll
101-
style={{ paddingBottom: "10px", width: "100%" }}
102-
loadMore={loadMorePhotos}
103-
hasMore={hasMorePhotos()}
104-
initialLoad={true}
105-
loader={<div className="photo-list-message" key={0}>Loading ...</div>}
106-
useWindow={false}
107-
getScrollParent={() => scrollRef.current}
108-
>
109-
{Array.from(photosByEvent).map(([event, photos]) =>
110-
<div key={event}>
111-
{event && <h1 className="event-title">{event}</h1>}
112-
<PhotoGridByYear photos={photos} handleClick={handleClick} />
113-
</div>
114-
)}
115-
</InfiniteScroll>
116-
</div>
117-
{!hasMorePhotos() && photosList.length === 0 && <div className="photo-list-message">No photo</div>}
99+
<InfiniteScroll
100+
loadMore={loadMorePhotos}
101+
hasMore={hasMorePhotos()}
102+
initialLoad={true}
103+
loader={<Typography variant="h1" key={0}>Loading ...</Typography>}
104+
useWindow={false}
105+
getScrollParent={() => scrollRef.current}
106+
>
107+
{Array.from(photosByEvent).map(([event, photos]) =>
108+
<Box key={event}>
109+
{event && <Typography variant="h1">{event}</Typography>}
110+
<PhotoGridByYear photos={photos} handleClick={handleClick} />
111+
</Box>
112+
)}
113+
</InfiniteScroll>
114+
{!hasMorePhotos() && photosList.length === 0 && <Typography variant="h1">No photo</Typography>}
118115
{fullscreenPhoto != null && <MyModal photo={fullscreenPhoto}
119116
handleRotationRight={handleRotationRight}
120117
handleRotationLeft={handleRotationLeft}

‎src/components/Body/FaceDiv.jsx

+13-28
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useEffect, useState } from "react";
21
import styled from "styled-components";
32

43
import "../../styles/theme-variables.css";
4+
import "../../styles/FaceDiv.css";
55

66
const Rectangle = styled.fieldset`
77
top: ${props => props.top * 100 + "%"};
@@ -17,35 +17,20 @@ const Rectangle = styled.fieldset`
1717

1818

1919
const FaceDiv = ({ person, face, setFace }) => {
20-
const [hidden, setHidden] = useState(true);
21-
22-
23-
const FaceWrapper = styled.div`
24-
opacity: ${hidden ? "0" : "1"};
25-
`;
26-
27-
useEffect(() => {
28-
if (face === person) {
29-
setHidden(false);
30-
} else {
31-
setHidden(true);
32-
}
33-
},
34-
[face, person]
35-
);
20+
const hidden = face !== person;
3621

3722
return (
38-
<FaceWrapper>
39-
<Rectangle
40-
top={person?.position?.top}
41-
bottom={person?.position?.bottom}
42-
left={person?.position?.left}
43-
right={person?.position?.right}
44-
onMouseLeave={() => setFace(null)} onMouseEnter={() => setFace(person)}
45-
>
46-
<legend style={{ transform: "rotatex(180deg)" }}>{person.name}</legend>
47-
</Rectangle>
48-
</FaceWrapper>
23+
<Rectangle
24+
top={person?.position?.top}
25+
bottom={person?.position?.bottom}
26+
left={person?.position?.left}
27+
right={person?.position?.right}
28+
className={hidden ? "hidden" : ""}
29+
onMouseLeave={() => setFace(null)}
30+
onMouseEnter={() => setFace(person)}
31+
>
32+
<legend style={{ transform: "rotatex(180deg)" }}>{person.name}</legend>
33+
</Rectangle>
4934
);
5035
};
5136

‎src/components/Header/Filters.jsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { useEffect, useState } from "react";
2+
import { Stack } from "@mui/material";
3+
4+
import { places, years } from "../../consts";
5+
import calendarIcon from "../../images/calender.svg";
6+
import eventIcon from "../../images/event.svg";
7+
import personIcon from "../../images/person.svg";
8+
import teamIcon from "../../images/team.svg";
9+
import { getEventData, getPeopleData, getTeamData } from "../../Util/DataLoader";
10+
import { useAppContext } from "../AppContext";
11+
12+
import Search from "./Search";
13+
import Selector from "./Selector";
14+
15+
const Filters = () => {
16+
const { data, setYear, setEvent, setPerson, setTeam, setIsOpenMenu, desktop } = useAppContext();
17+
18+
const [events, setEvents] = useState([]);
19+
const [people, setPeople] = useState([]);
20+
const [teams, setTeams] = useState([]);
21+
22+
useEffect(() => {
23+
async function fetchData() {
24+
setEvents(await getEventData(data.year));
25+
setPeople(await getPeopleData(data.year));
26+
setTeams(await getTeamData(data.year));
27+
}
28+
fetchData();
29+
}, [data.year]);
30+
31+
function formatOptions(a) {
32+
return a.map(x => {
33+
return { label: x };
34+
});
35+
}
36+
37+
function formatYearOption(a) {
38+
return a.map(x => {
39+
return { year: x, label: x + " " + places[x] };
40+
});
41+
}
42+
43+
function selectItem(item, func) {
44+
if (item === "clear") {
45+
setYear(data.year);
46+
} else {
47+
func(item.label);
48+
}
49+
}
50+
return (
51+
<Stack direction={desktop ? "row" : "column"} spacing={desktop ? 1 : 0.5}>
52+
{!desktop &&
53+
<Selector options={formatYearOption(years)} leftIcon={calendarIcon} name={"Select year"} onChange={selectedItem => {
54+
const year = selectedItem.year;
55+
setYear(year);
56+
}} value={data.year} />}
57+
<Selector options={formatOptions(events)} name={"Select event"} leftIcon={eventIcon} onChange={selectedItem => {
58+
selectItem(selectedItem, setEvent);
59+
}} value={data.event} />
60+
<Selector options={formatOptions(teams)} name={"Select team"} leftIcon={teamIcon} onChange={selectedItem => {
61+
selectItem(selectedItem, setTeam);
62+
}} value={data.team} />
63+
<Selector options={formatOptions(people)} name={"Select person"} leftIcon={personIcon} onChange={selectedItem => {
64+
selectItem(selectedItem, setPerson);
65+
}} value={data.person} />
66+
<Search setIsOpenMenu={setIsOpenMenu} />
67+
</Stack>
68+
);
69+
};
70+
71+
export default Filters;
72+

‎src/components/Header/Header.jsx

+24-101
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,38 @@
1-
import React, { useEffect } from "react";
21
import CloseIcon from "@mui/icons-material/Close";
32
import MenuIcon from "@mui/icons-material/Menu";
3+
import { Box, Collapse, IconButton, Stack } from "@mui/material";
44

5-
import { places, years } from "../../consts";
6-
import calendarIcon from "../../images/calender.svg";
7-
import eventIcon from "../../images/event.svg";
8-
import personIcon from "../../images/person.svg";
9-
import teamIcon from "../../images/team.svg";
10-
import { getEventData, getPeopleData, getTeamData } from "../../Util/DataLoader";
115
import { useAppContext } from "../AppContext";
6+
import { MobileLogo } from "../Logo";
127

13-
import Search from "./Search";
14-
import Selector from "./Selector";
8+
import Filters from "./Filters";
9+
import MobileYearWrappper from "./MobileYearWrapper";
1510

16-
import "../../styles/Header.css";
17-
import "../../styles/DropdownMenu.css";
1811

12+
const Header = () => {
13+
const { isOpenMenu, setIsOpenMenu, mobile } = useAppContext();
1914

20-
export const Header = () => {
21-
const { data, setYear, setEvent, setPerson, setTeam, isOpenMenu, setIsOpenMenu, desktop, mobile } = useAppContext();
22-
23-
const [events, setEvents] = React.useState([]);
24-
const [people, setPeople] = React.useState([]);
25-
const [teams, setTeams] = React.useState([]);
26-
27-
useEffect(() => {
28-
async function fetchData() {
29-
setEvents(await getEventData(data.year));
30-
setPeople(await getPeopleData(data.year));
31-
setTeams(await getTeamData(data.year));
32-
}
33-
fetchData();
34-
}, [data.year]);
35-
36-
function formatOptions(a) {
37-
return a.map(x => {
38-
return { label: x };
39-
});
40-
}
41-
42-
function formatYearOption(a) {
43-
return a.map(x => {
44-
return { year: x, label: x + " " + places[x] };
45-
});
46-
}
47-
48-
function selectItem(item, func) {
49-
if (item === "clear") {
50-
setYear(data.year);
51-
} else {
52-
func(item.label);
53-
}
54-
}
55-
56-
// TODO: rewrite
57-
useEffect(() => {
58-
let element = document.getElementById("header-input-wrapper");
59-
if (!element) {
60-
return;
61-
}
62-
if (isOpenMenu) {
63-
element.style.display = "flex";
64-
} else {
65-
element.style.display = "none";
66-
}
67-
}, [isOpenMenu]);
68-
69-
const changeMenu = () => {
15+
const toggleMenu = () => {
7016
setIsOpenMenu(!isOpenMenu);
7117
};
7218

73-
return <div className={"header-wrapper"}>
74-
<div className={"header"}>
75-
{!desktop &&
76-
<div className="button" onClick={changeMenu}>
77-
{!isOpenMenu ? <MenuIcon fontSize="large" />
78-
: <CloseIcon fontSize="large" />}
79-
</div>
19+
return (
20+
<Stack sx={{ flexGrow: 1 }} justifyContent="center">
21+
{mobile &&
22+
<Stack direction="row" justifyContent="space-between" alignItems="center">
23+
<MobileLogo />
24+
<IconButton onClick={toggleMenu}>
25+
{!isOpenMenu ? <MenuIcon fontSize="large" />
26+
: <CloseIcon fontSize="large" />}
27+
</IconButton>
28+
</Stack>
8029
}
81-
<div className={"header-input-wrapper"} id={"header-input-wrapper"}>
82-
{!desktop && <Selector options={formatYearOption(years)}
83-
name={"Select year"}
84-
leftIcon={calendarIcon}
85-
func={selectedItem => {
86-
const year = selectedItem.year;
87-
setYear(year);
88-
}}
89-
value={data.year} />}
90-
<Selector options={formatOptions(events)}
91-
name={"Select event"}
92-
leftIcon={eventIcon}
93-
func={selectedItem => {
94-
selectItem(selectedItem, setEvent);
95-
}}
96-
value={data.event} />
97-
<Selector options={formatOptions(teams)}
98-
name={"Select team"}
99-
leftIcon={teamIcon}
100-
func={selectedItem => {
101-
selectItem(selectedItem, setTeam);
102-
}} value={data.team} />
103-
<Selector options={formatOptions(people)}
104-
name={"Select person"}
105-
leftIcon={personIcon}
106-
func={selectedItem => {
107-
selectItem(selectedItem, setPerson);
108-
}}
109-
value={data.person} />
110-
<Search setIsOpenMenu={setIsOpenMenu} />
111-
</div>
112-
</div>
113-
</div>;
30+
<Collapse in={isOpenMenu} width="1">
31+
<Filters />
32+
</Collapse>
33+
{mobile && <MobileYearWrappper />}
34+
</Stack>
35+
);
11436
};
37+
11538
export default Header;

0 commit comments

Comments
 (0)