Track Zone Project - Reusable Clock Form Project

demo/track-zone/src/components/shared/clock-actions/index.jsx

@@ -1,29 +1,58 @@
 import { useState } from 'react';
-
-const defaultOffsets = [
-	-11.5, -11, -10.5, -10, -9.5, -9, -8.5, -8, 0, 1, 2, 3, 4, 5, 5.5, 6, 6.5,
-];
+import ClockForm from '../clock-form';
 
 const ClockActions = ({ local = false, clock, updateClock }) => {
 	const [isEdit, setIsEdit] = useState(false);
+	const [isCreate, setIsCreate] = useState(false);
+
+	// const handleChange = (e) => {
+	// 	let { name, value } = e.target;
+	// 	if (name === 'offset') {
+	// 		value = Number(value) * 60;
+	// 	}
+	// 	updateClock({
+	// 		[name]: value,
+	// 	});
+	// 	console.log('Timezone Changed', name, value);
+	// };
 
-	const handleChange = (e) => {
-		let { name, value } = e.target;
-		if (name === 'offset') {
-			value = parseInt(value) * 60;
-		}
-		updateClock({
-			[name]: value,
-		});
-		console.log('Timezone Changed', name, value);
+	const handleClock = (values) => {
+		console.log(values);
 	};
 
 	return (
 		<div>
 			<button onClick={() => setIsEdit(!isEdit)}>Edit</button>
-			{local ? <button>Create</button> : <button>Delete</button>}
+			{local ? (
+				<button onClick={() => setIsCreate(!isCreate)}>Create</button>
+			) : (
+				<button>Delete</button>
+			)}
 			{isEdit && (
-				<div>
+				<>
+					<h3>Edit Clock</h3>
+					<ClockForm
+						values={clock}
+						handleClock={updateClock}
+						title={!local}
+						edit={true}
+					/>
+				</>
+			)}
+			{isCreate && (
+				<>
+					<h3>Create A New Clock</h3>
+					<ClockForm handleClock={handleClock} />
+				</>
+			)}
+		</div>
+	);
+};
+
+export default ClockActions;
+
+/*
+<div>
 					<input
 						type='text'
 						name='title'
@@ -57,9 +86,4 @@ const ClockActions = ({ local = false, clock, updateClock }) => {
 						</select>
 					)}
 				</div>
-			)}
-		</div>
-	);
-};
-
-export default ClockActions;
+*/

demo/track-zone/src/components/shared/clock-form/index.jsx

@@ -0,0 +1,104 @@
+/**
+ * 1. for local clock title won't be change
+ * 2. to create a new clock we have to create title, timezone, offset
+ * 3. for edit we will have title, timezone, offset
+ */
+
+import { useEffect, useState } from 'react';
+import { TIMEZONE_OFFSET } from '../../../constants/timezone';
+import { getOffset } from '../../../utils/timezone';
+
+// const values = {
+//   title: '',
+//   timezone: '',
+//   offset: 0
+// }
+
+const ClockForm = ({
+	values = { title: '', timezone: 'UTC', offset: 0 },
+	handleClock,
+	title = true,
+	edit = false,
+}) => {
+	const [formValues, setFormValues] = useState({ ...values });
+
+	useEffect(() => {
+		if (TIMEZONE_OFFSET[formValues.timezone]) {
+			setFormValues((prev) => ({
+				...prev,
+				offset: TIMEZONE_OFFSET[formValues.timezone],
+			}));
+		}
+	}, [formValues.timezone]);
+
+	const handleChange = (e) => {
+		let { name, value } = e.target;
+		if (name === 'offset') {
+			value = Number(value) * 60;
+		}
+
+		setFormValues((prev) => ({
+			...prev,
+			[name]: value,
+		}));
+	};
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		handleClock(formValues);
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<div>
+				<label htmlFor='title'>Enter Title</label>
+				<input
+					type='text'
+					id='title'
+					name='title'
+					value={formValues.title}
+					onChange={handleChange}
+					disabled={!title}
+				/>
+			</div>
+			<div>
+				<label htmlFor='timezone'>Enter Timezone</label>
+				<select
+					id='timezone'
+					name='timezone'
+					value={formValues.timezone}
+					onChange={handleChange}
+				>
+					<option value='GMT'>GMT</option>
+					<option value='UTC'>UTC</option>
+					<option value='PST'>PST</option>
+					<option value='EST'>EST</option>
+					<option value='EDT'>EDT</option>
+					<option value='BST'>BST</option>
+					<option value='MST'>MST</option>
+				</select>
+			</div>
+			{(formValues.timezone === 'GMT' ||
+				formValues.timezone === 'UTC') && (
+				<div>
+					<label htmlFor='offset'>Enter Offset</label>
+					<select
+						id='offset'
+						name='offset'
+						value={formValues.offset / 60}
+						onChange={handleChange}
+					>
+						{getOffset().map((offset) => (
+							<option key={offset} value={offset}>
+								{offset}
+							</option>
+						))}
+					</select>
+				</div>
+			)}
+			<button>{edit ? 'Update' : 'Create'}</button>
+		</form>
+	);
+};
+
+export default ClockForm;

demo/track-zone/src/constants/timezone.js

@@ -0,0 +1,7 @@
+export const TIMEZONE_OFFSET = {
+	PST: -7 * 60,
+	EST: -4 * 60,
+	EDT: -4 * 60,
+	BST: 1 * 60,
+	MST: -6 * 60,
+};

demo/track-zone/src/hooks/useClock.jsx

@@ -1,13 +1,6 @@
 import { useEffect, useState } from 'react';
 import { addMinutes } from 'date-fns';
-
-const TIMEZONE_OFFSET = {
-	PST: -7 * 60,
-	EST: -4 * 60,
-	EDT: -4 * 60,
-	BST: 1 * 60,
-	MST: -6 * 60,
-};
+import { TIMEZONE_OFFSET } from '../constants/timezone';
 
 const useClock = (timezone, offset) => {
 	const [localDate, setLocalDate] = useState(null);

demo/track-zone/src/utils/timezone.js

@@ -0,0 +1,13 @@
+import { TIMEZONE_OFFSET } from '../constants/timezone';
+
+export const getOffset = (start = -11.5, ending = 12) => {
+	const offsets = [];
+	for (let i = start; i <= ending; i += 0.5) {
+		offsets.push(i);
+	}
+	return offsets;
+};
+
+export const getTimezone = () => {
+	return ['UTC', 'GMT', ...Object.keys(TIMEZONE_OFFSET)];
+};