From 2ab859c2ead12b362f1e4b6fa8bd538a6f4dc58d Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Sun, 12 Feb 2023 15:54:51 +0300
Subject: [PATCH 1/7] refactor: increase shared code piece

---
 src/components/LocationEdit.jsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/LocationEdit.jsx b/src/components/LocationEdit.jsx
index 4c82a22..5fe62db 100644
--- a/src/components/LocationEdit.jsx
+++ b/src/components/LocationEdit.jsx
@@ -42,7 +42,7 @@ export function LocationsEdit ({ item }) {
       return;
     }
 
-    if (name === "additionalAddressDetails") {
+    if (name === "addressDetails") {
       setFormData({ ...formData, [name]: value, addressDetails: value });
       return;
     }
@@ -56,7 +56,7 @@ export function LocationsEdit ({ item }) {
       "name",
       "phone",
       "address",
-      "additionalAddressDetails",
+      "addressDetails",
       "cityId",
       "districtId",
       "typeId",
@@ -112,7 +112,6 @@ export function LocationsEdit ({ item }) {
         <div className={"flex justify-between px-8 my-8"}>
           <h2 className={"text-2xl font-bold"}>Lokasyon Düzenle</h2>
         </div>
-
         <form onSubmit={handleSubmit} className={"px-8"}>
           <div>
             <Label htmlFor="name">Ad: </Label>
@@ -130,10 +129,9 @@ export function LocationsEdit ({ item }) {
                    value={formData.address} onChange={handleInputChange}/>
           </div>
           <div>
-            <Label htmlFor="additionalAddressDetails">Adres Tarifi:</Label>
-            <Input type="text" id="additionalAddressDetails"
-                   name="additionalAddressDetails"
-                   value={formData.additionalAddressDetails}
+            <Label htmlFor="addressDetails">Adres Tarifi:</Label>
+            <Input type="text" id="addressDetails" name="addressDetails"
+                   value={formData.addressDetails}
                    onChange={handleInputChange}/>
           </div>
           <div>
@@ -194,7 +192,7 @@ export function LocationsEdit ({ item }) {
             <Select name={"typeId"}
                     onChange={handleInputChange}>
               <option value="" selected={formData.type === null}>
-                Lütfen Seçiniz
+                Lütfen seçiniz
               </option>
               {
                 typeOptions.map((item) => (
@@ -210,7 +208,7 @@ export function LocationsEdit ({ item }) {
             <Select name={"subTypeId"}
                     onChange={handleInputChange}>
               <option value="" selected={formData.type === null}>
-                Lütfen Seçiniz
+                Lütfen seçiniz
               </option>
               {
                 formData.typeId &&
@@ -225,14 +223,18 @@ export function LocationsEdit ({ item }) {
               }
             </Select>
           </div>
+
           <button type="submit"
                   className={"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"}>
-            Güncelle
+            Gönder
           </button>
-          {loading && <p>Güncelleniyor...</p>}
+
+          {
+            loading && <div className={"mt-4"}>Kaydediliyor...</div>
+          }
+
           {
-            response?.ok && data?.ok &&
-            <div className={"mt-4 text-lg"}>Güncelleme başarılı</div>
+            response?.ok && data?.ok && <div className={"mt-4 text-lg"}>Kayıt başarılı</div>
           }
         </form>
       </Drawer>

From 043676819412055562cc26946aeafed7f9b988d8 Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Tue, 14 Feb 2023 21:50:58 +0300
Subject: [PATCH 2/7] refactor(Location): increase shared code size

---
 src/components/LocationAdd.jsx  | 5 +++--
 src/components/LocationEdit.jsx | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/LocationAdd.jsx b/src/components/LocationAdd.jsx
index 39630c4..e13b43c 100644
--- a/src/components/LocationAdd.jsx
+++ b/src/components/LocationAdd.jsx
@@ -242,8 +242,9 @@ export function LocationAdd ({refresh}) {
                 Lütfen seçiniz
               </option>
               {
-                [{ id: "true", name: "Evet" }, { id: "false", name: "Hayır" }]
-                .map((item) => (
+                [{ id: true, name: "Evet" }, { id: false, name: "Hayır" }]
+                  .map((item) =>
+                  (
                     <option value={item.id} key={item.id}
                             selected={formData.isValidated === item.id}>
                       {item.name}
diff --git a/src/components/LocationEdit.jsx b/src/components/LocationEdit.jsx
index 3ec724a..1bd6a72 100644
--- a/src/components/LocationEdit.jsx
+++ b/src/components/LocationEdit.jsx
@@ -252,8 +252,9 @@ export function LocationsEdit ({ item }) {
                 Lütfen seçiniz
               </option>
               {
-                [{ id: true, name: "Evet" }, { id: false, name: "Hayır" }].map(
-                  (item) => (
+                [{ id: true, name: "Evet" }, { id: false, name: "Hayır" }]
+                  .map((item) =>
+                  (
                     <option value={item.id} key={item.id}
                             selected={formData.isValidated === item.id}>
                       {item.name}
@@ -263,7 +264,6 @@ export function LocationsEdit ({ item }) {
             </Select>
           </div>
 
-
           <button type="submit"
                   className={"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"}>
             Gönder

From 1c56bfb925951995a663c3414229ded7de799009 Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Tue, 14 Feb 2023 22:11:52 +0300
Subject: [PATCH 3/7] refactor(Location): increase shared code size

---
 src/components/LocationAdd.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/LocationAdd.jsx b/src/components/LocationAdd.jsx
index e13b43c..f1e2347 100644
--- a/src/components/LocationAdd.jsx
+++ b/src/components/LocationAdd.jsx
@@ -107,7 +107,6 @@ export function LocationAdd ({refresh}) {
         <div className={"flex justify-between px-8 my-8"}>
           <h2 className={"text-2xl font-bold"}>Yeni Lokasyon</h2>
         </div>
-
         <form onSubmit={handleSubmit} className={"px-8"}>
           <div>
             <Label htmlFor="name">Ad: </Label>
@@ -130,14 +129,12 @@ export function LocationAdd ({refresh}) {
                    value={formData.addressDetails}
                    onChange={handleInputChange}/>
           </div>
-
           <div>
             <Label htmlFor="code">Kurum kodu:</Label>
             <Input type="text" id="code" name="code"
                    value={formData.code}
                    onChange={handleInputChange}/>
           </div>
-
           <div>
             <Label htmlFor="cityId">Şehir:</Label>
 
@@ -227,7 +224,6 @@ export function LocationAdd ({refresh}) {
               }
             </Select>
           </div>
-
           <div>
             <Label htmlFor="source">Kaynak:</Label>
             <Input type="text" id="source" name="source"

From 3c38181c9692cf1255b4656a7b9451d6cac995d6 Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Tue, 14 Feb 2023 23:00:07 +0300
Subject: [PATCH 4/7] refactor(Location): convert item and refresh to property

---
 src/components/LocationAdd.jsx  | 24 ++++--------------------
 src/components/LocationEdit.jsx |  7 +++----
 src/pages/LocationsList.jsx     | 28 ++++++++++++++++++++++++----
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/LocationAdd.jsx b/src/components/LocationAdd.jsx
index f1e2347..c8934ae 100644
--- a/src/components/LocationAdd.jsx
+++ b/src/components/LocationAdd.jsx
@@ -7,8 +7,8 @@ import { Label } from "./Label.jsx";
 import { Select } from "./Select.jsx";
 import { subTypeOptions, typeOptions } from "./TypeOptions.jsx";
 
-export function LocationAdd ({refresh}) {
-  const { data, post, response, loading, get } = useFetch("/location");
+export function LocationAdd ({ item, refresh }) {
+  const { data, response, loading, post } = useFetch("/location");
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -20,23 +20,7 @@ export function LocationAdd ({refresh}) {
     setIsOpen((prevState) => !prevState);
   };
 
-  const initialFormData = {
-    name: "",
-    phone: "",
-    address: "",
-    addressDetails: "",
-    code: "",
-    latitude: "",
-    longitude: "",
-    cityId: null,
-    districtId: null,
-    typeId: null,
-    subTypeId: null,
-    source: null,
-    isValidated: null
-  }
-
-  const [formData, setFormData] = useState(initialFormData);
+  const [formData, setFormData] = useState(item);
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -71,7 +55,7 @@ export function LocationAdd ({refresh}) {
       if (newLocation.data) {
         console.log("New location added")
 
-        setFormData(initialFormData)
+        setFormData(item)
 
         setTimeout(() => {
           refresh()
diff --git a/src/components/LocationEdit.jsx b/src/components/LocationEdit.jsx
index 1bd6a72..274ed1e 100644
--- a/src/components/LocationEdit.jsx
+++ b/src/components/LocationEdit.jsx
@@ -2,14 +2,13 @@ import { useState } from "react";
 import Drawer from "react-modern-drawer";
 import { useFetch } from "use-http";
 import cityData from "../datasets/cityData.json";
-import { getDateQuery } from "../utils";
 import { Input } from "./Input.jsx";
 import { Label } from "./Label.jsx";
 import { Select } from "./Select.jsx";
 import { subTypeOptions, typeOptions } from "./TypeOptions.jsx";
 
-export function LocationsEdit ({ item }) {
-  const { data, put, response, loading, get } = useFetch("");
+export function LocationsEdit ({ item, refresh }) {
+  const { data, response, loading, put } = useFetch("");
 
   const [isOpen, setIsOpen] = useState(false);
   const toggleDrawer = () => {
@@ -91,7 +90,7 @@ export function LocationsEdit ({ item }) {
         window.location.reload()
 
         setTimeout(() => {
-          get(getDateQuery);
+          refresh();
           toggleDrawer();
         }, 300);
       }
diff --git a/src/pages/LocationsList.jsx b/src/pages/LocationsList.jsx
index aad2a9e..78e01d9 100644
--- a/src/pages/LocationsList.jsx
+++ b/src/pages/LocationsList.jsx
@@ -27,19 +27,23 @@ function LocationsTableRow ({ item }) {
   } = item;
   const { delete: deleteLocation, get } = useFetch("");
 
+  const refresh = () => {
+    get(getDateQuery);
+  };
+
   async function handleDelete () {
     const areYouSure = confirm("Silmek istediğinize emin misiniz?");
     if (areYouSure) {
       await deleteLocation(`location/${id}`);
       // TODO: Sayfa yerine sadece data yenilenecek. Ortak bir state'e bağlamak gerekebilir.
       window.location.reload();
-      get(getDateQuery);
+      refresh();
     }
   }
 
   const LocationActions = () => (
     <div className={"flex gap-8"}>
-      <LocationsEdit item={item}/>
+      <LocationsEdit item={item} refresh={refresh}/>
       <button className={"text-red-500"} onClick={handleDelete}>
         Sil
       </button>
@@ -219,7 +223,23 @@ export const LocationsList = () => {
   const { get, data, loading } = useFetch("/locations/admin", {}, []);
 
   const refresh = () => {
-    get(getDateQuery());
+    get(getDateQuery);
+  };
+  
+  const initialLocation = {
+    name: "",
+    phone: "",
+    address: "",
+    addressDetails: "",
+    code: "",
+    latitude: "",
+    longitude: "",
+    cityId: null,
+    districtId: null,
+    typeId: null,
+    subTypeId: null,
+    source: null,
+    isValidated: null,
   };
 
   const typeFilteredData = data?.data?.filter(
@@ -242,7 +262,7 @@ export const LocationsList = () => {
         <div className="flex items-center justify-center">
           <h1 className={"text-3xl text-bold"}>Lokasyonlar</h1>
 
-          <LocationAdd refresh={refresh}/>
+          <LocationAdd item={initialLocation} refresh={refresh}/>
         </div>
 
         <LocationFilters dispatchFilters={dispatchFilters}/>

From 37519493e549355fee318d6f1eeec9d129b1317d Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Wed, 15 Feb 2023 01:30:06 +0300
Subject: [PATCH 5/7] refactor(Location): use shared component for both add and
 edit

---
 src/components/LocationAdd.jsx  | 246 +++++-------------------------
 src/components/LocationEdit.jsx | 248 +++++--------------------------
 src/components/LocationSet.jsx  | 255 ++++++++++++++++++++++++++++++++
 src/pages/LocationsList.jsx     |   1 -
 4 files changed, 327 insertions(+), 423 deletions(-)
 create mode 100644 src/components/LocationSet.jsx

diff --git a/src/components/LocationAdd.jsx b/src/components/LocationAdd.jsx
index c8934ae..cd7c9e9 100644
--- a/src/components/LocationAdd.jsx
+++ b/src/components/LocationAdd.jsx
@@ -1,253 +1,79 @@
 import { useState } from "react";
-import Drawer from "react-modern-drawer";
 import { useFetch } from "use-http";
-import cityData from "../datasets/cityData.json";
-import { Input } from "./Input.jsx";
-import { Label } from "./Label.jsx";
-import { Select } from "./Select.jsx";
-import { subTypeOptions, typeOptions } from "./TypeOptions.jsx";
 
-export function LocationAdd ({ item, refresh }) {
-  const { data, response, loading, post } = useFetch("/location");
+import { LocationSet } from "./LocationSet";
+
+export function LocationAdd({ item, refresh }) {
+  const { response, post } = useFetch("/location");
 
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDrawer = () => {
     if (localStorage.getItem("token") === null) {
-      alert("Token gerekli")
-      return
+      alert("Token gerekli");
+      return;
     }
     setIsOpen((prevState) => !prevState);
   };
 
-  const [formData, setFormData] = useState(item);
-
-  const handleInputChange = (event) => {
-    const { name, value } = event.target;
+  const [_, setFormData] = useState(item);
 
+  const getDataAfterInputChange = (formData, name, value) => {
     if (name === "cityId") {
-      setFormData({ ...formData, cityId: Number(value), districtId: null });
-      return;
+      return { ...formData, cityId: Number(value), districtId: null };
     }
 
-    let integerFields = [
-      "districtId",
-      "typeId",
-      "subTypeId",
-    ];
+    let integerFields = ["districtId", "typeId", "subTypeId"];
 
     if (integerFields.includes(name)) {
-      setFormData({ ...formData, [name]: Number(value) });
-      return;
+      return { ...formData, [name]: Number(value) };
     }
 
-    setFormData({ ...formData, [name]: value });
+    return { ...formData, [name]: value };
   };
 
-  async function addLocation() {
-    formData.isValidated = Boolean(formData.isValidated)
+  async function addLocation(formData) {
+    formData.isValidated = Boolean(formData.isValidated);
 
     const newLocation = await post({
-       ...formData
-    })
+      ...formData,
+    });
 
     if (response.ok) {
       if (newLocation.data) {
-        console.log("New location added")
+        console.log("New location added");
 
-        setFormData(item)
+        setFormData(item);
 
         setTimeout(() => {
-          refresh()
-          toggleDrawer()
-        }, 300)
+          refresh();
+          toggleDrawer();
+        }, 300);
       }
     }
   }
 
-  const handleSubmit = (event) => {
-    event.preventDefault();
-
-    addLocation()
-  };
-
   return (
     <>
       <div>
-        <button type="button"
-                className={"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-12"}
-                onClick={toggleDrawer}>
-          Yeni Lokasyon Ekle
+        <button
+          type="button"
+          className={
+            "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-12"
+          }
+          onClick={toggleDrawer}
+        >
+          Yeni Konum Ekle
         </button>
       </div>
-
-      <Drawer
-        open={isOpen}
+      <LocationSet
+        header="Yeni Konum"
+        isOpen={isOpen}
         onClose={toggleDrawer}
-        direction="right"
-        className="!w-[80vw] md:!w-[50vw]"
-        duration={200}
-      >
-        <div className={"flex justify-between px-8 my-8"}>
-          <h2 className={"text-2xl font-bold"}>Yeni Lokasyon</h2>
-        </div>
-        <form onSubmit={handleSubmit} className={"px-8"}>
-          <div>
-            <Label htmlFor="name">Ad: </Label>
-            <Input type="text" id="name" name="name" value={formData.name}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="phone">Telefon Numarası: </Label>
-            <Input type="text" id="phone" name="phone" value={formData.phone}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="address">Açık Adres: </Label>
-            <Input type="text" id="address" name="address"
-                   value={formData.address} onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="addressDetails">Adres Tarifi:</Label>
-            <Input type="text" id="addressDetails" name="addressDetails"
-                   value={formData.addressDetails}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="code">Kurum kodu:</Label>
-            <Input type="text" id="code" name="code"
-                   value={formData.code}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="cityId">Şehir:</Label>
-
-            <Select
-              id="cityId" name={"cityId"}
-              onChange={(e) => {
-                handleInputChange(e);
-              }}>
-              <option value="" selected={formData.cityId === null}>
-                Şehir
-              </option>
-              {
-                cityData.map((item) => (
-                  <option value={item.id} key={item.id}
-                          selected={formData.cityId ===
-                            item.id}>{item.key}
-                  </option>
-                ))
-              }
-            </Select>
-          </div>
-
-          <Label htmlFor="districtId">İlçe:</Label>
-
-          <Select id="districtId" name={"districtId"}
-                  onChange={(e) => {
-                    handleInputChange(e);
-                  }}>
-            <option value="" selected={formData.districtId === null}>
-              İlçe
-            </option>
-            {
-              formData.cityId &&
-              cityData.find(item => item.id === Number(formData.cityId))?.
-                districts.
-                map((item) => (
-                  <option value={item.id} key={item.id}
-                          selected={formData.districtId ===
-                            item.id}>{item.key}</option>
-                ))
-            }
-          </Select>
-
-          <div>
-            <Label htmlFor="latitude">Latitude:</Label>
-            <Input type="text" id="latitude" name="latitude"
-                   value={formData.latitude} onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="longitude">Longitude:</Label>
-            <Input type="text" id="longitude" name="longitude"
-                   value={formData.longitude} onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="typeId">Tip:</Label>
-            <Select name={"typeId"}
-                    onChange={handleInputChange}>
-              <option value="" selected={formData.type === null}>
-                Lütfen seçiniz
-              </option>
-              {
-                typeOptions.map((item) => (
-                  <option value={item.id} key={item.id}
-                          selected={formData.typeId ===
-                            item.id}>{item.name}</option>
-                ))
-              }
-            </Select>
-          </div>
-          <div>
-            <Label htmlFor="subTypeId">Alt tip:</Label>
-            <Select name={"subTypeId"}
-                    onChange={handleInputChange}>
-              <option value="" selected={formData.type === null}>
-                Lütfen seçiniz
-              </option>
-              {
-                formData.typeId &&
-                subTypeOptions.filter(
-                  item => item.typeId === Number(formData.typeId)).
-                  map((item) => (
-                    <option value={item.id} key={item.id}
-                            selected={formData.subTypeId === item.id}>
-                      {item.name}
-                    </option>
-                  ))
-              }
-            </Select>
-          </div>
-          <div>
-            <Label htmlFor="source">Kaynak:</Label>
-            <Input type="text" id="source" name="source"
-                   value={formData.source} onChange={handleInputChange}/>
-          </div>
-
-          <div>
-            <Label htmlFor="isValidated">Doğrulandı mı?</Label>
-            <Select name={"isValidated"}
-                    onChange={handleInputChange}>
-              <option value="" selected={formData.isValidated === null}>
-                Lütfen seçiniz
-              </option>
-              {
-                [{ id: true, name: "Evet" }, { id: false, name: "Hayır" }]
-                  .map((item) =>
-                  (
-                    <option value={item.id} key={item.id}
-                            selected={formData.isValidated === item.id}>
-                      {item.name}
-                    </option>
-                  ))
-              }
-            </Select>
-          </div>
-
-          <button type="submit"
-                  className={"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"}>
-            Gönder
-          </button>
-
-          {
-            loading && <div className={"mt-4"}>Kaydediliyor...</div>
-          }
-
-          {
-            response?.ok && data?.ok && <div className={"mt-4 text-lg"}>Kayıt başarılı</div>
-          }
-        </form>
-      </Drawer>
+        item={item}
+        onSubmit={addLocation}
+        getDataAfterInputChange={getDataAfterInputChange}
+      ></LocationSet>
     </>
   );
 }
diff --git a/src/components/LocationEdit.jsx b/src/components/LocationEdit.jsx
index 274ed1e..5aa1742 100644
--- a/src/components/LocationEdit.jsx
+++ b/src/components/LocationEdit.jsx
@@ -1,55 +1,35 @@
 import { useState } from "react";
-import Drawer from "react-modern-drawer";
 import { useFetch } from "use-http";
-import cityData from "../datasets/cityData.json";
-import { Input } from "./Input.jsx";
-import { Label } from "./Label.jsx";
-import { Select } from "./Select.jsx";
-import { subTypeOptions, typeOptions } from "./TypeOptions.jsx";
 
-export function LocationsEdit ({ item, refresh }) {
-  const { data, response, loading, put } = useFetch("");
+import { LocationSet } from "./LocationSet";
+
+export function LocationsEdit({ item, refresh }) {
+  const { response, put } = useFetch("");
 
   const [isOpen, setIsOpen] = useState(false);
   const toggleDrawer = () => {
     setIsOpen((prevState) => !prevState);
   };
 
-  const [formData, setFormData] = useState(item);
-
-  const handleInputChange = (event) => {
-    const { name, value } = event.target;
-
+  const getDataAfterInputChange = (formData, name, value) => {
     if (name === "cityId") {
-      setFormData({ ...formData, cityId: Number(value), districtId: null });
-      return;
+      return { ...formData, cityId: Number(value), districtId: null };
     }
 
     if (name === "typeId") {
-      setFormData({ ...formData, typeId: Number(value), subTypeId: null });
-      return;
+      return { ...formData, typeId: Number(value), subTypeId: null };
     }
 
-    let integerFields = [
-      "districtId",
-      "typeId",
-      "subTypeId",
-    ];
+    let integerFields = ["districtId", "typeId", "subTypeId"];
 
     if (integerFields.includes(name)) {
-      setFormData({ ...formData, [name]: Number(value) });
-      return;
-    }
-
-    if (name === "addressDetails") {
-      setFormData({ ...formData, [name]: value, addressDetails: value });
-      return;
+      return { ...formData, [name]: Number(value) };
     }
 
-    setFormData({ ...formData, [name]: value });
+    return { ...formData, [name]: value };
   };
 
-  async function updateLocation () {
+  async function updateLocation(formData) {
     // Filter form data by fields
     const fields = [
       "name",
@@ -64,22 +44,31 @@ export function LocationsEdit ({ item, refresh }) {
       "longitude",
       "source",
       "isValidated",
-      "code"
+      "code",
     ];
 
-    if (!(formData.typeId && formData.subTypeId && formData.cityId &&
-      formData.districtId && formData.source?.length > 0)) {
+    if (
+      !(
+        formData.typeId &&
+        formData.subTypeId &&
+        formData.cityId &&
+        formData.districtId &&
+        formData.source?.length > 0
+      )
+    ) {
       alert("Lütfen tüm alanları doldurunuz");
       return;
     }
 
-    formData.isValidated = Boolean(formData.isValidated)
+    formData.isValidated = Boolean(formData.isValidated);
 
-    let filteredFormData = Object.entries(formData).
-      filter(([key, value]) => fields.includes(key));
+    let filteredFormData = Object.entries(formData).filter(([key, value]) =>
+      fields.includes(key)
+    );
 
-    const updateLocationResponse = await put(`/location/${item.id}`,
-      Object.fromEntries(filteredFormData),
+    const updateLocationResponse = await put(
+      `/location/${item.id}`,
+      Object.fromEntries(filteredFormData)
     );
     console.log({ response, updateLocationResponse });
 
@@ -87,7 +76,7 @@ export function LocationsEdit ({ item, refresh }) {
       if (updateLocationResponse.data) {
         console.log("Updated");
 
-        window.location.reload()
+        window.location.reload();
 
         setTimeout(() => {
           refresh();
@@ -97,11 +86,6 @@ export function LocationsEdit ({ item, refresh }) {
     }
   }
 
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    updateLocation();
-  };
-
   return (
     <>
       <div>
@@ -109,174 +93,14 @@ export function LocationsEdit ({ item, refresh }) {
           Düzenle
         </button>
       </div>
-
-      <Drawer
-        open={isOpen}
+      <LocationSet
+        header="Konum Düzenle"
+        isOpen={isOpen}
         onClose={toggleDrawer}
-        direction="right"
-        className="!w-[80vw] md:!w-[50vw]"
-        duration={200}
-      >
-        <div className={"flex justify-between px-8 my-8"}>
-          <h2 className={"text-2xl font-bold"}>Lokasyon Düzenle</h2>
-        </div>
-        <form onSubmit={handleSubmit} className={"px-8"}>
-          <div>
-            <Label htmlFor="name">Ad: </Label>
-            <Input type="text" id="name" name="name" value={formData.name}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="phone">Telefon Numarası: </Label>
-            <Input type="text" id="phone" name="phone" value={formData.phone}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="address">Açık Adres: </Label>
-            <Input type="text" id="address" name="address"
-                   value={formData.address} onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="addressDetails">Adres Tarifi:</Label>
-            <Input type="text" id="addressDetails" name="addressDetails"
-                   value={formData.addressDetails}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="code">Kurum kodu:</Label>
-            <Input type="text" id="code" name="code"
-                   value={formData.code}
-                   onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="cityId">Şehir:</Label>
-
-            <Select
-              id="cityId" name={"cityId"}
-              onChange={(e) => {
-                handleInputChange(e);
-              }}>
-              <option value="" selected={formData.cityId === null}>
-                Şehir
-              </option>
-              {
-                cityData.map((item) => (
-                  <option value={item.id} key={item.id}
-                          selected={formData.cityId ===
-                            item.id}>{item.key}
-                  </option>
-                ))
-              }
-            </Select>
-          </div>
-
-          <Label htmlFor="districtId">İlçe:</Label>
-
-          <Select id="districtId" name={"districtId"}
-                  onChange={(e) => {
-                    handleInputChange(e);
-                  }}>
-            <option value="" selected={formData.districtId === null}>
-              İlçe
-            </option>
-            {
-              formData.cityId &&
-              cityData.find(item => item.id === Number(formData.cityId))?.
-                districts.
-                map((item) => (
-                  <option value={item.id} key={item.id}
-                          selected={formData.districtId ===
-                            item.id}>{item.key}</option>
-                ))
-            }
-          </Select>
-
-          <div>
-            <Label htmlFor="latitude">Latitude:</Label>
-            <Input type="text" id="latitude" name="latitude"
-                   value={formData.latitude} onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="longitude">Longitude:</Label>
-            <Input type="text" id="longitude" name="longitude"
-                   value={formData.longitude} onChange={handleInputChange}/>
-          </div>
-          <div>
-            <Label htmlFor="typeId">Tip:</Label>
-            <Select name={"typeId"}
-                    onChange={handleInputChange}>
-              <option value="" selected={formData.type === null}>
-                Lütfen seçiniz
-              </option>
-              {
-                typeOptions.map((item) => (
-                  <option value={item.id} key={item.id}
-                          selected={formData.typeId ===
-                            item.id}>{item.name}</option>
-                ))
-              }
-            </Select>
-          </div>
-          <div>
-            <Label htmlFor="subTypeId">Alt tip:</Label>
-            <Select name={"subTypeId"}
-                    onChange={handleInputChange}>
-              <option value="" selected={formData.type === null}>
-                Lütfen seçiniz
-              </option>
-              {
-                formData.typeId &&
-                subTypeOptions.filter(
-                  item => item.typeId === Number(formData.typeId)).
-                  map((item) => (
-                    <option value={item.id} key={item.id}
-                            selected={formData.subTypeId === item.id}>
-                      {item.name}
-                    </option>
-                  ))
-              }
-            </Select>
-          </div>
-          <div>
-            <Label htmlFor="source">Kaynak:</Label>
-            <Input type="text" id="source" name="source"
-                   value={formData.source} onChange={handleInputChange}/>
-          </div>
-
-          <div>
-            <Label htmlFor="isValidated">Doğrulandı mı?</Label>
-            <Select name={"isValidated"}
-                    onChange={handleInputChange}>
-              <option value="" selected={formData.isValidated === null}>
-                Lütfen seçiniz
-              </option>
-              {
-                [{ id: true, name: "Evet" }, { id: false, name: "Hayır" }]
-                  .map((item) =>
-                  (
-                    <option value={item.id} key={item.id}
-                            selected={formData.isValidated === item.id}>
-                      {item.name}
-                    </option>
-                  ))
-              }
-            </Select>
-          </div>
-
-          <button type="submit"
-                  className={"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"}>
-            Gönder
-          </button>
-
-          {
-            loading && <div className={"mt-4"}>Kaydediliyor...</div>
-          }
-
-          {
-            response?.ok && data?.ok && <div className={"mt-4 text-lg"}>Kayıt başarılı</div>
-          }
-        </form>
-      </Drawer>
+        item={item}
+        onSubmit={updateLocation}
+        getDataAfterInputChange={getDataAfterInputChange}
+      ></LocationSet>
     </>
   );
 }
diff --git a/src/components/LocationSet.jsx b/src/components/LocationSet.jsx
new file mode 100644
index 0000000..0b33ab6
--- /dev/null
+++ b/src/components/LocationSet.jsx
@@ -0,0 +1,255 @@
+import { useState } from "react";
+import Drawer from "react-modern-drawer";
+import { useFetch } from "use-http";
+import cityData from "../datasets/cityData.json";
+import { Input } from "./Input.jsx";
+import { Label } from "./Label.jsx";
+import { Select } from "./Select.jsx";
+import { subTypeOptions, typeOptions } from "./TypeOptions.jsx";
+
+export function LocationSet({
+  header,
+  isOpen,
+  onClose,
+  item,
+  onSubmit = (formData) => formData,
+  getDataAfterInputChange = (formData, name, value) => formData,
+}) {
+  const { data, response, loading } = useFetch("");
+
+  const [formData, setFormData] = useState(item);
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    var newFormData = getDataAfterInputChange(formData, name, value);
+    setFormData(newFormData);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const postSubmitFormData = onSubmit(formData);
+    setFormData(postSubmitFormData);
+  };
+
+  return (
+    <>
+      <Drawer
+        open={isOpen}
+        onClose={onClose}
+        direction="right"
+        className="!w-[80vw] md:!w-[50vw]"
+        duration={200}
+      >
+        <div className={"flex justify-between px-8 my-8"}>
+          <h2 className={"text-2xl font-bold"}>{header}</h2>
+        </div>
+        <form onSubmit={handleSubmit} className={"px-8"}>
+          <div>
+            <Label htmlFor="name">Ad: </Label>
+            <Input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="phone">Telefon Numarası: </Label>
+            <Input
+              type="text"
+              id="phone"
+              name="phone"
+              value={formData.phone}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="address">Açık Adres: </Label>
+            <Input
+              type="text"
+              id="address"
+              name="address"
+              value={formData.address}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="addressDetails">Adres Tarifi:</Label>
+            <Input
+              type="text"
+              id="addressDetails"
+              name="addressDetails"
+              value={formData.addressDetails}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="code">Kurum kodu:</Label>
+            <Input
+              type="text"
+              id="code"
+              name="code"
+              value={formData.code}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="cityId">Şehir:</Label>
+
+            <Select
+              id="cityId"
+              name={"cityId"}
+              onChange={(e) => {
+                handleInputChange(e);
+              }}
+            >
+              <option value="" selected={formData.cityId === null}>
+                Şehir
+              </option>
+              {cityData.map((item) => (
+                <option
+                  value={item.id}
+                  key={item.id}
+                  selected={formData.cityId === item.id}
+                >
+                  {item.key}
+                </option>
+              ))}
+            </Select>
+          </div>
+
+          <Label htmlFor="districtId">İlçe:</Label>
+
+          <Select
+            id="districtId"
+            name={"districtId"}
+            onChange={(e) => {
+              handleInputChange(e);
+            }}
+          >
+            <option value="" selected={formData.districtId === null}>
+              İlçe
+            </option>
+            {formData.cityId &&
+              cityData
+                .find((item) => item.id === Number(formData.cityId))
+                ?.districts.map((item) => (
+                  <option
+                    value={item.id}
+                    key={item.id}
+                    selected={formData.districtId === item.id}
+                  >
+                    {item.key}
+                  </option>
+                ))}
+          </Select>
+
+          <div>
+            <Label htmlFor="latitude">Latitude:</Label>
+            <Input
+              type="text"
+              id="latitude"
+              name="latitude"
+              value={formData.latitude}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="longitude">Longitude:</Label>
+            <Input
+              type="text"
+              id="longitude"
+              name="longitude"
+              value={formData.longitude}
+              onChange={handleInputChange}
+            />
+          </div>
+          <div>
+            <Label htmlFor="typeId">Tip:</Label>
+            <Select name={"typeId"} onChange={handleInputChange}>
+              <option value="" selected={formData.type === null}>
+                Lütfen seçiniz
+              </option>
+              {typeOptions.map((item) => (
+                <option
+                  value={item.id}
+                  key={item.id}
+                  selected={formData.typeId === item.id}
+                >
+                  {item.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="subTypeId">Alt tip:</Label>
+            <Select name={"subTypeId"} onChange={handleInputChange}>
+              <option value="" selected={formData.type === null}>
+                Lütfen seçiniz
+              </option>
+              {formData.typeId &&
+                subTypeOptions
+                  .filter((item) => item.typeId === Number(formData.typeId))
+                  .map((item) => (
+                    <option
+                      value={item.id}
+                      key={item.id}
+                      selected={formData.subTypeId === item.id}
+                    >
+                      {item.name}
+                    </option>
+                  ))}
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="source">Kaynak:</Label>
+            <Input
+              type="text"
+              id="source"
+              name="source"
+              value={formData.source}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="isValidated">Doğrulandı mı?</Label>
+            <Select name={"isValidated"} onChange={handleInputChange}>
+              <option value="" selected={formData.isValidated === null}>
+                Lütfen seçiniz
+              </option>
+              {[
+                { id: true, name: "Evet" },
+                { id: false, name: "Hayır" },
+              ].map((item) => (
+                <option
+                  value={item.id}
+                  key={item.id}
+                  selected={formData.isValidated === item.id}
+                >
+                  {item.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+
+          <button
+            type="submit"
+            className={
+              "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"
+            }
+          >
+            Gönder
+          </button>
+
+          {loading && <div className={"mt-4"}>Kaydediliyor...</div>}
+
+          {response?.ok && data?.ok && (
+            <div className={"mt-4 text-lg"}>Kayıt başarılı</div>
+          )}
+        </form>
+      </Drawer>
+    </>
+  );
+}
diff --git a/src/pages/LocationsList.jsx b/src/pages/LocationsList.jsx
index 78e01d9..b36354d 100644
--- a/src/pages/LocationsList.jsx
+++ b/src/pages/LocationsList.jsx
@@ -261,7 +261,6 @@ export const LocationsList = () => {
       <div className={"flex justify-between my-6 flex-col md:flex-row"}>
         <div className="flex items-center justify-center">
           <h1 className={"text-3xl text-bold"}>Lokasyonlar</h1>
-
           <LocationAdd item={initialLocation} refresh={refresh}/>
         </div>
 

From 918240de18bfa604801640845b11ad9c417b0f7d Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Wed, 15 Feb 2023 01:48:03 +0300
Subject: [PATCH 6/7] refactor: hide add implementation detail

---
 src/components/LocationAdd.jsx | 23 +++++++++++++++++++----
 src/pages/LocationsList.jsx    | 18 +-----------------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/LocationAdd.jsx b/src/components/LocationAdd.jsx
index cd7c9e9..a80e759 100644
--- a/src/components/LocationAdd.jsx
+++ b/src/components/LocationAdd.jsx
@@ -3,9 +3,8 @@ import { useFetch } from "use-http";
 
 import { LocationSet } from "./LocationSet";
 
-export function LocationAdd({ item, refresh }) {
+export function LocationAdd({ refresh }) {
   const { response, post } = useFetch("/location");
-
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDrawer = () => {
@@ -16,7 +15,23 @@ export function LocationAdd({ item, refresh }) {
     setIsOpen((prevState) => !prevState);
   };
 
-  const [_, setFormData] = useState(item);
+  const initialLocation = {
+    name: "",
+    phone: "",
+    address: "",
+    addressDetails: "",
+    code: "",
+    latitude: "",
+    longitude: "",
+    cityId: null,
+    districtId: null,
+    typeId: null,
+    subTypeId: null,
+    source: null,
+    isValidated: null,
+  };
+
+  const [item, setItem] = useState(initialLocation);
 
   const getDataAfterInputChange = (formData, name, value) => {
     if (name === "cityId") {
@@ -43,7 +58,7 @@ export function LocationAdd({ item, refresh }) {
       if (newLocation.data) {
         console.log("New location added");
 
-        setFormData(item);
+        setItem(initialLocation);
 
         setTimeout(() => {
           refresh();
diff --git a/src/pages/LocationsList.jsx b/src/pages/LocationsList.jsx
index b36354d..bca0552 100644
--- a/src/pages/LocationsList.jsx
+++ b/src/pages/LocationsList.jsx
@@ -225,22 +225,6 @@ export const LocationsList = () => {
   const refresh = () => {
     get(getDateQuery);
   };
-  
-  const initialLocation = {
-    name: "",
-    phone: "",
-    address: "",
-    addressDetails: "",
-    code: "",
-    latitude: "",
-    longitude: "",
-    cityId: null,
-    districtId: null,
-    typeId: null,
-    subTypeId: null,
-    source: null,
-    isValidated: null,
-  };
 
   const typeFilteredData = data?.data?.filter(
     (item) => !filters.type || Number(item.typeId) === Number(filters.type),
@@ -261,7 +245,7 @@ export const LocationsList = () => {
       <div className={"flex justify-between my-6 flex-col md:flex-row"}>
         <div className="flex items-center justify-center">
           <h1 className={"text-3xl text-bold"}>Lokasyonlar</h1>
-          <LocationAdd item={initialLocation} refresh={refresh}/>
+          <LocationAdd refresh={refresh}/>
         </div>
 
         <LocationFilters dispatchFilters={dispatchFilters}/>

From d4dbe587c893e171ef46b67e81bc9511c5993058 Mon Sep 17 00:00:00 2001
From: Ibrahim Bali <balii@pm.me>
Date: Wed, 15 Feb 2023 01:49:05 +0300
Subject: [PATCH 7/7] refactor: rename for consistency

---
 src/pages/LocationsList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/LocationsList.jsx b/src/pages/LocationsList.jsx
index bca0552..3a79de1 100644
--- a/src/pages/LocationsList.jsx
+++ b/src/pages/LocationsList.jsx
@@ -244,7 +244,7 @@ export const LocationsList = () => {
     <div className={"container"}>
       <div className={"flex justify-between my-6 flex-col md:flex-row"}>
         <div className="flex items-center justify-center">
-          <h1 className={"text-3xl text-bold"}>Lokasyonlar</h1>
+          <h1 className={"text-3xl text-bold"}>Konumlar</h1>
           <LocationAdd refresh={refresh}/>
         </div>