Add blog post detail

frontend/src/common/editor/editor.tsx

@@ -32,7 +32,7 @@ function Placeholder() {
   return <div className="editor-placeholder">Enter some rich text...</div>;
 }
 
-const editorConfig = (value: string): any => ({
+const editorConfig = (value: string, editable: boolean): any => ({
   // The editor theme
   theme: ExampleTheme,
   // Handling of errors during update
@@ -54,6 +54,7 @@ const editorConfig = (value: string): any => ({
     AutoLinkNode,
     LinkNode,
   ],
+  editable,
 });
 
 function MyOnChangePlugin({ onChange, value }: { onChange: any, value: any }) {
@@ -98,13 +99,15 @@ type Props = {
   onSave?: (value: string) => void;
   editorRef?: any,
   hideToolbar?: boolean;
+  editable?: boolean
 };
 
 export default function Editor({
   text = "",
   onChange,
   editorRef,
   hideToolbar = false,
+  editable = true,
 }: Props) {
   function onTextChange(editorState: any) {
     editorState.read(() => {
@@ -119,7 +122,7 @@ export default function Editor({
   }
 
   return (
-    <LexicalComposer initialConfig={editorConfig("")}>
+    <LexicalComposer initialConfig={editorConfig("", editable)}>
       <div className="editor-container">
         {!hideToolbar && <ToolbarPlugin />}
         <div className="editor-inner">

frontend/src/components/blog/Post.tsx

@@ -1,19 +1,76 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+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<Neuron>()
   const { id } = useParams();
+  const dispatch = useAppDispatch();
+  const { selected } = useSelector((v: RootState) => v.neuron);
+  const { loading } = useSelector((v: RootState) => v.main);
 
   useEffect(() => {
-    console.log("Url param: ", id);
+    if (id) {
+      setItem(undefined)
+      dispatch(thunkGetNeuron(id))
+    }
+    return (() => {
+      dispatch(setNeuron(undefined))
+    })
   }, [id]);
 
+  useEffect(() => {
+    if (selected) {
+      setItem(selected)
+    }
+  }, [selected])
+
+  if (loading) {
+    return <>Loading...</>
+  }
+
   return (
-    <div>
-      <h2>{id}</h2>
-      <div>Hej hej</div>
-    </div>
+    <Container>
+      <StyledTitle>{item?.title}</StyledTitle>
+      <$Wrapper>
+        <Editor
+          text={item?.detail}
+          hideToolbar
+          editable={false}
+        />
+      </$Wrapper>
+    </Container>
   );
 };
 
 export default Post;
+
+const Container = styled.div`
+  padding: 20px 80px 60px;
+  .editor-container {
+    border: none;
+  }
+  .editor-input {
+    padding: 0;
+  }
+  @media (max-width: 600px) {
+    padding: 0 5px;
+  }
+`;
+
+const StyledTitle = styled.h1`
+  font-size: 30px;
+`
+
+const $Wrapper = styled.div`
+  margin-top: 20px;
+  flex: 1;
+  height: 100%
+  & img {
+    max-width: 100%;
+  }
+`;

frontend/src/components/blog/index.tsx

@@ -1,10 +1,11 @@
-import { useSelector } from "react-redux";
-import { RootState } from "../../redux/store";
-import { getDateFromStr, yyyyMMdd } from "../neuron/utils";
+import { Button } from "antd";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
-import { Button } from "antd";
+import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import { thunkFetchNeurons } from "../../redux/neuronSlice";
+import { RootState, useAppDispatch } from "../../redux/store";
+import { getDateFromStr, yyyyMMdd } from "../neuron/utils";
 
 const getDateInYYYYMMDD = (ognooStr?: string) => {
   if (ognooStr) {
@@ -14,18 +15,23 @@ const getDateInYYYYMMDD = (ognooStr?: string) => {
   return "";
 };
 
-const pageSize = 8;
+const pageSize = 50;
 
 const Blog = () => {
   const [totalPage, setTotalPage] = useState<number>(1);
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [pagedItems, setPagedItems] = useState<Neuron[]>([]);
   const { items } = useSelector((v: RootState) => v.neuron);
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(thunkFetchNeurons());
+  }, []);
 
   useEffect(() => {
     if (items.length > 0) {
-      setPagedItems(items.slice(0, pageSize));
+      setPagedItems(items.filter(v => v.public).slice(0, pageSize));
       setTotalPage(Math.ceil(items.length / pageSize));
     } else {
       setPagedItems([]);
@@ -37,13 +43,13 @@ const Blog = () => {
   const onPrev = () => {
     const newPage = Math.max(currentPage - 1, 1);
     setCurrentPage(newPage);
-    setPagedItems(items.slice((newPage - 1) * pageSize, newPage * pageSize));
+    setPagedItems(pagedItems.slice((newPage - 1) * pageSize, newPage * pageSize));
   };
 
   const onNext = () => {
     const newPage = Math.min(currentPage + 1, totalPage);
     setCurrentPage(newPage);
-    setPagedItems(items.slice((newPage - 1) * pageSize, newPage * pageSize));
+    setPagedItems(pagedItems.slice((newPage - 1) * pageSize, newPage * pageSize));
   };
 
   const onClickPost = (id: number | undefined) => {
@@ -71,11 +77,11 @@ const Blog = () => {
           {getDateInYYYYMMDD(v.created)}
         </div>
       ))}
-      <div style={{ margin: 20 }}>
+      {pagedItems.length > pageSize && <div style={{ margin: 20 }}>
         <Button onClick={onPrev}>prev</Button>
         {currentPage} of {totalPage}
         <Button onClick={onNext}>next</Button>
-      </div>
+      </div>}
     </div>
   );
 };

frontend/src/components/layout/menu/index.tsx

@@ -12,7 +12,7 @@ const menus: MenuEntry[] = [
   { title: "Home", path: "" },
   { title: "Learn", path: "learn" },
   { title: "Stats", path: "stats" },
-  // { title: "Blog", path: "blog" }, // Hide temporarily until better idea comes in
+  { title: "Blog", path: "blog" },
 ];
 
 const Menu = () => {

frontend/src/components/neuron/index.tsx

@@ -38,7 +38,7 @@ const Ilearn = () => {
   const dispatch = useAppDispatch();
   const [studyList, setStudyList] = useState<Neuron[]>([]);
   const [repititionDay, setRepititionDay] = useState<number>();
-  const [showEditModal, setShowEditModal] = useState(!!selected);
+  const [showEditModal, setShowEditModal] = useState(false);
   const [showStudyModal, setShowStudyModal] = useState(false);
 
   useEffect(() => {