state-management-utilities
Version:
State management utilities
24 lines (23 loc) • 1.83 kB
JavaScript
import { format } from "date-fns";
import React from "react";
import { LogError } from "../actions/_LogError";
import { Restore } from "../actions/_Restore";
import { JsonVisualizer } from "../json-visualizer";
import { useSelectedLog } from "../providers/SelectedLogProvider";
import { useStyles } from "../providers/StylesProvider";
export const Log = React.memo(LogBase);
function LogBase() {
const [selectedLog] = useSelectedLog();
const styles = useStyles();
return (React.createElement("section", { className: styles["dashboard-visualization-log"] },
React.createElement("section", { className: styles["dashboard-visualization-log-heading"] }, !selectedLog ? (React.createElement("h3", { className: styles["dashboard-visualization-log-title"] }, "No Selected Record")) : (React.createElement(React.Fragment, null,
React.createElement("div", { className: styles["dashboard-visualization-log-heading-titlebar"] },
React.createElement("h3", { className: styles["dashboard-visualization-log-title"] }, selectedLog.updatedUID),
React.createElement("div", { className: styles["dashboard-visualization-log-heading-titlebar-actions"] },
React.createElement(LogError, null),
React.createElement(Restore, null))),
React.createElement("div", { className: styles["dashboard-visualization-log-subtitle"] }, format(new Date(selectedLog.timestamp), "MMM dd, yyy HH:mm:ss.SSS"))))),
!selectedLog ? null : (React.createElement("section", { className: styles["dashboard-data-visualizer-container"] },
React.createElement("div", { className: styles["dashboard-data-visualizer-wrapper"] },
React.createElement(JsonVisualizer, { data: selectedLog?.states[selectedLog.updatedUID] }))))));
}