diff --git a/src/app/modules/report-module/index.tsx b/src/app/modules/report-module/index.tsx index 1619f55f4..195067922 100644 --- a/src/app/modules/report-module/index.tsx +++ b/src/app/modules/report-module/index.tsx @@ -13,7 +13,6 @@ import AITemplate from "app/modules/report-module/views/ai-template"; import { EditorState, convertToRaw } from "draft-js"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { ReportModel, emptyReport } from "app/modules/report-module/data"; -import ReportCreateView from "app/modules/report-module/views/create"; import { ReportPreviewView } from "app/modules/report-module/views/preview"; import ReportInitialView from "app/modules/report-module/views/initial"; import { IFramesArray } from "app/modules/report-module/views/create/data"; @@ -26,10 +25,8 @@ import { Redirect, } from "react-router-dom"; import { - persistedReportStateAtom, planDialogAtom, reportRightPanelViewAtom, - unSavedReportPreviewModeAtom, } from "app/state/recoil/atoms"; import { ReportSubheaderToolbar } from "app/modules/report-module/components/reportSubHeaderToolbar"; import { ToolbarPluginsType } from "app/modules/report-module/components/reportSubHeaderToolbar/staticToolbar"; @@ -48,37 +45,12 @@ export default function ReportModule() { }>({ isAutoSaveEnabled: false }); const setPlanDialog = useSetRecoilState(planDialogAtom); - - /** static toolbar states */ const [plugins, setPlugins] = React.useState([]); - /** end of static toolbar states */ - const token = useStoreState((state) => state.AuthToken.value); - const [_rightPanelView, setRightPanelView] = useRecoilState( reportRightPanelViewAtom ); - - const [_reportPreviewMode, setReportPreviewMode] = useRecoilState( - unSavedReportPreviewModeAtom - ); - - const [persistedReportState, setPersistedReportState] = useRecoilState( - persistedReportStateAtom - ); const [isPreviewView, setIsPreviewView] = React.useState(false); - - const localReportState = JSON.parse(persistedReportState.framesArray); - - let localPickedCharts: string[] = []; - localReportState.map((data: any) => { - return data.contentTypes.map((item: any, index: number) => { - if (item === "chart") { - localPickedCharts.push(data.content[index]); - } - }); - }); - const [rightPanelOpen, setRightPanelOpen] = React.useState(true); const [reportName, setReportName] = React.useState("Untitled report"); const [hasReportNameFocused, setHasReportNameFocused] = React.useState(false); @@ -300,26 +272,6 @@ export default function ReportModule() { const resetReport = () => { updateFramesArray(initialFramesArray); - setPersistedReportState({ - reportName: "Untitled report", - headerDetails: { - title: "", - heading: JSON.stringify( - convertToRaw(EditorState.createEmpty().getCurrentContent()) - ), - description: JSON.stringify( - convertToRaw(EditorState.createEmpty().getCurrentContent()) - ), - showHeader: true, - backgroundColor: "#252c34", - titleColor: "#ffffff", - descriptionColor: "#ffffff", - dateColor: "#ffffff", - }, - - framesArray: JSON.stringify([]), - }); - setHeaderDetails({ title: "", heading: EditorState.createEmpty(), @@ -333,7 +285,6 @@ export default function ReportModule() { setReportName("Untitled report"); setRightPanelView("charts"); setRightPanelOpen(true); - setReportPreviewMode(false); setAutoSave({ isAutoSaveEnabled: false }); }; @@ -500,7 +451,6 @@ export default function ReportModule() { setHasChangesBeenMade={setHasChangesBeenMade} setReportName={setReportName} reportName={reportName} - localPickedCharts={localPickedCharts} framesArray={framesArray} headerDetails={headerDetails} updateFramesArray={updateFramesArray} diff --git a/src/app/modules/report-module/sub-module/rowStructure/rowStructureDisplay.tsx b/src/app/modules/report-module/sub-module/rowStructure/rowStructureDisplay.tsx index 39fe30fe7..741bea874 100644 --- a/src/app/modules/report-module/sub-module/rowStructure/rowStructureDisplay.tsx +++ b/src/app/modules/report-module/sub-module/rowStructure/rowStructureDisplay.tsx @@ -21,7 +21,6 @@ import { chartFromReportAtom, reportContentIsResizingAtom, reportContentContainerWidth, - unSavedReportPreviewModeAtom, isChartDraggingAtom, } from "app/state/recoil/atoms"; import { IFramesArray } from "../../views/create/data"; @@ -62,17 +61,14 @@ interface RowStructureDisplayProps { forceSelectedType: string | undefined; } -export default function RowstructureDisplay(props: RowStructureDisplayProps) { +export default function RowstructureDisplay( + props: Readonly +) { const ref = useRef(null); const location = useLocation(); const { page } = useParams<{ page: string }>(); const [handleDisplay, setHandleDisplay] = React.useState(false); - const [reportPreviewMode] = useRecoilState(unSavedReportPreviewModeAtom); - const smScreen = useMediaQuery("(max-width: 850px)"); - const viewOnlyMode = - (page !== "new" && - get(location.pathname.split("/"), "[3]", "") !== "edit") || - reportPreviewMode; + const viewOnlyMode = location.pathname === `/report/${page}`; const handlers = viewOnlyMode ? {} @@ -381,15 +377,10 @@ const Box = (props: { }; const containerWidth = useRecoilValue(reportContentContainerWidth); - const [reportPreviewMode] = useRecoilState(unSavedReportPreviewModeAtom); const [_isResizing, setIsResizing] = useRecoilState( reportContentIsResizingAtom ); - - const viewOnlyMode = - (page !== "new" && - get(location.pathname.split("/"), "[3]", "") !== "edit") || - reportPreviewMode; + const viewOnlyMode = location.pathname === `/report/${page}`; const elementTypes = [ ReportElementsType.TEXT, diff --git a/src/app/modules/report-module/views/edit/data.ts b/src/app/modules/report-module/views/edit/data.ts index 5efcd2178..91c0ab2c8 100644 --- a/src/app/modules/report-module/views/edit/data.ts +++ b/src/app/modules/report-module/views/edit/data.ts @@ -13,7 +13,6 @@ export interface ReportEditViewProps { setHasReportNameFocused: React.Dispatch>; updateFramesArray: Updater; framesArray: IFramesArray[]; - localPickedCharts: string[]; setReportName: React.Dispatch>; autoSave: boolean; setAutoSave: React.Dispatch< diff --git a/src/app/modules/report-module/views/edit/index.tsx b/src/app/modules/report-module/views/edit/index.tsx index 5107863d9..8c209eb4f 100644 --- a/src/app/modules/report-module/views/edit/index.tsx +++ b/src/app/modules/report-module/views/edit/index.tsx @@ -5,7 +5,7 @@ import { useRecoilState } from "recoil"; import { useParams } from "react-router-dom"; import useResizeObserver from "use-resize-observer"; import Container from "@material-ui/core/Container"; -import { EditorState, RawDraftContentState, convertFromRaw } from "draft-js"; +import { EditorState, convertFromRaw } from "draft-js"; import { useTitle } from "react-use"; import { useAuth0 } from "@auth0/auth0-react"; import { PlaceHolder } from "app/modules/report-module/views/create"; @@ -21,7 +21,6 @@ import { GridColumns } from "app/modules/report-module/components/grid-columns"; import { IRowFrameStructure, - persistedReportStateAtom, reportContentContainerWidth, } from "app/state/recoil/atoms"; import { IFramesArray } from "app/modules/report-module/views/create/data"; @@ -37,7 +36,7 @@ import { compareHeaderDetailsState, } from "app/modules/report-module/views/edit/compareStates"; -function ReportEditView(props: ReportEditViewProps) { +function ReportEditView(props: Readonly) { useTitle("DX Dataxplorer - Edit Report"); const { page } = useParams<{ page: string }>(); @@ -53,7 +52,6 @@ function ReportEditView(props: ReportEditViewProps) { ); const [isReportHeadingModified, setIsReportHeadingModified] = React.useState(false); - const [persistedReportState] = useRecoilState(persistedReportStateAtom); const [rowStructureType, setRowStructuretype] = React.useState({ index: 0, @@ -112,15 +110,13 @@ function ReportEditView(props: ReportEditViewProps) { if (reportData.id !== page) { return; } - if (props.localPickedCharts.length === 0) { - const items = reportData.rows.map((rowFrame, index) => - rowFrame.items.filter((item) => typeof item === "string") - ) as string[][]; - let pickedItems: string[] = []; - - for (const element of items) { - pickedItems = [...pickedItems, ...element]; - } + const items = reportData.rows.map((rowFrame, index) => + rowFrame.items.filter((item) => typeof item === "string") + ) as string[][]; + let pickedItems: string[] = []; + + for (const element of items) { + pickedItems = [...pickedItems, ...element]; } }, [reportData]); @@ -197,15 +193,11 @@ function ReportEditView(props: ReportEditViewProps) { showHeader: reportData.showHeader, heading: reportData?.heading ? EditorState.moveFocusToEnd( - EditorState.createWithContent( - convertFromRaw(reportData?.heading as RawDraftContentState) - ) + EditorState.createWithContent(convertFromRaw(reportData?.heading)) ) : EditorState.moveFocusToEnd(EditorState.createEmpty()), description: reportData?.description - ? EditorState.createWithContent( - convertFromRaw(reportData?.description as RawDraftContentState) - ) + ? EditorState.createWithContent(convertFromRaw(reportData?.description)) : EditorState.createEmpty(), backgroundColor: reportData.backgroundColor, titleColor: reportData.titleColor, diff --git a/src/app/modules/report-module/views/initial/index.tsx b/src/app/modules/report-module/views/initial/index.tsx index ab4be72d6..4cac8d67a 100644 --- a/src/app/modules/report-module/views/initial/index.tsx +++ b/src/app/modules/report-module/views/initial/index.tsx @@ -9,8 +9,6 @@ import { } from "app/modules/report-module/views/initial/data"; import { ReportModel, emptyReport } from "app/modules/report-module/data"; import ReportsGrid from "app/modules/home-module/components/AssetCollection/Reports/reportsGrid"; -import { persistedReportStateAtom } from "app/state/recoil/atoms"; -import { useResetRecoilState } from "recoil"; import { useHistory } from "react-router-dom"; import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { useMount, useTitle, useUpdateEffect } from "react-use"; @@ -50,12 +48,7 @@ function ReportInitialView(props: Readonly) { props.handleSetButtonActive(option.value); }; - const clearPersistedReportState = useResetRecoilState( - persistedReportStateAtom - ); - React.useEffect(() => { - clearPersistedReportState(); props.resetReport(); }, []); @@ -66,8 +59,7 @@ function ReportInitialView(props: Readonly) { useUpdateEffect(() => { if (reportCreateSuccess && !isEmpty(reportCreateData?.id)) { - const id = reportCreateData.id; - history.push(`/report/${id}/edit`); + history.push(`/report/${reportCreateData.id}/edit`); } }, [reportCreateSuccess, reportCreateData]); diff --git a/src/app/modules/report-module/views/preview/index.tsx b/src/app/modules/report-module/views/preview/index.tsx index 7d74fad96..5c6409895 100644 --- a/src/app/modules/report-module/views/preview/index.tsx +++ b/src/app/modules/report-module/views/preview/index.tsx @@ -13,27 +13,24 @@ import RowFrame from "app/modules/report-module/sub-module/rowStructure"; import HeaderBlock from "app/modules/report-module/sub-module/components/headerBlock"; import { NotAuthorizedMessageModule } from "app/modules/common/not-authorized-message"; import { ReportElementsType } from "app/modules/report-module/components/right-panel-create-view"; -import { - persistedReportStateAtom, - reportContentContainerWidth, - unSavedReportPreviewModeAtom, -} from "app/state/recoil/atoms"; +import { reportContentContainerWidth } from "app/state/recoil/atoms"; import { linkDecorator } from "app/modules/common/RichEditor/decorators"; import { useTitle } from "react-use"; import ReportUsePanel from "../../components/use-report-panel"; import HomeFooter from "app/modules/home-module/components/Footer"; import { PageLoader } from "app/modules/common/page-loader"; -export function ReportPreviewView(props: { - setIsPreviewView: React.Dispatch>; - setAutoSave: React.Dispatch< - React.SetStateAction<{ - isAutoSaveEnabled: boolean; - }> - >; -}) { - const previewMode = location.pathname.endsWith("preview"); - useTitle(`DX DataXplorer - Report ${previewMode ? "Preview" : "View"}`); +export function ReportPreviewView( + props: Readonly<{ + setIsPreviewView: React.Dispatch>; + setAutoSave: React.Dispatch< + React.SetStateAction<{ + isAutoSaveEnabled: boolean; + }> + >; + }> +) { + useTitle(`DX DataXplorer - Report View`); const { page } = useParams<{ page: string }>(); @@ -41,9 +38,6 @@ export function ReportPreviewView(props: { const { ref, width } = useResizeObserver(); - const persistedReportState = useRecoilState(persistedReportStateAtom)[0]; - const reportPreviewMode = useRecoilState(unSavedReportPreviewModeAtom)[0]; - const [containerWidth, setContainerWidth] = useRecoilState( reportContentContainerWidth ); @@ -91,8 +85,6 @@ export function ReportPreviewView(props: { (actions) => actions.reports.ReportGet.clear ); - const [reportPreviewData, setReportPreviewData] = React.useState(reportData); - React.useEffect(() => { props.setAutoSave({ isAutoSaveEnabled: false }); if (!isLoading) { @@ -113,12 +105,6 @@ export function ReportPreviewView(props: { } }, [width]); - React.useEffect(() => { - if (!reportPreviewMode) { - setReportPreviewData(reportData); - } - }, [reportData]); - React.useEffect(() => { props.setIsPreviewView(true); return () => { @@ -129,24 +115,6 @@ export function ReportPreviewView(props: { }; }, []); - React.useEffect(() => { - if (reportPreviewMode) { - setReportPreviewData({ - ...reportPreviewData, - - title: JSON.parse(persistedReportState.headerDetails.title), - showHeader: persistedReportState.headerDetails.showHeader, - backgroundColor: persistedReportState.headerDetails.backgroundColor, - titleColor: persistedReportState.headerDetails.titleColor, - descriptionColor: persistedReportState.headerDetails.descriptionColor, - dateColor: persistedReportState.headerDetails.dateColor, - rows: JSON.parse(persistedReportState.framesArray || "[]"), - description: JSON.parse(persistedReportState.headerDetails.description), - heading: JSON.parse(persistedReportState.headerDetails.heading), - }); - } - }, [persistedReportState]); - React.useEffect(() => { if (!loadingReportData && isReportLoading === null) { return; @@ -182,20 +150,18 @@ export function ReportPreviewView(props: { isToolboxOpen={false} previewMode={true} headerDetails={{ - title: reportPreviewData.title, - showHeader: reportPreviewData.showHeader, + title: reportData.title, + showHeader: reportData.showHeader, heading: EditorState.createWithContent( - convertFromRaw(reportPreviewData.heading ?? emptyReport.heading) + convertFromRaw(reportData.heading ?? emptyReport.heading) ), description: EditorState.createWithContent( - convertFromRaw( - reportPreviewData.description ?? emptyReport.description - ) + convertFromRaw(reportData.description ?? emptyReport.description) ), - backgroundColor: reportPreviewData.backgroundColor, - titleColor: reportPreviewData.titleColor, - descriptionColor: reportPreviewData.descriptionColor, - dateColor: reportPreviewData.dateColor, + backgroundColor: reportData.backgroundColor, + titleColor: reportData.titleColor, + descriptionColor: reportData.descriptionColor, + dateColor: reportData.dateColor, }} setPlugins={() => {}} setHeaderDetails={() => {}} @@ -205,7 +171,7 @@ export function ReportPreviewView(props: { {!reportError401 && - get(reportPreviewData, "rows", []).map((rowFrame, index) => { + get(reportData, "rows", []).map((rowFrame, index) => { const contentTypes = rowFrame.items.map((item) => { if (item === null) { return null; @@ -270,16 +236,10 @@ export function ReportPreviewView(props: { })} - {location.search.includes("?fromLanding=true") && !isAuthenticated ? ( ) : null} - - {!previewMode ? ( - <> - - - ) : null} + ); } diff --git a/src/app/state/recoil/atoms/index.ts b/src/app/state/recoil/atoms/index.ts index 7e5a60047..fc1885118 100644 --- a/src/app/state/recoil/atoms/index.ts +++ b/src/app/state/recoil/atoms/index.ts @@ -1,6 +1,5 @@ import { atom } from "recoil"; import { recoilPersist } from "recoil-persist"; -import { convertToRaw, EditorState } from "draft-js"; import { DatasetListItemAPIModel } from "app/modules/dataset-module/data"; export interface IRowFrameStructure { @@ -91,11 +90,6 @@ export const reportCreationTourStepAtom = atom({ key: "reportCreationTourStepAtom", default: 0, }); -export const unSavedReportPreviewModeAtom = atom({ - key: "unSavedReportPreviewModeAtom", - default: false, - effects_UNSTABLE: [persistAtom], -}); export const loadedDatasetsAtom = atom({ key: "loadedDatasetsAtom", @@ -121,44 +115,6 @@ export const chartFromReportAtom = atom<{ effects_UNSTABLE: [persistAtom], }); -export const persistedReportStateAtom = atom<{ - reportName: string; - headerDetails: { - title: string; - description: string; - heading: string; - showHeader: boolean; - backgroundColor: string; - titleColor: string; - descriptionColor: string; - dateColor: string; - }; - - framesArray: string; -}>({ - key: "reportCreateStateAtom", - default: { - reportName: "Untitled report", - headerDetails: { - title: "", - description: JSON.stringify( - convertToRaw(EditorState.createEmpty().getCurrentContent()) - ), - heading: JSON.stringify( - convertToRaw(EditorState.createEmpty().getCurrentContent()) - ), - showHeader: true, - backgroundColor: "#252c34", - titleColor: "#ffffff", - descriptionColor: "#ffffff", - dateColor: "#ffffff", - }, - - framesArray: JSON.stringify([]), - }, - effects_UNSTABLE: [persistAtom], -}); - export const dataUploadTabAtom = atom<"search" | "file">({ key: "dataUploadTabAtom", default: "search",