Page MenuHomePhabricator
Differential D8670

[web] refactor processing store operations on worker
ClosedPublic
Actions

Authored by kamil on Jul 31 2023, 2:27 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Apr 21, 12:19 AM
Unknown Object (File)
Tue, Apr 8, 3:27 PM
Unknown Object (File)
Thu, Apr 3, 10:46 PM
Unknown Object (File)
Tue, Apr 1, 9:56 PM
Unknown Object (File)
Tue, Mar 25, 4:46 PM
Unknown Object (File)
Mon, Mar 24, 2:11 PM
Unknown Object (File)
Mon, Mar 24, 2:11 PM
Unknown Object (File)
Mar 23 2025, 1:38 PM
View All Files
Subscribers
ashoat

Details

Reviewers
michal
tomek
Commits
rCOMM1af81091dfc5: [web] refactor processing store operations on worker
Summary

This addresses: https://phab.comm.dev/D8612#253783.

Test Plan

Check if operations on web works.

Diff Detail

Repository
rCOMM Comm
Branch
db-worker-cleanup
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

kamil created this revision.Jul 31 2023, 2:27 AM
kamil held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptJul 31 2023, 2:27 AM
kamil added inline comments.Jul 31 2023, 2:28 AM
web/database/worker/db-worker.js
194

Flow forces to use it second time in this function

kamil published this revision for review.Jul 31 2023, 2:37 AM
Harbormaster completed remote builds in B21356: Diff 29256.Jul 31 2023, 2:44 AM
tomek accepted this revision.Jul 31 2023, 4:35 AM
This revision is now accepted and ready to land.Jul 31 2023, 4:35 AM
Closed by commit rCOMM1af81091dfc5: [web] refactor processing store operations on worker (authored by kamil). · Explain WhyAug 1 2023, 3:16 AM
This revision was automatically updated to reflect the committed changes.
kamil added a commit: rCOMM1af81091dfc5: [web] refactor processing store operations on worker.

Revision Contents
Changeset List

PathSize
web/
database/
worker/
88 lines
79 lines

Diff 29256

View Options

web/database/worker/db-worker.js

Show All 13 Linesimport {
useModalContext, useModalContext,
type PushModal, type PushModal,
} from 'lib/components/modal-provider.react'; } from 'lib/components/modal-provider.react';
import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors'; import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors';
import { entryKey } from 'lib/shared/entry-utils'; import { entryKey } from 'lib/shared/entry-utils';
import type { EntryInfo } from 'lib/types/entry-types'; import type { EntryInfo } from 'lib/types/entry-types';
import type { Dispatch } from 'lib/types/redux-types'; import type { Dispatch } from 'lib/types/redux-types';
import type { ThreadInfo } from 'lib/types/thread-types'; import type { ThreadInfo } from 'lib/types/thread-types';
import { import { dateString, dateFromString } from 'lib/utils/date-utils';
dateString,
dateFromString,
currentDateInTimeZone,
} from 'lib/utils/date-utils';
import LogInFirstModal from '../modals/account/log-in-first-modal.react'; import LogInFirstModal from '../modals/account/log-in-first-modal.react';
import HistoryModal from '../modals/history/history-modal.react'; import HistoryModal from '../modals/history/history-modal.react';
import ThreadPickerModal from '../modals/threads/thread-picker-modal.react'; import ThreadPickerModal from '../modals/threads/thread-picker-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import { htmlTargetFromEvent } from '../vector-utils'; import { htmlTargetFromEvent } from '../vector-utils';
import { AddVector, HistoryVector } from '../vectors.react'; import { AddVector, HistoryVector } from '../vectors.react';
import css from './calendar.css'; import css from './calendar.css';
import type { InnerEntry } from './entry.react'; import type { InnerEntry } from './entry.react';
import Entry from './entry.react'; import Entry from './entry.react';
type BaseProps = { type BaseProps = {
+dayString: string, +dayString: string,
+entryInfos: $ReadOnlyArray<EntryInfo>, +entryInfos: $ReadOnlyArray<EntryInfo>,
+startingTabIndex: number, +startingTabIndex: number,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
+onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>, +onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>,
+viewerID: ?string, +viewerID: ?string,
+loggedIn: boolean, +loggedIn: boolean,
+nextLocalID: number, +nextLocalID: number,
+timeZone: ?string,
+dispatch: Dispatch, +dispatch: Dispatch,
+pushModal: PushModal, +pushModal: PushModal,
+popModal: () => void, +popModal: () => void,
}; };
type State = { type State = {
+hovered: boolean, +hovered: boolean,
}; };
class Day extends React.PureComponent<Props, State> { class Day extends React.PureComponent<Props, State> {
state: State = { state: State = {
hovered: false, hovered: false,
}; };
entryContainer: ?HTMLDivElement; entryContainer: ?HTMLDivElement;
entryContainerSpacer: ?HTMLDivElement; entryContainerSpacer: ?HTMLDivElement;
actionLinks: ?HTMLDivElement; actionLinks: ?HTMLDivElement;
entries: Map<string, InnerEntry> = new Map(); entries: Map<string, InnerEntry> = new Map();
componentDidUpdate(prevProps: Props) { componentDidUpdate(prevProps: Props) {
if (this.props.entryInfos.length > prevProps.entryInfos.length) { if (this.props.entryInfos.length > prevProps.entryInfos.length) {
invariant(this.entryContainer, 'entryContainer ref not set'); invariant(this.entryContainer, 'entryContainer ref not set');
this.entryContainer.scrollTop = this.entryContainer.scrollHeight; this.entryContainer.scrollTop = this.entryContainer.scrollHeight;
} }
} }
render() { render() {
const now = currentDateInTimeZone(this.props.timeZone); const now = new Date();
const isToday = dateString(now) === this.props.dayString; const isToday = dateString(now) === this.props.dayString;
const tdClasses = classNames(css.day, { [css.currentDay]: isToday }); const tdClasses = classNames(css.day, { [css.currentDay]: isToday });
let actionLinks = null; let actionLinks = null;
const hovered = this.state.hovered; const hovered = this.state.hovered;
if (hovered) { if (hovered) {
const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`; const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`;
actionLinks = ( actionLinks = (
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Linesconst ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function ConnectedDay(props) { function ConnectedDay(props) {
const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector); const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector);
const viewerID = useSelector(state => state.currentUserInfo?.id); const viewerID = useSelector(state => state.currentUserInfo?.id);
const loggedIn = useSelector( const loggedIn = useSelector(
state => state =>
!!(state.currentUserInfo && !state.currentUserInfo.anonymous && true), !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
); );
const nextLocalID = useSelector(state => state.nextLocalID); const nextLocalID = useSelector(state => state.nextLocalID);
const timeZone = useSelector(state => state.timeZone);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
return ( return (
<Day <Day
{...props} {...props}
onScreenThreadInfos={onScreenThreadInfos} onScreenThreadInfos={onScreenThreadInfos}
viewerID={viewerID} viewerID={viewerID}
loggedIn={loggedIn} loggedIn={loggedIn}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
timeZone={timeZone}
dispatch={dispatch} dispatch={dispatch}
pushModal={pushModal} pushModal={pushModal}
popModal={popModal} popModal={popModal}
/> />
); );
}, },
); );
export default ConnectedDay; export default ConnectedDay;
View Options

web/database/worker/process-operations.js

Show All 13 Linesimport {
useModalContext, useModalContext,
type PushModal, type PushModal,
} from 'lib/components/modal-provider.react'; } from 'lib/components/modal-provider.react';
import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors'; import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors';
import { entryKey } from 'lib/shared/entry-utils'; import { entryKey } from 'lib/shared/entry-utils';
import type { EntryInfo } from 'lib/types/entry-types'; import type { EntryInfo } from 'lib/types/entry-types';
import type { Dispatch } from 'lib/types/redux-types'; import type { Dispatch } from 'lib/types/redux-types';
import type { ThreadInfo } from 'lib/types/thread-types'; import type { ThreadInfo } from 'lib/types/thread-types';
import { import { dateString, dateFromString } from 'lib/utils/date-utils';
dateString,
dateFromString,
currentDateInTimeZone,
} from 'lib/utils/date-utils';
import LogInFirstModal from '../modals/account/log-in-first-modal.react'; import LogInFirstModal from '../modals/account/log-in-first-modal.react';
import HistoryModal from '../modals/history/history-modal.react'; import HistoryModal from '../modals/history/history-modal.react';
import ThreadPickerModal from '../modals/threads/thread-picker-modal.react'; import ThreadPickerModal from '../modals/threads/thread-picker-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import { htmlTargetFromEvent } from '../vector-utils'; import { htmlTargetFromEvent } from '../vector-utils';
import { AddVector, HistoryVector } from '../vectors.react'; import { AddVector, HistoryVector } from '../vectors.react';
import css from './calendar.css'; import css from './calendar.css';
import type { InnerEntry } from './entry.react'; import type { InnerEntry } from './entry.react';
import Entry from './entry.react'; import Entry from './entry.react';
type BaseProps = { type BaseProps = {
+dayString: string, +dayString: string,
+entryInfos: $ReadOnlyArray<EntryInfo>, +entryInfos: $ReadOnlyArray<EntryInfo>,
+startingTabIndex: number, +startingTabIndex: number,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
+onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>, +onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>,
+viewerID: ?string, +viewerID: ?string,
+loggedIn: boolean, +loggedIn: boolean,
+nextLocalID: number, +nextLocalID: number,
+timeZone: ?string,
+dispatch: Dispatch, +dispatch: Dispatch,
+pushModal: PushModal, +pushModal: PushModal,
+popModal: () => void, +popModal: () => void,
}; };
type State = { type State = {
+hovered: boolean, +hovered: boolean,
}; };
class Day extends React.PureComponent<Props, State> { class Day extends React.PureComponent<Props, State> {
state: State = { state: State = {
hovered: false, hovered: false,
}; };
entryContainer: ?HTMLDivElement; entryContainer: ?HTMLDivElement;
entryContainerSpacer: ?HTMLDivElement; entryContainerSpacer: ?HTMLDivElement;
actionLinks: ?HTMLDivElement; actionLinks: ?HTMLDivElement;
entries: Map<string, InnerEntry> = new Map(); entries: Map<string, InnerEntry> = new Map();
componentDidUpdate(prevProps: Props) { componentDidUpdate(prevProps: Props) {
if (this.props.entryInfos.length > prevProps.entryInfos.length) { if (this.props.entryInfos.length > prevProps.entryInfos.length) {
invariant(this.entryContainer, 'entryContainer ref not set'); invariant(this.entryContainer, 'entryContainer ref not set');
this.entryContainer.scrollTop = this.entryContainer.scrollHeight; this.entryContainer.scrollTop = this.entryContainer.scrollHeight;
} }
} }
render() { render() {
const now = currentDateInTimeZone(this.props.timeZone); const now = new Date();
const isToday = dateString(now) === this.props.dayString; const isToday = dateString(now) === this.props.dayString;
const tdClasses = classNames(css.day, { [css.currentDay]: isToday }); const tdClasses = classNames(css.day, { [css.currentDay]: isToday });
let actionLinks = null; let actionLinks = null;
const hovered = this.state.hovered; const hovered = this.state.hovered;
if (hovered) { if (hovered) {
const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`; const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`;
actionLinks = ( actionLinks = (
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Linesconst ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function ConnectedDay(props) { function ConnectedDay(props) {
const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector); const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector);
const viewerID = useSelector(state => state.currentUserInfo?.id); const viewerID = useSelector(state => state.currentUserInfo?.id);
const loggedIn = useSelector( const loggedIn = useSelector(
state => state =>
!!(state.currentUserInfo && !state.currentUserInfo.anonymous && true), !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
); );
const nextLocalID = useSelector(state => state.nextLocalID); const nextLocalID = useSelector(state => state.nextLocalID);
const timeZone = useSelector(state => state.timeZone);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { pushModal, popModal } = useModalContext(); const { pushModal, popModal } = useModalContext();
return ( return (
<Day <Day
{...props} {...props}
onScreenThreadInfos={onScreenThreadInfos} onScreenThreadInfos={onScreenThreadInfos}
viewerID={viewerID} viewerID={viewerID}
loggedIn={loggedIn} loggedIn={loggedIn}
nextLocalID={nextLocalID} nextLocalID={nextLocalID}
timeZone={timeZone}
dispatch={dispatch} dispatch={dispatch}
pushModal={pushModal} pushModal={pushModal}
popModal={popModal} popModal={popModal}
/> />
); );
}, },
); );
export default ConnectedDay; export default ConnectedDay;