Skip to content

Commit 9e6457f

Browse files
JinSSJ3JinSSJ3
committed
[WIP][FEAT]: Add server side, download and readers page
1 parent 02693cb commit 9e6457f

File tree

12 files changed

+308
-90
lines changed

12 files changed

+308
-90
lines changed

‎src/components/MainMenu/MainMenuSideBar.tsx‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
1010
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
1111
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
1212

13+
import ExpandLess from "@mui/icons-material/ExpandLess";
14+
import ExpandMore from "@mui/icons-material/ExpandMore";
15+
1316
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
1417
const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
1518
const navigate = useNavigateToTop();
@@ -64,7 +67,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
6467
index: 26,
6568
onClick: () => navigate("/components/fullscreen"),
6669
},
67-
6870
],
6971
},
7072
{
@@ -126,43 +128,31 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
126128
index: 5,
127129
onClick: () => navigate("/localization"),
128130
},
131+
/* {
132+
label: "Code Generator",
133+
index: 7,
134+
onClick: () => navigate("/code-generator"),
135+
}, */
136+
{
137+
label: "Types",
138+
index: 7,
139+
onClick: () => navigate("/types"),
140+
},
129141
{
130142
label: "Server side",
131143
index: 6,
132144
onClick: () => navigate("/server-side"),
133145
},
134146
{
135-
label: "Code Generator",
136-
index: 7,
137-
onClick: () => navigate("/code-generator"),
138-
},
139-
{
140-
label: "Types",
147+
label: "File readers",
141148
index: 8,
142-
onClick: () => navigate("/types"),
149+
onClick: () => navigate("/file-reader"),
143150
},
151+
144152
{
145-
label: "Utilities Methods",
153+
label: "File download",
146154
index: 9,
147-
subMenu: [
148-
{
149-
label: "File readers",
150-
index: 81,
151-
onClick: () => navigate("/utilities-methods/file-reader"),
152-
},
153-
154-
{
155-
label: "File uploader",
156-
index: 82,
157-
onClick: () => navigate("/utilities-methods/file-uploader"),
158-
},
159-
160-
{
161-
label: "File download",
162-
index: 83,
163-
onClick: () => navigate("/utilities-methods/file-downloader"),
164-
},
165-
],
155+
onClick: () => navigate("/file-download"),
166156
},
167157
];
168158

@@ -175,6 +165,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
175165
})
176166
);
177167

168+
178169
/* const handleClick = () => {
179170
//setOpen(!open);
180171
}; */
@@ -195,11 +186,24 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
195186
withSubMenu?: boolean
196187
) => {
197188
//setSelectedIndex(index);
189+
console.log("newIndex",index, withSubMenu);
198190
if (!withSubMenu) {
199191
onClick?.();
200192
} else {
201193
setRegularItemsIni((arr) =>
202194
arr.map((item) => {
195+
/* if (item.subMenu) {
196+
const newSubMenu = item.subMenu.map((x) => {
197+
if (x.index === index) {
198+
return { ...x , };
199+
} else {
200+
return { ...x };
201+
}
202+
});
203+
return { ...item, subMenu: newSubMenu };
204+
} else */
205+
206+
203207
if (item.index === index) {
204208
return { ...item, isOpen: !item.isOpen };
205209
}
@@ -300,7 +304,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
300304
style={{ padding: "2px 20px" }}
301305
key={indexBase}
302306
// selected={subMenu === undefined && selectedIndex === index}
303-
selected={isOpen && selectedIndex === index}
307+
selected={
308+
(subMenu === undefined || isOpen) && selectedIndex === index
309+
}
304310
onClick={(event) =>
305311
handleListItemClick(
306312
event,
@@ -321,6 +327,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
321327
primary={label || ""}
322328
primaryTypographyProps={{ fontWeight: "600" }}
323329
/>
330+
{subMenu && <>{isOpen ? <ExpandLess /> : <ExpandMore />}</>}
324331
</ListItemButton>
325332

326333
{subMenu && (
@@ -336,6 +343,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
336343
<ListItemButton
337344
style={{ paddingTop: 0 }}
338345
sx={{ pl: 4 }}
346+
//selected={selectedIndex === index}
339347
selected={selectedIndex === index}
340348
key={index2 + indexBase}
341349
onClick={(event) =>

‎src/components/layout-pages/FooterPage.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.fui-page-footer-container {
2+
display: flex;
3+
width: 100%;
4+
align-items: center;
5+
justify-content: space-between;
6+
.redirect-container {
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
}
11+
.like-icon-container {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
17+
@media (max-width: "960px") {
18+
.redirect-container {
19+
display: none;
20+
}
21+
.redirect-small-container {
22+
display: flex;
23+
}
24+
.like-icon-container {
25+
width: 100%;
26+
}
27+
}
28+
}

‎src/components/layout-pages/FooterPage.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Button, Divider } from "@mui/material";
2+
import * as React from "react";
3+
import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
4+
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
5+
import { useNavigate } from "react-router";
6+
import "./FooterPage.scss";
7+
8+
interface FooterPageProps {
9+
labelBefore?: string;
10+
labelAfter?: string;
11+
linkBefore?: string;
12+
linkAfter?: string;
13+
page: string;
14+
}
15+
const FooterPage: React.FC<FooterPageProps> = (props: FooterPageProps) => {
16+
const { labelAfter, labelBefore, linkAfter, linkBefore, page } = props;
17+
const redirect = useNavigate();
18+
return (
19+
<footer>
20+
<Divider style={{ width: "100%" }}></Divider>
21+
<div className="fui-page-footer-container">
22+
<div className="redirect-small-container">
23+
{labelBefore && (
24+
<Button
25+
startIcon={<KeyboardArrowLeftIcon />}
26+
onClick={linkBefore ? () => redirect(linkBefore) : undefined}
27+
>
28+
{labelBefore}
29+
</Button>
30+
)}
31+
{labelAfter && (
32+
<Button
33+
endIcon={<KeyboardArrowRightIcon />}
34+
onClick={labelAfter ? () => redirect(labelAfter) : undefined}
35+
>
36+
{labelAfter}
37+
</Button>
38+
)}
39+
</div>
40+
41+
<div className="redirect-container">
42+
{labelBefore && (
43+
<Button
44+
startIcon={<KeyboardArrowLeftIcon />}
45+
onClick={linkBefore ? () => redirect(linkBefore) : undefined}
46+
>
47+
{labelBefore}
48+
</Button>
49+
)}
50+
</div>
51+
52+
<div className="like-icon-container">like icons</div>
53+
<div className="redirect-container">
54+
{labelAfter && (
55+
<Button
56+
endIcon={<KeyboardArrowRightIcon />}
57+
onClick={linkAfter ? () => redirect(linkAfter) : undefined}
58+
>
59+
{labelAfter}
60+
</Button>
61+
)}
62+
</div>
63+
</div>
64+
</footer>
65+
);
66+
};
67+
export default FooterPage;

‎src/components/layout-pages/MainContentContainer.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const MainContentContainer = ({ children }) => {
2222
}}
2323
>
2424
{children}
25+
2526
</Box>
2627
</Box>
2728
);

‎src/pages/download-page/FileDownloadPage.jsx‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,42 @@
11
import * as React from "react";
2+
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
3+
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
4+
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
5+
import MainTitle from "../../components/main-title/MainTitle";
6+
import MainParagraph from "../../components/paragraph-main/MainParagraph";
7+
import RightMenu from "../../components/RightMenu/RightMenu";
28

3-
const FileDownloadPage = props =>{
4-
return(
5-
<div>
6-
FileDownloadPage
7-
</div>
8-
)
9-
}
10-
export default FileDownloadPage;
9+
const FileDownloadPage = (props) => {
10+
return (
11+
<React.Fragment>
12+
<MainLayoutPage selectedIndex={9}>
13+
<MainContentContainer>
14+
<MainTitle>File Download</MainTitle>
15+
<MainParagraph>
16+
API reference docs for all the important types related to files UI
17+
components.
18+
</MainParagraph>
19+
</MainContentContainer>
20+
</MainLayoutPage>
21+
22+
<RightMenuContainer>
23+
<RightMenu width="240px" items={rightMenuItems} />
24+
</RightMenuContainer>
25+
</React.Fragment>
26+
);
27+
};
28+
export default FileDownloadPage;
29+
30+
const rightMenuItems = [
31+
{
32+
id: 0,
33+
label: "From Same host",
34+
referTo: "/types#extfile",
35+
},
36+
{
37+
id: 1,
38+
label: "From Another host",
39+
referTo: "/types#validatefileresponse",
40+
},
41+
42+
];

‎src/pages/server-side/ServerSidePage.jsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/pages/server-side/ServerSidePage.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import * as React from "react";
2+
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
3+
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
4+
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
5+
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
6+
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
7+
import MainTitle from "../../components/main-title/MainTitle";
8+
import MainParagraph from "../../components/paragraph-main/MainParagraph";
9+
import RightMenu from "../../components/RightMenu/RightMenu";
10+
import AnchorToTab from "../../components/util-components/AnchorToTab";
11+
12+
const ServerSidePage = () => {
13+
return (
14+
<React.Fragment>
15+
<MainLayoutPage selectedIndex={6}>
16+
<MainContentContainer>
17+
<MainTitle>Server Side implementations</MainTitle>
18+
<MainParagraph>
19+
Some implementations for handling correctly the uploaded files using
20+
Files UI.
21+
</MainParagraph>
22+
<DescParagraph>
23+
If you think there should be added more of them or you want to add
24+
your own in any other programming language, please contact us.
25+
</DescParagraph>
26+
<section id="expressjs">
27+
<SubTitle content="Express JS" />
28+
<DescParagraph>
29+
The following code is just the main part of a project. Check it up
30+
in the following{" "}
31+
<AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/expressjs">
32+
here
33+
</AnchorToTab>
34+
.
35+
</DescParagraph>
36+
</section>
37+
<section id="springboot">
38+
<SubTitle content="Java - Spring boot" />{" "}
39+
<DescParagraph>
40+
The following code is just the main part of a project. Check it up
41+
in the following{" "}
42+
<AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/springboot">
43+
here
44+
</AnchorToTab>
45+
.
46+
</DescParagraph>
47+
</section>
48+
</MainContentContainer>
49+
<RightMenuContainer>
50+
<RightMenu width="240px" items={rightMenuItems} />
51+
</RightMenuContainer>
52+
</MainLayoutPage>
53+
</React.Fragment>
54+
);
55+
};
56+
export default ServerSidePage;
57+
58+
const rightMenuItems = [
59+
{
60+
id: 0,
61+
label: "ExpressJS",
62+
referTo: "/server-side#expressjs",
63+
},
64+
{
65+
id: 1,
66+
label: "Spring Boot (Java)",
67+
referTo: "/server-side#springboot",
68+
},
69+
];

‎src/pages/types-page/TypesPage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const rightMenuItems = [
7070
const TypesPage = (props) => {
7171
return (
7272
<React.Fragment>
73-
<MainLayoutPage selectedIndex={6}>
73+
<MainLayoutPage selectedIndex={7}>
7474
<MainContentContainer>
7575
<MainTitle>Types</MainTitle>
7676
<MainParagraph>

0 commit comments

Comments
 (0)