diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/EditHistory.tsx similarity index 98% rename from editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx rename to editor.planx.uk/src/pages/FlowEditor/components/Sidebar/EditHistory.tsx index 2b87337963..b174681364 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/EditHistory.tsx @@ -19,8 +19,9 @@ import DelayedLoadingIndicator from "components/DelayedLoadingIndicator"; import React, { useState } from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -import { formatLastEditDate, Operation } from ".."; -import { useStore } from "../lib/store"; +import { useStore } from "../../lib/store"; +import { Operation } from "types"; +import { formatLastEditDate } from "../../utils"; const TooltipWrap = styled(({ className, ...props }: TooltipProps) => ( diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx similarity index 98% rename from editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx rename to editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index f3f0905dce..378f411aa6 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -31,17 +31,19 @@ import { useAsync } from "react-use"; import Caret from "ui/icons/Caret"; import Input from "ui/shared/Input"; -import Questions from "../../Preview/Questions"; -import { useStore } from "../lib/store"; +import Questions from "../../../Preview/Questions"; +import { useStore } from "../../lib/store"; import EditHistory from "./EditHistory"; +type SidebarTabs = "PreviewBrowser" | "History"; + const Console = styled(Box)(() => ({ overflow: "auto", padding: 20, maxHeight: "50%", })); -const EmbeddedBrowser = styled(Box)(({ theme }) => ({ +const Root = styled(Box)(({ theme }) => ({ position: "relative", top: "0", right: "0", @@ -158,8 +160,6 @@ interface AlteredNode { data?: any; } -type SideBarTabs = "PreviewBrowser" | "History"; - const AlteredNodeListItem = (props: { node: AlteredNode }) => { const { node } = props; let text, data; @@ -359,7 +359,7 @@ const AlteredNodesSummaryContent = (props: { ); }; -const PreviewBrowser: React.FC<{ +const Sidebar: React.FC<{ url: string; }> = React.memo((props) => { const [showDebugConsole, setDebugConsoleVisibility] = useState(false); @@ -392,9 +392,9 @@ const PreviewBrowser: React.FC<{ const [alteredNodes, setAlteredNodes] = useState(); const [dialogOpen, setDialogOpen] = useState(false); const [summary, setSummary] = useState(); - const [activeTab, setActiveTab] = useState("PreviewBrowser"); + const [activeTab, setActiveTab] = useState("PreviewBrowser"); - const handleChange = (event: React.SyntheticEvent, newValue: SideBarTabs) => { + const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { setActiveTab(newValue); }; @@ -416,7 +416,7 @@ const PreviewBrowser: React.FC<{ const teamSlug = window.location.pathname.split("/")[1]; return ( - +
)} {showDebugConsole && } - + ); }); -export default PreviewBrowser; +export default Sidebar; diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx index 0e233586bb..937c5561a4 100644 --- a/editor.planx.uk/src/pages/FlowEditor/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx @@ -7,34 +7,16 @@ import Box from "@mui/material/Box"; import Link from "@mui/material/Link"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; -import { OT } from "@planx/graph/types"; -import { formatDistanceToNow } from "date-fns"; import React, { useRef } from "react"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; +import { Operation } from "types"; import { rootFlowPath } from "../../routes/utils"; import Flow from "./components/Flow"; -import PreviewBrowser from "./components/PreviewBrowser"; +import Sidebar from "./components/Sidebar"; import { useStore } from "./lib/store"; import useScrollControlsAndRememberPosition from "./lib/useScrollControlsAndRememberPosition"; - -export interface Operation { - id: number; - createdAt: string; - actor?: { - id: number; - firstName: string; - lastName: string; - }; - data: Array; -} - -export const formatLastEditDate = (date: string): string => { - return formatDistanceToNow(new Date(date), { - includeSeconds: true, - addSuffix: true, - }); -}; +import { formatLastEditMessage } from "./utils"; const EditorContainer = styled(Box)(() => ({ display: "flex", @@ -43,18 +25,6 @@ const EditorContainer = styled(Box)(() => ({ flexGrow: 1, })); -const formatLastEditMessage = ( - date: string, - actor?: { firstName: string; lastName: string }, -): string => { - if (!actor) { - return `Last edited ${formatLastEditDate(date)}`; - } - - const name = `${actor.firstName} ${actor.lastName}`; - return `Last edited ${formatLastEditDate(date)} by ${name}`; -}; - export const LastEdited = () => { const [flowId] = useStore((state) => [state.id]); @@ -133,7 +103,7 @@ export const LastEdited = () => { const FlowEditor: React.FC = ({ flow, breadcrumbs }) => { const scrollContainerRef = useRef(null); useScrollControlsAndRememberPosition(scrollContainerRef); - const showPreview = useStore((state) => state.showPreview); + const showSidebar = useStore((state) => state.showSidebar); return ( @@ -150,8 +120,8 @@ const FlowEditor: React.FC = ({ flow, breadcrumbs }) => { - {showPreview && ( - )} diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts index 7e43f2deac..e24638d7b8 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts @@ -37,7 +37,7 @@ const send = (ops: Array) => { export interface EditorUIStore { flowLayout: FlowLayout; - showPreview: boolean; + showSidebar: boolean; togglePreview: () => void; isTestEnvBannerVisible: boolean; hideTestEnvBanner: () => void; @@ -51,10 +51,10 @@ export const editorUIStore: StateCreator< > = (set, get) => ({ flowLayout: FlowLayout.TOP_DOWN, - showPreview: true, + showSidebar: true, togglePreview: () => { - set({ showPreview: !get().showPreview }); + set({ showSidebar: !get().showSidebar }); }, isTestEnvBannerVisible: !window.location.href.includes(".uk"), diff --git a/editor.planx.uk/src/pages/FlowEditor/utils.ts b/editor.planx.uk/src/pages/FlowEditor/utils.ts new file mode 100644 index 0000000000..b79faf3be0 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/utils.ts @@ -0,0 +1,20 @@ +import { formatDistanceToNow } from "date-fns"; + +export const formatLastEditDate = (date: string): string => { + return formatDistanceToNow(new Date(date), { + includeSeconds: true, + addSuffix: true, + }); +}; + +export const formatLastEditMessage = ( + date: string, + actor?: { firstName: string; lastName: string } +): string => { + if (!actor) { + return `Last edited ${formatLastEditDate(date)}`; + } + + const name = `${actor.firstName} ${actor.lastName}`; + return `Last edited ${formatLastEditDate(date)} by ${name}`; +}; \ No newline at end of file diff --git a/editor.planx.uk/src/types.ts b/editor.planx.uk/src/types.ts index 66d691976d..c2b0b36e3d 100644 --- a/editor.planx.uk/src/types.ts +++ b/editor.planx.uk/src/types.ts @@ -7,6 +7,7 @@ import { useFormik } from "formik"; import { Store } from "./pages/FlowEditor/lib/store/index"; import { SharedStore } from "./pages/FlowEditor/lib/store/shared"; +import { OT } from "@planx/graph/types"; export type Maybe = T | undefined; @@ -122,3 +123,14 @@ export interface AdminPanelData { linkColour?: string; actionColour?: string; } + +export interface Operation { + id: number; + createdAt: string; + actor?: { + id: number; + firstName: string; + lastName: string; + }; + data: Array; +} \ No newline at end of file