@@ -136,7 +139,7 @@ export default function Editor({
ignoreHistoryMergeTagChange
ignoreSelectionChange
/>
-
+
diff --git a/frontend/src/components/blog/Post.tsx b/frontend/src/components/blog/Post.tsx
index 0a9f6e5..f5fc10c 100644
--- a/frontend/src/components/blog/Post.tsx
+++ b/frontend/src/components/blog/Post.tsx
@@ -1,19 +1,26 @@
-import { useEffect, useState } from "react";
+import { EditOutlined, EyeOutlined, SaveOutlined } from "@ant-design/icons";
+import { Button } from "antd";
+import React from "react";
+import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
+import { styled } from "styled-components";
+import { FlexRow } from "../../common";
+import Editor from "../../common/editor/editor";
import { setNeuron, thunkGetNeuron } from "../../redux/neuronSlice";
import { RootState, useAppDispatch } from "../../redux/store";
-import { useSelector } from "react-redux";
-import Editor from "../../common/editor/editor";
-import { styled } from "styled-components";
const Post = () => {
- const [item, setItem] = useState
()
- const { id } = useParams();
- const dispatch = useAppDispatch();
+ const [initial, setInitial] = React.useState()
+ const [item, setItem] = React.useState()
+ const [editMode, setEditMode] = React.useState(false)
+ const [pristine, setPristine] = React.useState(true);
const { selected } = useSelector((v: RootState) => v.neuron);
const { loading } = useSelector((v: RootState) => v.main);
- useEffect(() => {
+ const { id } = useParams();
+ const dispatch = useAppDispatch();
+
+ React.useEffect(() => {
if (id) {
setItem(undefined)
dispatch(thunkGetNeuron(id))
@@ -23,24 +30,57 @@ const Post = () => {
})
}, [id]);
- useEffect(() => {
+ React.useEffect(() => {
if (selected) {
+ setInitial(selected)
setItem(selected)
}
}, [selected])
+ const saveNeuron = () => {
+ // onSave(item);
+ setPristine(true);
+ setInitial(item)
+ }
+
+ const onView = () => {
+ setEditMode(false)
+ }
+
+ const onEdit = () => {
+ setEditMode(true)
+ }
+
if (loading) {
- return <>Loading...>
+ return Loading...
}
return (
-
- {item?.title}
+
+
+ {item?.title}
+ {editMode ?
+
+ } disabled={pristine} danger type="text" onClick={saveNeuron} />
+ } type="link" onClick={onView} />
+
+ :
+ } type="link" onClick={onEdit} />
+ }
+
<$Wrapper>
{
+ if (value === initial?.title) {
+ setPristine(true)
+ } else {
+ setPristine(false)
+ }
+ setItem({ ...item, detail: value } as Neuron)
+ }}
/>
$Wrapper>
@@ -49,13 +89,14 @@ const Post = () => {
export default Post;
-const Container = styled.div`
+export const Container = styled.div<{ editMode?: boolean; }>`
+ width: 100%;
padding: 20px 80px 60px;
.editor-container {
- border: none;
+ border: ${props => props.editMode ? "1px solid #dde" : "none"};
}
.editor-input {
- padding: 0;
+ padding: ${props => props.editMode ? "10px" : 0};
}
@media (max-width: 600px) {
padding: 0 5px;
@@ -64,10 +105,14 @@ const Container = styled.div`
const StyledTitle = styled.h1`
font-size: 30px;
+ max-width: 90%;
+ line-height: 30px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
`
const $Wrapper = styled.div`
- margin-top: 20px;
flex: 1;
height: 100%
& img {
diff --git a/frontend/src/components/blog/index.tsx b/frontend/src/components/blog/index.tsx
index 0271c53..7dfc077 100644
--- a/frontend/src/components/blog/index.tsx
+++ b/frontend/src/components/blog/index.tsx
@@ -3,9 +3,12 @@ import { format } from "date-fns";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
+import { styled } from "styled-components";
+import { FlexRow } from "../../common";
import { thunkFetchNeurons } from "../../redux/neuronSlice";
import { RootState, useAppDispatch } from "../../redux/store";
-import { getDateFromStr, yyyyMMdd } from "../neuron/utils";
+import { compareNeurons, getDateFromStr, yyyyMMdd } from "../neuron/utils";
+import { Container } from "./Post";
const getDateInYYYYMMDD = (ognooStr?: string) => {
if (ognooStr) {
@@ -31,7 +34,7 @@ const Blog = () => {
useEffect(() => {
if (items.length > 0) {
- setPagedItems(items.filter(v => v.public).slice(0, pageSize));
+ setPagedItems(items.filter(v => v.public).sort(compareNeurons).slice(0, pageSize));
setTotalPage(Math.ceil(items.length / pageSize));
} else {
setPagedItems([]);
@@ -60,30 +63,41 @@ const Blog = () => {
}
}
+ if (pagedItems.length === 0) {
+ return No post...
+ }
+
return (
-
+
{pagedItems.map((v, i) => (
- onClickPost(v.id)}
- style={{
- border: "1px solid lightgrey",
- padding: "5px 10px",
- margin: "20px 0",
- borderRadius: 6,
- cursor: "pointer"
- }}
- >
+ onClickPost(v.id)}>
{v.title}
- {getDateInYYYYMMDD(v.created)}
-
+
+
+ {getDateInYYYYMMDD(v.created)}
+
+
+
))}
{pagedItems.length > pageSize &&
{currentPage} of {totalPage}
}
-
+
);
};
export default Blog;
+
+const StyledCart = styled.div`
+ border: 1px solid lightgrey;
+ padding: 25px;
+ margin: 20px 0;
+ border-radius: 6px;
+ cursor: pointer;
+ box-shadow: 3px 3px 7px lightgray;
+ &:hover {
+ box-shadow: 7px 7px 13px lightgray;
+ }
+`
diff --git a/frontend/src/components/layout/menu/index.tsx b/frontend/src/components/layout/menu/index.tsx
index 8e118b2..fca2b4d 100644
--- a/frontend/src/components/layout/menu/index.tsx
+++ b/frontend/src/components/layout/menu/index.tsx
@@ -60,4 +60,7 @@ const Text = styled.div<{ selected: boolean }>`
const Separator = styled.span`
margin: 0 20px;
+ @media (max-width: 600px) {
+ margin: 0 13px;
+ }
`;