merging

frontend/src/Api.js

@@ -183,15 +183,15 @@ export default class Api {
         })
     }
     async updateFileBlockData(block_id, content){
-        let link = ""
+        let block = null
         await instance.put(`/blocks/data/file?block_id=${block_id}`, content, {
             headers: {
                 'Content-Type': 'multipart/form-data'
             }
         }).then((resp)=>{
-            link = resp.data.link
+            block = resp.data
         })
-        return link
+        return block
     }
     async getBlockData(block_id, commit_id){
         let url = `/blocks/data?block_id=${block_id}${commit_id !== null

frontend/src/App.js

@@ -17,35 +17,29 @@ import ProtectedRoute from "./Components/ProtectedRoute";
 export default function App() {
 
     const [user, setUser] = useState(null)
-    const [userLoading, setUserLoading] = useState()
 
-    useEffect(() => {
 
+    useEffect(() => {
         fetchUser();
-
     }, []);
 
     const handleRefresh = () => {
         fetchUser()
     }
 
     const fetchUser = async () => {
-        setUserLoading(true)
         try {
             const response = await api.getMe();
             setUser(response);
         } catch (error) {
             console.log(error)
         }
-        setUserLoading(false)
-
     };
 
 
 
         return (
             /*<UserContext.Provider value={user}>*/
-            userLoading ? <></> :
                 <BrowserRouter basename={"/wiki/demo"}>
                     <AppNavbar user={user}/>
                     <Routes>
@@ -68,7 +62,6 @@ export default function App() {
                         <Route path={"/test/*"} element={<TestPage/>}/>
                     </Routes>
                 </BrowserRouter>
-
            /* </UserContext.Provider>*/
         )
 }

frontend/src/Components/Block/Block.js

@@ -0,0 +1,154 @@
+import TextBlock from "./components/view/TextBlock";
+import ImageBlock from "./components/view/ImageBlock";
+import {Accordion, AccordionDetails, AccordionSummary, Button, IconButton} from "@mui/material";
+import {Delete} from "@mui/icons-material";
+import HistoryIcon from '@mui/icons-material/History';
+import EditIcon from "@mui/icons-material/Edit";
+import {Box} from "@mui/system";
+import Wysiwyg from "./components/editor/Wysiwyg";
+import React, {useState} from "react";
+import FileUploader from "./components/editor/FileUploader";
+import "../../Styles/Block.css"
+import Menu from "@mui/material/Menu";
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import MenuItem from "@mui/material/MenuItem";
+
+
+export default function BlockComponent(props) {
+
+    const [showEditor, setShowEditor] = useState(false)
+    const [block, setBlock] = useState(props.block)
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const [showMenu, setShowMenu] = useState(false);
+
+    const handleMouseEnter = () => {
+        setShowMenu(true);
+    };
+
+    const handleMouseLeave = () => {
+        setShowMenu(false);
+    };
+
+
+    const getBlockView = () =>{
+        switch(block.type_block) {
+            case 'TEXT':
+            return <TextBlock block={block}/>
+            case 'IMG':
+                return <ImageBlock block={block} />
+        }
+    }
+
+    const getBlockEditor = () => {
+        switch(block.type_block) {
+            case 'TEXT':
+                return <Wysiwyg block={block} onChange={handleChange}/>
+            case 'IMG':
+                return <FileUploader block={block} onChange={handleChange}/>
+        }
+    }
+
+    const getTools = () => {
+        switch(props.mode) {
+            case 'view':
+                return(
+                    <div style={{float: 'right'}}>
+                        <MenuItem onClick={handleShowHistory}>
+                            <HistoryIcon/>
+                        </MenuItem>
+                    </div>
+                )
+            case 'edit':
+                return(
+                    <div >
+                        <MenuItem onClick={handleDelete}>
+                            <Delete/>
+                        </MenuItem>
+                        <MenuItem onClick={handleShowHistory}>
+                            <HistoryIcon/>
+                        </MenuItem>
+                        <MenuItem onClick={handleShowEditor}>
+                            <EditIcon/>
+                        </MenuItem>
+                    </div>
+            /*case 'version':
+                return (
+                    <div style={{float: 'right'}}>
+                        <IconButton onClick={handleDelete}>
+                            <Delete/>
+                        </IconButton>
+                    </div>*/
+                )
+        }
+    }
+
+    const handleAddAbove = () => {
+        //props.onAddAbove(block)
+    }
+
+    const handleAddBelow = () => {
+        //props.onAddBelow(block)
+    }
+
+    const handleMoveDown = () => {
+        //props.onMoveDown(block)
+    }
+
+    const handleMoveUp = () => {
+        //props.onMoveUp(block)
+    }
+
+    const handleDelete = () => {
+        props.onDelete(block)
+    }
+
+    const handleShowHistory = () => {
+        props.onShowHistory(block)
+    }
+
+    const handleShowEditor = () => {
+        setShowEditor(!showEditor)
+    }
+
+    const handleChange = (newBlock) => {
+        setBlock(newBlock)
+        props.onChange()
+    }
+
+
+    return (
+        <div
+            className={"block-container"}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            {showEditor ?
+                <div className={"block-editor"}>
+                    {getBlockEditor()}
+                </div> :
+                <div className={"block-view"}>
+                    {getBlockView()}
+                </div>
+                }
+            <div className={showMenu ? "block__toolbar_visibility_visible" : "block__toolbar_visibility_hidden"}>
+                <Button onClick={handleClick}>
+                    <MoreVertIcon/>
+                </Button>
+                <Menu
+                    open={Boolean(anchorEl)}
+                    onClose={handleClose}
+                    anchorEl={anchorEl}
+                >
+                    {getTools()}
+                </Menu>
+            </div>
+        </div>
+    )
+}

frontend/src/Components/Block/components/editor/FileUploader.js

@@ -0,0 +1,18 @@
+import {api} from "../../../../Config/app.config";
+
+
+export default function FileUploader({block, onChange}){
+
+    const handleChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            let formData = new FormData();
+            formData.append('file', file);
+            api.updateFileBlockData(block.id, formData).then((newBlock) => {
+                onChange(newBlock)
+            });
+        }
+    }
+
+    return(<input type="file" onChange={handleChange}/>)
+}

frontend/src/Components/Wysiwyg.js → frontend/src/Components/Block/components/editor/Wysiwyg.js

@@ -3,33 +3,35 @@ import React, { useState, useEffect } from 'react';
 import {EditorState, ContentState, convertFromHTML} from 'draft-js';
 import {Editor}  from 'react-draft-wysiwyg';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
-import {toolbar} from "../Config/wysiwyg.toolbar.config";
+import {toolbar} from "../../../../Config/wysiwyg.toolbar.config";
 
-export default function Wysiwyg(props){
+export default function Wysiwyg({block, onChange}){
 
-    const handleChange = (html) => {
-        props.onChange(html)
+
+    const handleChange = (newBlock) => {
+        onChange(newBlock)
     }
 
     const [editorState, setEditorState] = React.useState(
         () => EditorState.createWithContent(
             ContentState.createFromBlockArray(
-                convertFromHTML(props.content)
+                convertFromHTML(block.content)
         )
     ))
 
     useEffect(() => {
         let html = convertToHTML(editorState.getCurrentContent());
-        handleChange(html)
+        block.content = html
+        handleChange(block)
     }, [editorState]);
 
 
     return (
-        <>
+        <div>
             <Editor
                 toolbar={toolbar}
                 editorState={editorState}
                 onEditorStateChange={setEditorState}/>
-        </>
+        </div>
     )
 }

frontend/src/Components/Block/components/view/ImageBlock.js

@@ -0,0 +1,7 @@
+
+export default function ImageBlock({block}){
+
+    return(
+        <img src={block.link} width="600"/>
+    )
+}

frontend/src/Components/Block/components/view/TextBlock.js

@@ -0,0 +1,10 @@
+import {Typography} from "@mui/material";
+import React from "react";
+
+
+export default function TextBlock({block}){
+
+    return(
+        <Typography dangerouslySetInnerHTML={{ __html: block.content}} />
+    )
+}