Web27 Display Filename

frontend/src/deprecated/components/Editor/EditorHeader.tsx

@@ -16,7 +16,7 @@ const HeaderFlex = styled.div`
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
-justify-content: flex-end;
+justify-content: space-between;
 align-items: center;
 padding: 0.3rem 0.5rem;
 `

frontend/src/packages/dashboard/components/FileRenderer/FileContainer.tsx

@@ -48,7 +48,12 @@ function FileContainer({ name, id, selectedFile, setSelectedFile }: Props) {
     console.log(id);
     setSelectedFile(id);
     if (selectedFile !== null) {
-      navigate("/editor/" + selectedFile, { replace: false }), [navigate];
+      navigate("/editor/" + selectedFile, { 
+        replace: false,
+        state: {
+          filename: name
+        } 
+      }), [navigate];
     }
   };
 

frontend/src/packages/dashboard/components/SideBar/SideBar.tsx

@@ -130,7 +130,12 @@ export default function SideBar({
   const navigate = useNavigate();
   const handleEdit = () => {
     if (selectedFile !== null) {
-      navigate("/editor/" + selectedFile, { replace: false }), [navigate];
+      navigate("/editor/" + selectedFile, { 
+        replace: false,
+        state: {
+          filename: "REPLACE ME"
+        } 
+      }), [navigate];
     }
   };
 

frontend/src/packages/editor/components/HeadingBlock.tsx

@@ -59,6 +59,7 @@ const HeadingBlock: FC<CMSBlockProps> = ({
           <EditorSelectFont />
         </ToolbarContainer>
       )}
+      poop
       <ContentBlock>
         <Editable
           renderLeaf={renderLeaf}

frontend/src/packages/editor/index.tsx

@@ -9,7 +9,7 @@ import CreateHeadingBlock from "src/cse-ui-kit/CreateHeadingBlock_button";
 import SyncDocument from "src/cse-ui-kit/SyncDocument_button";
 import PublishDocument from "src/cse-ui-kit/PublishDocument_button";
 import EditorHeader from "src/deprecated/components/Editor/EditorHeader";
-import { useParams } from "react-router-dom";
+import { useParams, useLocation } from "react-router-dom";
 
 import { buildComponentFactory } from "./componentFactory";
 import { OperationManager } from "./operationManager";
@@ -26,6 +26,19 @@ const InsertContentWrapper = styled.div`
   display: flex;
 `;
 
+const ButtonContainer = styled.div`
+  display: flex;
+`
+
+const NameContainer = styled.div`
+  display: flex;
+  padding: 10px;
+`
+
+type LocationState = {
+  filename: string;
+};
+
 const EditorPage: FC = () => {
   const { id } = useParams();
   const wsClient = useRef<Client | null>(null);
@@ -34,6 +47,9 @@ const EditorPage: FC = () => {
   const [blocks, setBlocks] = useState<BlockData[]>([]);
   const [focusedId, setFocusedId] = useState<number>(0);
 
+  const state = useLocation().state as LocationState;
+  const filename = state.filename;
+
   const updateValues: UpdateCallback = (idx, updatedBlock) => {
     const requiresUpdate = JSON.stringify(blocks[idx]) !== JSON.stringify(updateValues);
     if (!requiresUpdate) return;
@@ -80,11 +96,17 @@ const EditorPage: FC = () => {
     opManager.current?.pushToServer(newCreationOperation(newElement, blocks.length));
   }  
 
+
   return (
     <div style={{ height: "100%" }}>
       <EditorHeader>
-          <SyncDocument onClick={() => syncDocument()} />
-          <PublishDocument onClick={() => publishDocument(id ?? "")} />
+          <NameContainer>
+          {filename}
+          </NameContainer>
+          <ButtonContainer>
+            <SyncDocument onClick={() => syncDocument()} />
+            <PublishDocument onClick={() => publishDocument(id ?? "")} />
+          </ButtonContainer>
       </EditorHeader>
       <Container>
         {blocks.map((block, idx) => createBlock(block, idx, focusedId === idx))}