Index: jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,161 @@
+import React, {useEffect, useState} from "react";
+import "./Form.css";
+
+import 'react-responsive-modal/styles.css';
+import {Modal} from 'react-responsive-modal';
+import Select from "react-select";
+
+//Validation
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {Controller, useForm} from "react-hook-form";
+
+
+import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
+import {useDispatch, useSelector} from "react-redux";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+
+
+export const EditJobAdModal = (jobAd) => {
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    const schema = yup.object().shape({
+        title: yup.string().required("Please enter a title"),
+        description: yup.string().required("Please enter a description"),
+        industry: yup.mixed().required("Select industry"),
+        startingSalary: yup.number().required("Please enter the starting salary"),
+        jobType: yup.mixed().required("Select job type"),
+        employmentStatus: yup.mixed().required("Select employment status"),
+    })
+
+    const {register, handleSubmit, control, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+    const editJobAdvertisement = async (values) => {
+        try {
+            dispatch(JobAdvertisementActions.editJobAdvertisement(
+                {
+                    email: auth.email,
+                    title: values.title,
+                    description: values.description,
+                    industry: values.industry.value,
+                    startingSalary: values.startingSalary,
+                    activeUntil: values.date,
+                    jobType: values.jobType.value,
+                    employmentStatus: values.employmentStatus.value,
+                }, jobAd.props.id, (success, response) => {
+                    if(success) {
+                        console.log("Job Advertisement edited")
+                        toggleModal()
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    let minimumDate = new Date();
+    minimumDate.setDate(minimumDate.getDate() + 1);
+
+    return (<div className="modal-wrap">
+
+        <i className="fa-solid fa-pen-to-square pen-edit-btn" onClick={() => {
+            // setSelectedRecord(record);
+                toggleModal()
+        }}></i>
+        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+            <div className="head-modal">
+                <h3>Edit Job Advertisement</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
+
+            <div className="modal-content">
+                <form onSubmit={handleSubmit(editJobAdvertisement)}>
+                    <div className="row">
+                        <div className="col-md-7">
+                            <label className="label">Job title:</label>
+                            <input type="text" defaultValue={jobAd.props.title} {...register("title")}/>
+                            <p style={{color: "red"}}>{errors.title?.message}</p>
+
+                            <label className="label">Job description:</label>
+                            <textarea type="text" defaultValue={jobAd.props.description} placeholder="Describe the job position and all the requirements"
+                                      className="description-textarea" {...register("description")}/>
+                            <p style={{color: "red"}}>{errors.description?.message}</p>
+                        </div>
+
+                        <div className="col-md-5">
+                            <label className="label">Hourly rate:</label>
+                            <input defaultValue={jobAd.props.startingSalary} {...register("startingSalary")}/>
+                            <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
+
+                            <label className="label">Industry:</label>
+                            <Controller
+                                name="industry"
+                                control={control}
+                                defaultValue={{
+                                    label: jobAd.props.industry,
+                                    value: jobAd.props.industry
+                                }}
+                                render={({ field })  => (<Select
+                                    {...field}
+                                    options={industryOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.industry?.message}</p>
+
+                            <label className="label">Job type:</label>
+                            <Controller
+                                name="jobType"
+                                control={control}
+                                defaultValue={{
+                                    value: jobAd.props.jobType,
+                                    label: jobAd.props.jobType==="JOB" ? "Job" : "Internship"
+                                }}
+                                render={({ field }) => (
+                                    <Select
+                                    {...field}
+                                    options={jobTypeOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.jobType?.message}</p>
+
+                            <label className="label">Employment status</label>
+                            <Controller
+                                name="employmentStatus"
+                                control={control}
+                                defaultValue={{
+                                    value: jobAd.props.employmentStatus,
+                                    label: jobAd.props.employmentStatus==="FULL_TIME" ? "Full time" : "Part time"
+                                }}
+                                render={({ field }) => (
+                                    <Select
+                                    {...field}
+                                    options={employmentStatusOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.employmentStatus?.message}</p>
+
+                            <label htmlFor="start">Active until:</label>
+                            <input type="date" defaultValue={new Date(jobAd.props.activeUntil).toLocaleDateString('en-CA')}
+                                   min={minimumDate.toLocaleDateString('en-CA')} onChange={(event) => console.log(event.target.value)}
+                                   {...register("date")}/>
+
+
+                        </div>
+                    </div>
+
+                    <div className="aligned">
+                        <button className="submit-btn"> Submit</button>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </div>)
+}
