mark row as available updates ui properly

lilith · Feb 16, 2024 · ef66d9e · ef66d9e
1 parent 02e1a09
commit ef66d9e
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 171 deletions.
diff --git a/src/lib/components/Calendar/Editor.svelte b/src/lib/components/Calendar/Editor.svelte
@@ -25,18 +25,22 @@
 
 	const clickOnSave = async () => {
 		try {
-			await markRowAsAvailable({
+			const newRow = await markRowAsAvailable({
 				unsavedRow: unsavedRows[i],
 				timeZone
 			});
-			dispatch('markedRow');
+
+			dispatch('markedRow', {
+				i,
+				newRow
+			});
 		} catch (err) {
 			console.log(err);
 			if (!(err instanceof Response)) {
 				dispatch('markBadTime');
 			}
 
-			// alert('Something went wrong with saving'); // TODO: come up with better UI for showing err
+			alert('Something went wrong with saving'); // TODO: come up with better UI for showing err
 			console.error('Something went wrong with marking row as available', err);
 		}
 	};

diff --git a/src/lib/components/Calendar/ScheduleTable.svelte b/src/lib/components/Calendar/ScheduleTable.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
 	import { EMOTICONS_REVERSE } from '$lib/constants';
-	import {
-		getRowColor,
-		isAvailableOnRow,
-		markRowUnavailableLocally,
-		requestToMarkOneRow
-	} from '$lib/logics/Calendar/ScheduleTable/logic';
+	import { getRowColor, isAvailableOnRow } from '$lib/logics/Calendar/ScheduleTable/logic';
+	import { requestToMarkOneRow } from '$lib/logics/Calendar/_shared/utils';
 	import type { Row, Unavailable } from '$lib/types';
 	import { AvailabilityStatus } from '@prisma/client';
 	import { createEventDispatcher, tick } from 'svelte';
@@ -174,7 +170,10 @@
 						row: { ...displayedRows[i], emoticons: e.detail }
 					});
 				}}
-				on:markedRow={() => dispatch('markedRow')}
+				on:markedRow={(e) => {
+					dispatch('markedRow:available', e.detail);
+					closeEditor(i);
+				}}
 			/>
 		{/if}
 	{/each}
@@ -183,15 +182,14 @@
 <style>
 	table {
 		border-collapse: collapse;
-		border: 1px solid #dddddd;
 	}
 	#schedule {
 		width: 100%;
 	}
 	#schedule td {
 		padding: 0.4rem 0rem;
 		text-align: center;
-		border-right: 1px solid #dddddd;
+		border: 1px solid #dddddd;
 	}
 	#schedule td.day,
 	#schedule td.date {

diff --git a/src/lib/logics/Calendar/Editor/logic.ts b/src/lib/logics/Calendar/Editor/logic.ts
@@ -2,8 +2,8 @@ import { destructRange } from '$lib/parse';
 import type { Row } from '$lib/types';
 import { AvailabilityStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
-import { requestToMarkOneRow } from '../ScheduleTable/logic';
-import type { AvailRangeParts } from '../Wrapper/types';
+import type { AvailRangeParts } from '../_shared/types';
+import { requestToMarkOneRow, extractAvailRange } from '../_shared/utils';
 
 export const toggleEmoticon = ({
 	i,
@@ -130,7 +130,7 @@ export const markRowAsAvailable = async ({
 	const startTime = availabilityValidation.val.startTime;
 	const endTime = availabilityValidation.val.endTime;
 
-	await requestToMarkOneRow({
+	const newRowContents = await requestToMarkOneRow({
 		status: AvailabilityStatus.AVAILABLE,
 		displayedRow: unsavedRow,
 		availableDetails: {
@@ -139,4 +139,18 @@ export const markRowAsAvailable = async ({
 			availRangeParts
 		}
 	});
+
+	return {
+		...unsavedRow,
+		notes: newRowContents.notes,
+		availRange: extractAvailRange({
+			dbDate: {
+				status: AvailabilityStatus.AVAILABLE,
+				startTime: new Date(newRowContents.startTime),
+				endTime: new Date(newRowContents.endTime)
+			},
+			timeZone
+		}),
+		...destructRange(unsavedRow.availRange)
+	};
 };
diff --git a/src/lib/logics/Calendar/ScheduleTable/logic.ts b/src/lib/logics/Calendar/ScheduleTable/logic.ts
@@ -1,9 +1,7 @@
 import type { Row, Unavailable } from '$lib/types';
 import { writeReq } from '$lib/utils';
 import { AvailabilityStatus } from '@prisma/client';
-import type { DateTime } from 'luxon';
 import { tick } from 'svelte';
-import type { AvailRangeParts } from '../Wrapper/types';
 import { UNAVAILABLE } from '../_shared/constants';
 import { LIGHT_BLUE, LIGHT_GRAY, WHITE } from './constants';
 
@@ -28,28 +26,6 @@ export const getRowColor = ({
 export const isAvailableOnRow = (row: Row) =>
 	!!row.availRange && !UNAVAILABLE.includes(row.availRange);
 
-export const updateRowColors = ({
-	rowColors,
-	rows,
-	expandedRowInds
-}: {
-	rowColors: string[];
-	rows: Row[];
-	expandedRowInds: Set<number>;
-}) => {
-	const numRows = rows.length;
-	[...Array(21).keys()].map((_, i) => {
-		tick().then(() => {
-			rowColors[i] = getRowColor({
-				i,
-				numRows,
-				isAvailable: isAvailableOnRow(rows[i]),
-				isRowExpanded: expandedRowInds.has(i)
-			});
-		});
-	});
-};
-
 export const markRowUnavailableLocally = ({
 	i,
 	displayedRows,
@@ -65,113 +41,13 @@ export const markRowUnavailableLocally = ({
 	return displayedRows;
 };
 
-// const updateDisplayedRow = async ({
-// 	i,
-// 	response,
-// 	startTime,
-// 	endTime,
-// 	status,
-// 	displayedRows,
-// 	dbRows,
-// 	availRangeParts
-// }: {
-// 	i: number;
-// 	response: Response;
-// 	startTime: DateTime;
-// 	endTime: DateTime;
-// 	status: AvailabilityStatus;
-// 	displayedRows: Row[];
-// 	dbRows: Row[];
-// 	availRangeParts: AvailRangeParts;
-// }) => {
-// 	await invalidate('data:calendar');
-// 	const { notes } = await response.json();
-// 	let newAvailRange: AvailabilityStatus | string = status;
-// 	if (status === AvailabilityStatus.AVAILABLE)
-// 		newAvailRange = `${dateTo12Hour(startTime.toLocal())}-${dateTo12Hour(endTime.toLocal())}`;
-
-// 	displayedRows[i] = {
-// 		...displayedRows[i],
-// 		notes,
-// 		availRange: newAvailRange,
-// 		...availRangeParts
-// 	};
-// 	dbRows[i] = { ...displayedRows[i] };
-
-// 	// updateRowColors();
-// };
-
-export const requestToMarkOneRow = async ({
-	status,
-	displayedRow,
-	availableDetails
-}: {
-	status: AvailabilityStatus;
-	displayedRow: Row;
-	availableDetails: {
-		startTime: DateTime;
-		endTime: DateTime;
-		availRangeParts: AvailRangeParts;
-	} | null;
-}) => {
-	const response = await writeReq('/db', {
-		type: 'upsertDate',
-		status,
-		notes: displayedRow.notes,
-		emoticons: Array.from(displayedRow.emoticons).join(','),
-		monthDay: displayedRow.monthDay,
-		...(status === AvailabilityStatus.AVAILABLE && !!availableDetails
-			? {
-					startTime: availableDetails.startTime.toJSDate(),
-					endTime: availableDetails.endTime.toJSDate()
-			  }
-			: {})
-	});
-
-	const payload = await response.json()
-	if (response.status === 200) return payload;
-
-	throw new Error((payload as Error).message);
-};
-
 const requestToMarkMultipleRowsAsBusy = async (monthDays: string[]) => {
 	await writeReq('/db', {
 		type: 'scheduleMultipleBusy',
 		days: monthDays
 	});
 };
 
-// export const markRowAsUnavailable = async ({
-// 	i,
-// 	displayedRows,
-// 	// dbRows,
-// 	openedRows,
-// 	status
-// }: {
-// 	i: number;
-// 	displayedRows: Row[];
-// 	// dbRows: Row[];
-// 	openedRows: Set<number>;
-// 	status: Unavailable;
-// }) => {
-// 	markRowUnavailableLocally({ i, displayedRows, status });
-
-// 	// try {
-// 	// 	await requestToMarkOneRow({
-// 	// 		i,
-// 	// 		status,
-// 	// 		// dbRows,
-// 	// 		displayedRows,
-// 	// 		availableDetails: null
-// 	// 	});
-// 	// 	closeEditor({ i, openedRows });
-// 	// } catch (err) {
-// 	// 	console.error(err);
-// 	// 	console.error('Something went wrong with marking row as unavailable');
-// 	// 	throw new Error();
-// 	// }
-// };
-
 export const markUnspecifiedRowsAsBusy = async ({
 	displayedRows,
 	dbRows

diff --git a/src/lib/logics/Calendar/Wrapper/logic.ts b/src/lib/logics/Calendar/Wrapper/logic.ts
@@ -1,28 +1,12 @@
 import { DAYS } from '$lib/constants';
-import type { Row } from '$lib/types';
-import { dateTo12Hour, toLocalTimezone } from '$lib/date';
 import { destructRange } from '$lib/parse';
-
-import { UNAVAILABLE } from '$lib/logics/Calendar/_shared/constants';
+import type { Row } from '$lib/types';
 import { AvailabilityStatus, type AvailabilityDate } from '@prisma/client';
+import { UNAVAILABLE } from '../_shared/constants';
+import { extractAvailRange } from '../_shared/utils';
 import type { AvailabilityDates } from './types';
 
-const extractAvailRange = ({
-	dbDate,
-	timeZone
-}: {
-	dbDate: AvailabilityDate;
-	timeZone: string;
-}) => {
-	if (UNAVAILABLE.includes(dbDate.status) || !dbDate.startTime || !dbDate.endTime)
-		return dbDate.status;
-
-	return `${dateTo12Hour(toLocalTimezone(dbDate.startTime, timeZone))}-${dateTo12Hour(
-		toLocalTimezone(dbDate.endTime, timeZone)
-	)}`;
-};
-
-const initRow = ({
+const convertAvailabilityDateToRow = ({
 	dbDate,
 	timeZone
 }: {
@@ -69,7 +53,7 @@ const initRow = ({
 /*
   init rows with next 21 days, including today
 */
-const initRows = ({dbDates, timeZone}: { dbDates: AvailabilityDates; timeZone: string }) => {
+const initRows = ({ dbDates, timeZone }: { dbDates: AvailabilityDates; timeZone: string }) => {
 	const now = new Date();
 	return [...Array(21).keys()].map((x) => {
 		const date = new Date(new Date().setDate(now.getDate() + x));
@@ -79,7 +63,7 @@ const initRows = ({dbDates, timeZone}: { dbDates: AvailabilityDates; timeZone: s
 		return {
 			englishDay,
 			monthDay,
-			...initRow({dbDate: dbDates?.[monthDay], timeZone})
+			...convertAvailabilityDateToRow({ dbDate: dbDates?.[monthDay], timeZone })
 		};
 	});
 };
@@ -92,12 +76,10 @@ export const initVals = (dbVals: { dbDates: AvailabilityDates; timeZone: string
 		emoticons: new Set(r.emoticons)
 		// availRange: r.availRange === 'Busy' ? '' : r.availRange // edit on “busy” clears text box
 	}));
-	const unsavedInds: number[] = [];
 
 	return {
 		dbRows,
 		rowsOnMount,
 		displayedRows,
-		unsavedInds
 	};
 };
diff --git a/src/lib/logics/Calendar/Wrapper/types.ts b/src/lib/logics/Calendar/Wrapper/types.ts
@@ -14,10 +14,3 @@ import type { AvailabilityDate } from '@prisma/client';
 export type AvailabilityDates = {
 	[key: string]: AvailabilityDate;
 };
-
-export type AvailRangeParts = {
-	startHr?: number;
-	startMin?: number;
-	endHr?: number;
-	endMin?: number;
-};
diff --git a/src/lib/logics/Calendar/_shared/types.ts b/src/lib/logics/Calendar/_shared/types.ts
@@ -11,3 +11,10 @@ export type CircleInfo = {
 		};
 	}[];
 }[];
+
+export type AvailRangeParts = {
+	startHr?: number;
+	startMin?: number;
+	endHr?: number;
+	endMin?: number;
+};