Skip to content

Commit 038c9aa

Browse files
tyler-danetyler-dane
committed
feat(checkpoint): use more global state
partially working. here is what's wrong - resizing: opens new draft - C shortcut sometimes gets the wrong width - when clicking out, the original draft is still in dragging state
1 parent 2258ab2 commit 038c9aa

File tree

15 files changed

+175
-76
lines changed

15 files changed

+175
-76
lines changed

‎packages/web/src/common/constants/web.constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const GOOGLE = "google";
88
export const ID_ALLDAY_COLUMNS = "allDayColumns";
99
export const ID_EVENT_FORM = "Event Form";
1010
export const ID_GRID_ALLDAY_CONTAINER = "allDayRowContainer";
11-
export const ID_GRID_ALLDAY_ROW = "allDayRow";
11+
export const ID_GRID_EVENTS_ALLDAY = "allDayEvents";
1212
export const ID_GRID_EVENTS_TIMED = "timedEvents";
1313
export const ID_GRID_MAIN = "mainGrid";
1414
export const ID_GRID_ROW = "gridRow";

‎packages/web/src/common/types/web.event.types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,18 @@ export interface Schema_SomedayEventsColumn {
5454
}
5555

5656
type Activity = "createShortcut" | "dragging" | "gridClick" | "resizing";
57+
58+
export enum Location_Draft {
59+
ALLDAY_ROW = "alldayRow",
60+
ALLDAY_EVENT = "alldayEvent",
61+
MAIN_GRID = "mainGrid",
62+
MAIN_GRID_EVENT = "mainGridEvent",
63+
}
64+
5765
export interface Status_DraftEvent {
5866
activity: Activity | null;
5967
eventType: Categories_Event | null;
6068
isDrafting: boolean;
6169
dateToResize: "startDate" | "endDate" | null;
70+
location: Location_Draft | null;
6271
}

‎packages/web/src/common/utils/draft/draft.util.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { MouseEvent } from "react";
22
import dayjs, { Dayjs } from "dayjs";
33
import {
4-
ID_GRID_ALLDAY_ROW,
4+
ID_GRID_EVENTS_ALLDAY,
55
ID_GRID_EVENTS_TIMED,
66
} from "@web/common/constants/web.constants";
77
import { roundToNext } from "@web/common/utils";
@@ -72,7 +72,7 @@ export const getDraftTimes = (isCurrentWeek: boolean, startOfWeek: Dayjs) => {
7272

7373
export const getDraftContainer = (isAllDay: boolean) => {
7474
if (isAllDay) {
75-
return getElemById(ID_GRID_ALLDAY_ROW);
75+
return getElemById(ID_GRID_EVENTS_ALLDAY);
7676
}
7777

7878
return getElemById(ID_GRID_EVENTS_TIMED);

‎packages/web/src/ducks/events/selectors/draft.selectors.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const selectDraftStatus = (state: RootState) =>
77
state.events.draft.status;
88

99
export const selectIsDrafting = (state: RootState) =>
10-
state.events.draft.status.isDrafting;
10+
state.events.draft.status?.isDrafting;
1111

1212
export const selectIsDraftingExisting = (state: RootState) =>
1313
state.events.draft.event?._id !== undefined;
@@ -16,8 +16,14 @@ export const selectIsDraftingSomeday = (state: RootState) =>
1616
state.events.draft.status.eventType === Categories_Event.SOMEDAY_WEEK ||
1717
state.events.draft.status.eventType === Categories_Event.SOMEDAY_MONTH;
1818

19+
export const selectIsDragging = (state: RootState) =>
20+
state.events.draft.status?.activity === "dragging";
21+
1922
export const selectIsResizing = (state: RootState) =>
2023
state.events.draft.status?.activity === "resizing";
2124

2225
export const selectDraftId = (state: RootState) =>
2326
state.events.draft.event?._id;
27+
28+
export const selectDraftLocation = (state: RootState) =>
29+
state.events.draft.status?.location;

‎packages/web/src/ducks/events/slices/draft.slice.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Action_DraftEvent,
77
Action_Draft_Resize,
88
Action_Draft_Swap,
9+
Action_Location_Set,
910
} from "./draft.slice.types";
1011

1112
interface State_DraftEvent {
@@ -19,6 +20,7 @@ const initialDraft = {
1920
isDrafting: false,
2021
eventType: null,
2122
dateToResize: null,
23+
location: null,
2224
},
2325
event: null,
2426
};
@@ -74,5 +76,11 @@ export const draftSlice = createSlice({
7476
eventType: category,
7577
};
7678
},
79+
setLocation: (state, action: Action_Location_Set) => {
80+
const { location } = action.payload;
81+
if (state.status) {
82+
state.status.location = location;
83+
}
84+
},
7785
},
7886
});

‎packages/web/src/ducks/events/slices/draft.slice.types.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { Action } from "redux";
22
import { Schema_Event, Categories_Event } from "@core/types/event.types";
3-
import { Schema_GridEvent } from "@web/common/types/web.event.types";
3+
import {
4+
Location_Draft,
5+
Schema_GridEvent,
6+
} from "@web/common/types/web.event.types";
47

58
export interface Action_DraftEvent extends Action {
69
payload: Payload_DraftEvent;
@@ -17,6 +20,10 @@ export interface Action_Draft_Swap extends Action {
1720
payload: Payload_Draft_Swap;
1821
}
1922

23+
export interface Action_Location_Set extends Action {
24+
payload: Payload_Location_Set;
25+
}
26+
2027
interface Payload_Draft_Drag {
2128
event: Schema_Event;
2229
}
@@ -36,3 +43,7 @@ interface Payload_Draft_Swap {
3643
event: Schema_GridEvent;
3744
category: Categories_Event;
3845
}
46+
47+
interface Payload_Location_Set {
48+
location: Location_Draft;
49+
}

‎packages/web/src/views/Calendar/components/Event/styled.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
6767
6868
user-select: none;
6969
width: ${(props) => props.width}px;
70-
z-index: ${ZIndex.LAYER_1};
7170
7271
&:hover {
7372
transition: background-color 0.35s linear;

‎packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface Props {
2020
startOfView: WeekProps["component"]["startOfView"];
2121
endOfView: WeekProps["component"]["endOfView"];
2222
onClick: (e: MouseEvent, event: Schema_GridEvent) => void;
23+
onMouseDown: (e: MouseEvent, event: Schema_GridEvent) => void;
2324
}
2425

2526
const AllDayEvent = ({
@@ -29,6 +30,7 @@ const AllDayEvent = ({
2930
startOfView,
3031
endOfView,
3132
onClick,
33+
onMouseDown,
3234
}: Props) => {
3335
const position = getEventPosition(
3436
event,
@@ -42,6 +44,7 @@ const AllDayEvent = ({
4244

4345
return (
4446
<StyledEvent
47+
id={`${event.title}-${event._id}`}
4548
allDay={event.isAllDay || true}
4649
height={position.height}
4750
isDragging={false}
@@ -52,6 +55,7 @@ const AllDayEvent = ({
5255
left={position.left}
5356
lineClamp={1}
5457
onClick={(e: MouseEvent) => onClick(e, event)}
58+
onMouseDown={(e: MouseEvent) => onMouseDown(e, event)}
5559
priority={event.priority || Priorities.UNASSIGNED}
5660
role="button"
5761
top={position.top}

‎packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvents.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { MouseEvent } from "react";
2-
import { ID_GRID_ALLDAY_ROW } from "@web/common/constants/web.constants";
2+
import { ID_GRID_EVENTS_ALLDAY } from "@web/common/constants/web.constants";
33
import { Schema_GridEvent } from "@web/common/types/web.event.types";
44
import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
55
import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
@@ -20,12 +20,14 @@ interface Props {
2020
startOfView: WeekProps["component"]["startOfView"];
2121
endOfView: WeekProps["component"]["endOfView"];
2222
onClick: (e: MouseEvent, event: Schema_GridEvent) => Promise<void>;
23+
onMouseDown: (e: MouseEvent, event: Schema_GridEvent) => void;
2324
}
2425
export const AllDayEvents = ({
2526
measurements,
2627
startOfView,
2728
endOfView,
2829
onClick,
30+
onMouseDown,
2931
}: Props) => {
3032
// const dispatch = useAppDispatch();
3133
const allDayEvents = useAppSelector(selectAllDayEvents);
@@ -54,7 +56,7 @@ export const AllDayEvents = ({
5456
// };
5557

5658
return (
57-
<StyledEvents id={ID_GRID_ALLDAY_ROW}>
59+
<StyledEvents id={ID_GRID_EVENTS_ALLDAY}>
5860
{allDayEvents.map((event: Schema_GridEvent, i) => {
5961
return (
6062
<AllDayEventMemo
@@ -65,6 +67,7 @@ export const AllDayEvents = ({
6567
endOfView={endOfView}
6668
measurements={measurements}
6769
onClick={onClick}
70+
onMouseDown={onMouseDown}
6871
/>
6972
);
7073
})}

‎packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayRow.tsx‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,14 @@ import { isEventFormOpen } from "@web/common/utils";
2020
import { StyledGridCol } from "../Columns/styled";
2121
import { StyledAllDayColumns, StyledAllDayRow } from "./styled";
2222
import { AllDayEvents } from "./AllDayEvents";
23-
import { Schema_GridEvent } from "@web/common/types/web.event.types";
24-
import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors";
23+
import {
24+
Location_Draft,
25+
Schema_GridEvent,
26+
} from "@web/common/types/web.event.types";
27+
import {
28+
selectIsDrafting,
29+
selectIsDragging,
30+
} from "@web/ducks/events/selectors/draft.selectors";
2531

2632
interface Props {
2733
dateCalcs: DateCalcs;
@@ -43,19 +49,42 @@ export const AllDayRow: FC<Props> = ({
4349
const { startOfView, weekDays } = weekProps.component;
4450
const rowsCount = useAppSelector(selectRowCount);
4551
const isDrafting = useAppSelector(selectIsDrafting);
52+
const isDragging = useAppSelector(selectIsDragging);
4653

4754
useEffect(() => {
4855
measurements.remeasure(ID_GRID_MAIN);
4956
// eslint-disable-next-line react-hooks/exhaustive-deps
5057
}, [rowsCount]);
5158

59+
const onMouseDown = (e: MouseEvent, event: Schema_GridEvent) => {
60+
// e.stopPropagation();
61+
dispatch(
62+
draftSlice.actions.setLocation({ location: Location_Draft.ALLDAY_EVENT })
63+
);
64+
65+
if (isEventFormOpen()) {
66+
console.log("swapping...");
67+
draftSlice.actions.swap({ event, category: Categories_Event.ALLDAY });
68+
return;
69+
}
70+
editAllDayEvent(event);
71+
};
72+
73+
const editAllDayEvent = (event: Schema_GridEvent) => {
74+
dispatch(
75+
draftSlice.actions.startDragging({
76+
event,
77+
})
78+
);
79+
};
80+
5281
const openAlldayDraft = async (e: MouseEvent, event: Schema_GridEvent) => {
5382
e.stopPropagation();
83+
dispatch(draftSlice.actions.setLocation({ location: "alldayEvent" }));
5484

5585
if (isDrafting) {
5686
console.log("todo: close draft");
5787
} else {
58-
console.log("opening draft for:", event.title);
5988
dispatch(
6089
draftSlice.actions.start({
6190
activity: "gridClick",
@@ -88,21 +117,8 @@ export const AllDayRow: FC<Props> = ({
88117
);
89118
};
90119

91-
const onSectionMouseDown = async (e: MouseEvent) => {
92-
if (isEventFormOpen()) {
93-
dispatch(draftSlice.actions.discard());
94-
return;
95-
}
96-
97-
await startNewAlldayDraft(e);
98-
};
99-
100120
return (
101-
<StyledAllDayRow
102-
id={ID_GRID_ALLDAY_CONTAINER}
103-
rowsCount={rowsCount}
104-
// onMouseDown={onSectionMouseDown}
105-
>
121+
<StyledAllDayRow id={ID_GRID_ALLDAY_CONTAINER} rowsCount={rowsCount}>
106122
<StyledAllDayColumns id={ID_ALLDAY_COLUMNS} ref={allDayRef}>
107123
{weekDays.map((day) => (
108124
<StyledGridCol color={null} key={day.format(YEAR_MONTH_DAY_FORMAT)} />
@@ -113,6 +129,7 @@ export const AllDayRow: FC<Props> = ({
113129
startOfView={weekProps.component.startOfView}
114130
endOfView={weekProps.component.endOfView}
115131
onClick={openAlldayDraft}
132+
onMouseDown={onMouseDown}
116133
/>
117134
</StyledAllDayRow>
118135
);

0 commit comments

Comments
 (0)