complete overhaul of history view
This commit is contained in:
parent
0ebbf6b84a
commit
9da428d12e
@ -1,64 +1,121 @@
|
|||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
import { fillingFormsVR } from "../mock_data";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
StyledHistoryBlock,
|
StyledHistoryBlock,
|
||||||
StyledHistoryList,
|
StyledHistoryList,
|
||||||
StyledHistorySubtitle,
|
StyledHistorySubtitle,
|
||||||
} from "../../styles/history";
|
} from "../../styles/history";
|
||||||
import HistoryBlockContent from "./historyBlockContent";
|
|
||||||
|
|
||||||
import Avatar from "@docspace/components/avatar";
|
import Avatar from "@docspace/components/avatar";
|
||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
|
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
|
||||||
|
import { getUser } from "@docspace/common/api/people";
|
||||||
|
import { parseAndFormatDate } from "../../helpers/DetailsHelper";
|
||||||
|
import HistoryBlockMessage from "./HistoryBlockMessage";
|
||||||
|
import HistoryBlockItemList from "./HistoryBlockItemList";
|
||||||
|
|
||||||
const History = ({ t, personal, culture }) => {
|
const History = ({
|
||||||
const data = fillingFormsVR;
|
t,
|
||||||
|
selection,
|
||||||
|
setSelection,
|
||||||
|
personal,
|
||||||
|
culture,
|
||||||
|
getItemIcon,
|
||||||
|
|
||||||
const parseAndFormatDate = (date) => {
|
getRoomHistory,
|
||||||
const locale = personal ? localStorage.getItem(LANGUAGE) : culture;
|
openFileAction,
|
||||||
const correctDate = getCorrectDate(locale, date);
|
}) => {
|
||||||
return correctDate;
|
const [history, setHistory] = useState(null);
|
||||||
|
|
||||||
|
const parseHistoryJSON = async (fetchedHistory) => {
|
||||||
|
let feeds = fetchedHistory.feeds;
|
||||||
|
let newFeeds = [];
|
||||||
|
for (let i = 0; i < feeds.length; i++) {
|
||||||
|
const feedsJSON = JSON.parse(feeds[i].json);
|
||||||
|
feedsJSON.author = await getUser(feedsJSON.AuthorId);
|
||||||
|
|
||||||
|
let groupFeeds = feeds[i].groupedFeeds;
|
||||||
|
let newGroupFeeds = [];
|
||||||
|
for (let j = 0; j < groupFeeds.length; j++) {
|
||||||
|
const groupFeedsJSON = JSON.parse(groupFeeds[j].json);
|
||||||
|
groupFeedsJSON.author = await getUser(groupFeedsJSON.AuthorId);
|
||||||
|
newGroupFeeds.push(groupFeedsJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
newFeeds.push({
|
||||||
|
...feeds[i],
|
||||||
|
json: feedsJSON,
|
||||||
|
groupedFeeds: newGroupFeeds,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return { ...fetchedHistory, feeds: newFeeds };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(async () => {
|
||||||
|
if (selection.history) {
|
||||||
|
setHistory(selection.history);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!selection.isRoom) return;
|
||||||
|
let fetchedHistory = await getRoomHistory(selection.id);
|
||||||
|
fetchedHistory = await parseHistoryJSON(fetchedHistory);
|
||||||
|
console.log(fetchedHistory);
|
||||||
|
|
||||||
|
setHistory(fetchedHistory);
|
||||||
|
setSelection({ ...selection, history: fetchedHistory });
|
||||||
|
}, [selection]);
|
||||||
|
|
||||||
|
if (!selection || !history) return null;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StyledHistoryList>
|
<StyledHistoryList>
|
||||||
<StyledHistorySubtitle>Recent activities</StyledHistorySubtitle>
|
<StyledHistorySubtitle>{t("RecentActivities")}</StyledHistorySubtitle>
|
||||||
|
|
||||||
{data.history.map((operation) => (
|
{history.feeds.map((feed) => (
|
||||||
<StyledHistoryBlock key={operation.id}>
|
<StyledHistoryBlock key={feed.json.ModifiedDate}>
|
||||||
<Avatar
|
<Avatar
|
||||||
role="user"
|
role="user"
|
||||||
className="avatar"
|
className="avatar"
|
||||||
size="min"
|
size="min"
|
||||||
source={
|
source={
|
||||||
operation.user.avatar ||
|
feed.json.author.avatar ||
|
||||||
(operation.user.displayName
|
(feed.json.author.displayName
|
||||||
? ""
|
? ""
|
||||||
: operation.user.email && "/static/images/@.react.svg")
|
: feed.json.author.email && "/static/images/@.react.svg")
|
||||||
}
|
}
|
||||||
userName={operation.user.displayName}
|
userName={feed.json.author.displayName}
|
||||||
/>
|
/>
|
||||||
<div className="info">
|
<div className="info">
|
||||||
<div className="title">
|
<div className="title">
|
||||||
<Text className="name">{operation.user.displayName}</Text>
|
<Text className="name">{feed.json.author.displayName}</Text>
|
||||||
{operation.user.isOwner && (
|
{feed.json.author.isOwner && (
|
||||||
<Text className="secondary-info">
|
<Text className="secondary-info">
|
||||||
{t("Common:Owner").toLowerCase()}
|
{t("Common:Owner").toLowerCase()}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
<Text className="date">
|
<Text className="date">
|
||||||
{parseAndFormatDate(operation.date)}
|
{parseAndFormatDate(
|
||||||
|
feed.json.ModifiedDate,
|
||||||
|
personal,
|
||||||
|
culture
|
||||||
|
)}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<HistoryBlockContent
|
<HistoryBlockMessage
|
||||||
t={t}
|
t={t}
|
||||||
action={operation.action}
|
action={feed.json}
|
||||||
details={operation.details}
|
groupedActions={feed.groupedFeeds}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<HistoryBlockItemList
|
||||||
|
items={[feed.json, ...feed.groupedFeeds]}
|
||||||
|
getItemIcon={getItemIcon}
|
||||||
|
openFileAction={openFileAction}
|
||||||
|
/>
|
||||||
|
{/* <HistoryBlockContent t={t} feed={feed.json} /> */}
|
||||||
</div>
|
</div>
|
||||||
</StyledHistoryBlock>
|
</StyledHistoryBlock>
|
||||||
))}
|
))}
|
||||||
|
Loading…
Reference in New Issue
Block a user