Skip to content

Commit

Permalink
Removed unused dependencies & fixed formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@ya5er
ya5er committed Jul 8, 2024
1 parent a51b21e commit b257b5b
Showing 1 changed file with 87 additions and 91 deletions.
178 changes: 87 additions & 91 deletions frontend/src/components/pages/tasks/TaskModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,8 @@ import {
Flex,
FormControl,
FormLabel,
InputRightElement,
InputGroup,
Checkbox,
Container,
} from "@chakra-ui/react";
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import { TbTrash } from "react-icons/tb";

import ModalContainer from "../../common/ModalContainer";
import FormField from "../../common/FormField";
Expand All @@ -26,18 +20,18 @@ type Props = {

const generateOptions = () => {
const options = [];
for (let hour = 0; hour < 24; hour+=1) {
for (let hour = 0; hour < 24; hour += 1) {
for (let minute = 0; minute < 60; minute += 30) {
let formattedHour;
if (hour === 0) {
formattedHour = "12";
} else if (hour > 12) {
formattedHour = `${hour - 12}`;
} else{
} else {
formattedHour = `${hour}`;
}
const ampm = hour < 12 ? 'am' : 'pm';
const formattedMinute = minute.toString().padStart(2, '0');
const ampm = hour < 12 ? "am" : "pm";
const formattedMinute = minute.toString().padStart(2, "0");
options.push(`${formattedHour}:${formattedMinute}${ampm}`);
}
}
Expand Down Expand Up @@ -67,78 +61,77 @@ const DateInput = ({
setRecurrenceFrequency: React.Dispatch<React.SetStateAction<string>>;
submitPressed: boolean;
}) => {
return(
<Flex flexDir="column" flex="1">
<FormControl isRequired>
<FormLabel mb="5px" color="gray.main" fontWeight="700">
Due Date
</FormLabel>
<Flex flexDir="column">
<Flex flexDir="row">

<Input
variant="primary"
mb={3}
borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
boxShadow={
submitPressed && !dueTime ? "0 0 2px red.error" : "none"
}
type="date"
value={dueDate}
width="200px"
onChange={(e) => setDueDate(e.target.value)}
/>

<Text paddingX="10px" paddingY="4px">at</Text>
<Select
variant="primary"
value={dueTime}
onChange={(e) => setDueTime(e.target.value)}
border="solid"
borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
boxShadow={
submitPressed && !dueTime ? "0 0 2px red.error" : "none"
}
borderWidth="2px"
height="34px"
width="200px"
>
<option value="">Select...</option>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</Select>

</Flex>
<Flex alignItems="center">
<Checkbox
w="200px"
isChecked={isAllDay}
onChange={(e) => setIsAllDay(e.target.checked)}
m={0}
>
All Day
</Checkbox>
<Select
variant="primary"
value={recurrenceFrequency}
onChange={(e) => setRecurrenceFrequency(e.target.value)}
border="solid"
borderColor="gray.300"
borderWidth="2px"
height="34px"
>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="biWeekly">Bi-Weekly</option>
</Select>
return (
<Flex flexDir="column" flex="1">
<FormControl isRequired>
<FormLabel mb="5px" color="gray.main" fontWeight="700">
Due Date
</FormLabel>
<Flex flexDir="column">
<Flex flexDir="row">
<Input
variant="primary"
mb={3}
borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
boxShadow={
submitPressed && !dueTime ? "0 0 2px red.error" : "none"
}
type="date"
value={dueDate}
width="200px"
onChange={(e) => setDueDate(e.target.value)}
/>
<Text paddingX="10px" paddingY="4px">
at
</Text>
<Select
variant="primary"
value={dueTime}
onChange={(e) => setDueTime(e.target.value)}
border="solid"
borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
boxShadow={
submitPressed && !dueTime ? "0 0 2px red.error" : "none"
}
borderWidth="2px"
height="34px"
width="200px"
>
<option value="">Select...</option>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</Select>
</Flex>
<Flex alignItems="center">
<Checkbox
w="200px"
isChecked={isAllDay}
onChange={(e) => setIsAllDay(e.target.checked)}
m={0}
>
All Day
</Checkbox>
<Select
variant="primary"
value={recurrenceFrequency}
onChange={(e) => setRecurrenceFrequency(e.target.value)}
border="solid"
borderColor="gray.300"
borderWidth="2px"
height="34px"
>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="biWeekly">Bi-Weekly</option>
</Select>
</Flex>
</Flex>
</Flex>
</FormControl>
</Flex>
);
</FormControl>
</Flex>
);
};

const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
Expand All @@ -148,7 +141,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
const [dueTime, setDueTime] = useState("");
const [isAllDay, setIsAllDay] = useState(false);
const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
const [marillacBucks, setMarillacBucks] = useState('');
const [marillacBucks, setMarillacBucks] = useState("");

const [submitPressed, setSubmitPressed] = useState(false);

Expand All @@ -173,21 +166,24 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
};

const handleMoneyInput = () => {
const inputValue = marillacBucks.replace(/[^0-9.]/g, ''); // Remove non-numeric and non-period characters
const inputValue = marillacBucks.replace(/[^0-9.]/g, ""); // Remove non-numeric and non-period characters

if (inputValue) {
const numberValue = parseFloat(inputValue).toFixed(2);
setMarillacBucks(numberValue);
}
};

// delete task api stuff
const handleDelete = () => {

}
const handleDelete = () => {};

return (
<ModalContainer title="Edit Chore" isOpen={isOpen} setIsOpen={setIsOpen} onDelete={handleDelete}>
<ModalContainer
title="Edit Chore"
isOpen={isOpen}
setIsOpen={setIsOpen}
onDelete={handleDelete}
>
<Flex flexDir="column" gap="20px">
<FormField
label="Task Name"
Expand Down Expand Up @@ -249,8 +245,8 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
Cancel
</Button>
<Button variant="primary" onClick={ () => {
handleSubmit();
setIsOpen(false);
handleSubmit();
setIsOpen(false);
}}
>
Save
Expand All @@ -261,4 +257,4 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
);
};

export default TaskModal;
export default TaskModal;

0 comments on commit b257b5b

Please sign in to comment.