Skip to content

Commit 8855061

Browse files
zijizhuzijizhu
authored
[CMS-302] Editor and Next.js improvements (#266)
* updating blog data type * added url parameter for blogs * fixed invalid json, migrated next to ssr * improved sync and publish button style
1 parent 11d7db4 commit 8855061

File tree

13 files changed

+187
-87
lines changed

13 files changed

+187
-87
lines changed

‎backend/endpoints/volume_endpoints.go

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ func GetPublishedDocument(form ValidGetPublishedDocumentRequest, df DependencyFa
161161

162162
// TODO: Remove this if statement and modify frontend to account for changed API
163163
if strings.Contains(contentType, "text") {
164-
wrappedContent := "{Contents: " + strings.TrimSpace(buf.String()) + "}"
164+
wrappedContent := "{\"Contents\": " + strings.TrimSpace(buf.String()) + "}"
165165
buf.Reset()
166166
buf.WriteString(wrappedContent)
167167
}

‎frontend/src/cse-ui-kit/PublishDocument_button/PublishDocument-Styled.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styled from "styled-components";
2+
3+
export type buttonProps = {
4+
background?: string;
5+
};
6+
export const StyledButton = styled.div<buttonProps>`
7+
width: 175px;
8+
height: 45px;
9+
margin: 5px;
10+
background: ${(props) => props.background};
11+
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
border-radius: 10px;
16+
user-select: none;
17+
18+
&:hover {
19+
background: #efeef3;
20+
color: black;
21+
transform: scale(1.04);
22+
}
23+
&:active {
24+
background: #c8d1fa;
25+
transform: scale(0.96);
26+
}
27+
28+
cursor: pointer;
29+
`;

‎frontend/src/cse-ui-kit/PublishDocument_button/PublishDocument.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { MouseEventHandler } from "react";
2+
import { StyledButton, buttonProps } from "./PublishDocument-Styled";
3+
import { MdPublish } from "react-icons/md";
4+
5+
type Props = {
6+
onClick?: MouseEventHandler<HTMLDivElement>;
7+
} & buttonProps;
8+
9+
export default function PublishDocument({ onClick, ...styleProps }: Props) {
10+
return (
11+
<StyledButton onClick={onClick} {...styleProps}>
12+
<MdPublish />
13+
Publish Document
14+
</StyledButton>
15+
);
16+
}

‎frontend/src/cse-ui-kit/PublishDocument_button/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import PublishDocument from "./PublishDocument";
2+
3+
export default PublishDocument;

‎frontend/src/cse-ui-kit/SyncDocument_button/SyncDocument-Styled.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styled from "styled-components";
2+
3+
export type buttonProps = {
4+
background?: string;
5+
};
6+
export const StyledButton = styled.div<buttonProps>`
7+
width: 175px;
8+
height: 45px;
9+
margin: 5px;
10+
background: ${(props) => props.background};
11+
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
border-radius: 10px;
16+
user-select: none;
17+
18+
&:hover {
19+
background: #efeef3;
20+
color: black;
21+
transform: scale(1.04);
22+
}
23+
&:active {
24+
background: #c8d1fa;
25+
transform: scale(0.96);
26+
}
27+
28+
cursor: pointer;
29+
`;

‎frontend/src/cse-ui-kit/SyncDocument_button/SyncDocument.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { MouseEventHandler } from "react";
2+
import { StyledButton, buttonProps } from "./SyncDocument-Styled";
3+
import { AiOutlineSync } from "react-icons/ai";
4+
5+
type Props = {
6+
onClick?: MouseEventHandler<HTMLDivElement>;
7+
} & buttonProps;
8+
9+
export default function SyncDocument({ onClick, ...styleProps }: Props) {
10+
return (
11+
<StyledButton onClick={onClick} {...styleProps}>
12+
<AiOutlineSync />
13+
Sync Document
14+
</StyledButton>
15+
);
16+
}

‎frontend/src/cse-ui-kit/SyncDocument_button/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import SyncDocument from "./SyncDocument";
2+
3+
export default SyncDocument;

‎frontend/src/packages/dashboard/components/ConfirmationModal/ConfirmationWindow.tsx

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
import React, { useState } from 'react';
2-
import styled from 'styled-components';
3-
import { Modal, Typography, TextField, Box } from '@mui/material';
4-
import { useDispatch } from 'react-redux';
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
import { Modal, Typography, TextField, Box } from "@mui/material";
4+
import { useDispatch } from "react-redux";
55

66
// local imports
7-
import Button from '../../../../cse-ui-kit/buttons/Button';
7+
import Button from "../../../../cse-ui-kit/buttons/Button";
88
import {
99
addItemAction,
10-
AddPayloadType
11-
} from 'src/packages/dashboard/state/folders/actions';
10+
AddPayloadType,
11+
} from "src/packages/dashboard/state/folders/actions";
1212
import { getFolderState } from "../../api/helpers";
1313

1414
type Props = {
1515
open: boolean;
16-
modalState: {open: boolean, type: string};
17-
setModalState: (flag: {open: boolean, type: string}) => void;
18-
}
16+
modalState: { open: boolean; type: string };
17+
setModalState: (flag: { open: boolean; type: string }) => void;
18+
};
1919

2020
const Container = styled.div`
2121
position: absolute;
2222
top: 50%;
2323
left: 50%;
24-
transform: translate(-50%,-50%);
24+
transform: translate(-50%, -50%);
2525
2626
width: 500px;
2727
height: 200px;
@@ -35,19 +35,23 @@ const Container = styled.div`
3535
grid-gap: 20px;
3636
`;
3737

38-
export default function ConfirmationWindow({open, modalState, setModalState}: Props) {
38+
export default function ConfirmationWindow({
39+
open,
40+
modalState,
41+
setModalState,
42+
}: Props) {
3943
const dispatch = useDispatch();
40-
const [inputValue, setInputValue] = useState<string>('')
44+
const [inputValue, setInputValue] = useState<string>("");
4145
const folderState = getFolderState();
4246

4347
const handleSubmit = () => {
44-
switch(modalState.type) {
48+
switch (modalState.type) {
4549
case "folder": {
4650
const folderPayload: AddPayloadType = {
4751
name: inputValue,
4852
type: "Folder",
4953
parentId: folderState.parentFolder,
50-
}
54+
};
5155
dispatch(addItemAction(folderPayload));
5256
break;
5357
}
@@ -56,38 +60,44 @@ export default function ConfirmationWindow({open, modalState, setModalState}: Pr
5660
name: inputValue,
5761
type: "File",
5862
parentId: folderState.parentFolder,
59-
}
63+
};
6064
dispatch(addItemAction(filePayload));
6165
break;
6266
}
6367
}
6468

6569
setModalState({
6670
open: false,
67-
type:""
71+
type: "",
6872
});
69-
}
73+
};
7074

7175
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
7276
const value = e.target.value;
7377
setInputValue(value);
74-
}
78+
};
7579

7680
return (
7781
<Modal
7882
open={open}
7983
onClose={() => {
8084
setModalState({
8185
open: false,
82-
type:""
86+
type: "",
8387
});
8488
}}
8589
>
8690
<Container data-anchor="ConfirmationWindow">
8791
<Typography variant="h5">Choose your {modalState.type} name</Typography>
88-
<Box display="flex">
89-
<TextField value={inputValue} onChange={handleChange}/>
90-
<Button background="#73EEDC" onClick={handleSubmit}>submit</Button>
92+
<Box display="flex" alignItems="center">
93+
<TextField
94+
value={inputValue}
95+
onChange={handleChange}
96+
sx={{ marginRight: "10px" }}
97+
/>
98+
<Button background="#73EEDC" onClick={handleSubmit}>
99+
submit
100+
</Button>
91101
</Box>
92102
</Container>
93103
</Modal>

‎frontend/src/packages/editor/index.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import EditorBlock from "./components/EditorBlock";
88
import { BlockData, UpdateHandler } from "./types";
99
import CreateContentBlock from "src/cse-ui-kit/CreateContentBlock_button";
1010
import CreateHeadingBlock from "src/cse-ui-kit/CreateHeadingBlock_button";
11+
import SyncDocument from "src/cse-ui-kit/SyncDocument_button";
12+
import PublishDocument from "src/cse-ui-kit/PublishDocument_button";
1113
import EditorHeader from "src/deprecated/components/Editor/EditorHeader";
1214
import { addContentBlock } from "./state/actions";
1315
import { useParams } from "react-router-dom";
@@ -125,17 +127,15 @@ const EditorPage: FC = () => {
125127
);
126128
}}
127129
/>
128-
<button
130+
<SyncDocument
129131
onClick={() => {
130132
if (wsClient.current?.socket.readyState === WebSocket.OPEN) {
131133
console.log(JSON.stringify(blocks));
132134
wsClient.current?.pushDocumentData(JSON.stringify(blocks));
133135
}
134136
}}
135-
>
136-
Sync Document
137-
</button>
138-
<button
137+
/>
138+
<PublishDocument
139139
onClick={() => {
140140
fetch("/api/filesystem/publish-document", {
141141
method: "POST",
@@ -147,9 +147,7 @@ const EditorPage: FC = () => {
147147
}),
148148
});
149149
}}
150-
>
151-
Publish Content
152-
</button>
150+
/>
153151
</InsertContentWrapper>
154152
</Container>
155153
</div>

‎next/src/components/blog/Blog.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ParagraphBlock,
88
BlogContainer,
99
} from "./Blog-styled";
10-
import type { Element } from "./types";
10+
import type { Element, Block } from "./types";
1111

1212
const Block = ({ element }: { element: Element }) => {
1313
if (element.type === "image") {
@@ -34,10 +34,10 @@ const Block = ({ element }: { element: Element }) => {
3434
);
3535
};
3636

37-
const Blog = ({ elements }: { elements: Element[][] }) => {
37+
const Blog = ({ blocks }: { blocks: Block[] }) => {
3838
return (
3939
<BlogContainer>
40-
{elements.flat().map((element, idx) => (
40+
{blocks.flat().map((element, idx) => (
4141
<Block key={idx} element={element} />
4242
))}
4343
</BlogContainer>

‎next/src/components/blog/types.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
export interface Document {
22
document_name: string;
33
document_id: string;
4-
content: Element[];
4+
content: Block[];
55
}
66

7+
export type Block = Element[];
8+
79
export type Element = Paragraph | Image;
810

911
interface Paragraph {

‎next/src/pages/blog/[bid].tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type { NextPage, GetServerSideProps } from "next";
2+
import Blog from "../../components/blog/Blog";
3+
import Link from "next/link";
4+
import type { Block } from "../../components/blog/types";
5+
import styled from "styled-components";
6+
7+
const PageContainer = styled.div`
8+
display: flex;
9+
min-height: 100vh;
10+
flex-direction: column;
11+
`;
12+
13+
const MainContainer = styled.div`
14+
flex: 1;
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: center;
18+
align-items: center;
19+
`;
20+
21+
const BlogPage: NextPage<{ data: Block[] }> = ({ data }) => {
22+
return (
23+
<PageContainer>
24+
<MainContainer>
25+
<h1>blog1</h1>
26+
<Blog blocks={data} />
27+
<Link href="/">home</Link>
28+
</MainContainer>
29+
</PageContainer>
30+
);
31+
};
32+
33+
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
34+
const data = await fetch(
35+
`http://backend:8080/api/filesystem/get/published?DocumentID=${
36+
params && params.bid
37+
}`,
38+
{
39+
method: "GET",
40+
}
41+
).then((res) => res.text());
42+
return { props: { data: JSON.parse(data).Contents } };
43+
};
44+
45+
export default BlogPage;

0 commit comments

Comments
 (0)