fix: wishlist db error

src/Controllers/WishlistController.php

@@ -10,6 +10,7 @@ use app\Forms\Number;
 use app\Forms\Phone;
 use app\Forms\Required;
 use app\Forms\Validation;
+use app\Models\Dorm;
 use app\Models\Owners;
 use app\Models\Wishlists;
 use app\Utils\Toast;
@@ -43,15 +44,29 @@ class WishlistController extends Controller
     // ]);
     $userId = Request::getUser()->user_id;
 
-    $wishlists = Wishlists::where(["user_id"=>$userId]);
+    $wishlists = Wishlists::where(["user_id" => $userId]);
     print_r($wishlists);
-    $this->render("wishlist/index",[
-        "wishlists" => $wishlists
+    $dormIds = array_reduce(
+      $wishlists,
+      function ($carry, $wishlist) {
+        $carry[] = $wishlist->dorm_id;
+        return $carry;
+      },
+      []
+    );
+    $result = Dorm::getInIds($dormIds);
+    $dorms = $result["dorms"];
+    $medias = $result["medias"];
+
+    $this->render("wishlist/index", [
+      "wishlists" => $wishlists,
+      "dorms" => $dorms,
+      "medias" => $medias,
     ]);
-    
   }
 
-  public function add($params){
+  public function add($params)
+  {
     $userId = Request::getUser()->user_id;
     // $form = new Validation([
     //   [new Field('dorm_id'), [new Number()]],
@@ -59,12 +74,12 @@ class WishlistController extends Controller
     $dormId = $params["dormId"];
 
     if (Request::getMethod() === "GET") {
-        $wishlist = Wishlists::toModel(["dorm_id"=>$dormId, "user_id"=>$userId]);
-        // $wishlist->user_id = $userId;
-        // var_dump($wishlist);
-        $wishlist->save();
-        Toast::success("Kos berhasil ditambahkan ke wishlist", true);
-        Response::redirect("/dorms/{$dormId}");
+      $wishlist = Wishlists::toModel(["dorm_id" => $dormId, "user_id" => $userId]);
+      // $wishlist->user_id = $userId;
+      // var_dump($wishlist);
+      $wishlist->save();
+      Toast::success("Kos berhasil ditambahkan ke wishlist", true);
+      Response::redirect("/dorms/{$dormId}");
     }
   }
   public function delete()
@@ -74,8 +89,8 @@ class WishlistController extends Controller
       [new Field('dorm_id'), [new Number()]],
     ]);
     if ($form->validate(Request::getBody())) {
-        $wishlist = Wishlists::where(["user_id"=>$userId, "dorm_id"=>$form->data["dorm_id"]]);
-        $wishlist[0]->delete();
+      $wishlist = Wishlists::where(["user_id" => $userId, "dorm_id" => $form->data["dorm_id"]]);
+      $wishlist[0]->delete();
     }
     Toast::success("Kos berhasil dihapus dari wishlist", true);
     Response::redirect("/wishlist");

src/Models/BaseModel.php

@@ -105,7 +105,7 @@ class BaseModel
 
   public function save()
   {
-    if (isset($this->{static::$primaryKey})) {
+    if (!is_array(static::$primaryKey) && isset($this->{static::$primaryKey})) {
       $this->update();
     } else {
       $this->insert();
@@ -115,13 +115,20 @@ class BaseModel
   private function insert()
   {
     $fields = get_object_vars($this);
-    $fields = array_filter($fields, function ($key) {
-      return $key != static::$primaryKey;
-    }, ARRAY_FILTER_USE_KEY);
+    if (!is_array(static::$primaryKey)) {
+      $fields = array_filter($fields, function ($key) {
+        return $key != static::$primaryKey;
+      }, ARRAY_FILTER_USE_KEY);
+    }
 
     $keys = array_keys($fields);
 
-    $sql = "INSERT INTO " . static::$table . " (" . implode(",", $keys) . ") VALUES (:" . implode(",:", $keys) . ") RETURNING " . static::$primaryKey . ";";
+
+    if (is_array(static::$primaryKey)) {
+      $sql = "INSERT INTO " . static::$table . " (" . implode(",", $keys) . ") VALUES (:" . implode(",:", $keys) . ") RETURNING " . implode(",", static::$primaryKey) . ";";
+    } else {
+      $sql = "INSERT INTO " . static::$table . " (" . implode(",", $keys) . ") VALUES (:" . implode(",:", $keys) . ") RETURNING " . static::$primaryKey . ";";
+    }
 
     $stmt = self::$db->prepare($sql);
 
@@ -131,7 +138,9 @@ class BaseModel
 
     $stmt->execute();
     $data = $stmt->fetch();
-    $this->{static::$primaryKey} = $data[static::$primaryKey];
+    if (!is_array(static::$primaryKey)) {
+      $this->{static::$primaryKey} = $data[static::$primaryKey];
+    }
   }
 
   private function update()

src/Models/Dorm.php

@@ -59,6 +59,33 @@ class Dorm extends BaseModel
       return ["dorms" => [], "medias" => [], "totalPage" => 1];
     }
 
+    $medias = static::getMedias($dorms);
+
+    return ["dorms" => $dorms, "medias" => $medias, "totalPage" => $totalPage];
+  }
+
+  public static function getCities()
+  {
+    $stmt = self::$db->prepare("SELECT DISTINCT city FROM dorms ORDER BY city ASC");
+    $stmt->execute();
+    return $stmt->fetchAll(PDO::FETCH_COLUMN);
+  }
+
+  public static function getInIds(array $ids)
+  {
+    $in  = str_repeat('?,', count($ids) - 1) . '?';
+    $stmt = self::$db->prepare("SELECT * FROM dorms WHERE dorm_id IN ($in)");
+    $stmt->execute($ids);
+
+    $dorms =  self::toModelArray($stmt->fetchAll());
+    $medias = static::getMedias($dorms);
+
+    return ["dorms" => $dorms, "medias" => $medias];
+  }
+
+  private static function getMedias(array $dorms)
+  {
+    if (count($dorms) == 0) return array();
     $dormIds = array_map(fn ($dorm) => $dorm->dorm_id, $dorms);
 
     $stmt = self::$db->prepare("SELECT * FROM medias
@@ -72,14 +99,6 @@ class Dorm extends BaseModel
       $acc[$media->dorm_id] = $media;
       return $acc;
     }, []);
-
-    return ["dorms" => $dorms, "medias" => $medias, "totalPage" => $totalPage];
-  }
-
-  public static function getCities()
-  {
-    $stmt = self::$db->prepare("SELECT DISTINCT city FROM dorms ORDER BY city ASC");
-    $stmt->execute();
-    return $stmt->fetchAll(PDO::FETCH_COLUMN);
+    return $medias;
   }
 }

src/Views/index.php

@@ -11,20 +11,22 @@
   use app\Core\Request;
 
   if ($user->is_admin ?? false) : ?>
-    <div class="cta-admin">
-      <a href="/dorms/create" class="btn btn-primary">Tambah Kos</a>
-    </div>
+  <div class="cta-admin">
+    <a href="/dorms/create" class="btn btn-primary">Tambah Kos</a>
+  </div>
   <? endif; ?>
   <div class="inputs">
     <form class="search-wrapper">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.5" stroke="currentColor" width="16" height="16">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.5"
+        stroke="currentColor" width="16" height="16">
+        <path stroke-linecap="round" stroke-linejoin="round"
+          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
       </svg>
       <input class="search-input" placeholder="Cari Kos" value="<?= Request::getQuery()["q"] ?? "" ?>" />
     </form>
     <div class="input-group">
       <label for="sort">Urutkan</label>
-      <select name="sort" class="sort-select">
+      <select name="sort" id="sort" class="sort-select">
         <option selected value="">Urutkan</option>
         <option value="price ASC">Harga Terendah</option>
         <option value="price DESC">Harga Tertinggi</option>
@@ -32,16 +34,16 @@
     </div>
     <div class="input-group">
       <label for="city">Kota</label>
-      <select name="city" class="city-select">
+      <select name="city" id="city" class="city-select">
         <option selected value="">Semua</option>
         <? foreach ($cities as $city) : ?>
-          <option value="<?= $city ?>"><?= $city ?></option>
+        <option value="<?= $city ?>"><?= $city ?></option>
         <? endforeach; ?>
       </select>
     </div>
     <div class="input-group">
       <label for="price">Harga</label>
-      <select name="price" class="price-select">
+      <select name="price" id="price" class="price-select">
         <option selected value="">Semua</option>
         <option value="price <= 1000000">Rp0 - Rp1.000.000</option>
         <option value="price >= 1000000 AND price <= 2000000">Rp1.000.000 - Rp2.000.000</option>

src/Views/layouts/base.php

@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title><?= $__title ?></title>
+  <meta name="description" content="Website untuk mencari kos-kosan terbaik" />
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@@ -13,9 +14,7 @@
   <link rel="stylesheet" href="/static/styles/main.css" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
-    rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" />
   <?= $__head ?>
 </head>
 
@@ -27,8 +26,7 @@
           <img src="/favicon.png" alt="MyKos Logo" width="20" />MyKos</a>
       </div>
       <button class="nav_btn" aria-label="Open the menu" type="button">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
           <path d="M20 7L4 7" stroke="#757575" stroke-width="1.5" stroke-linecap="round" />
           <path d="M20 12L4 12" stroke="#757575" stroke-width="1.5" stroke-linecap="round" />
           <path d="M20 17L4 17" stroke="#757575" stroke-width="1.5" stroke-linecap="round" />
@@ -36,47 +34,38 @@
       </button>
       <div class="nav_container">
         <button class="nav_btn_close" aria-label="Close the menu" type="button">
-          <svg width="20" height="20" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true">
-            <path d="M3 21.32L21 3.32001" stroke="#757575" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round" />
-            <path d="M3 3.32001L21 21.32" stroke="#757575" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round" />
+          <svg width="20" height="20" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M3 21.32L21 3.32001" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M3 3.32001L21 21.32" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
         </button>
         <div class="nav_items">
           <? if ($user) : ?>
-          <? if ($user->is_admin) : ?>
-          <a href="/owners" class="nav_link">
-            <svg aria-hidden="true" width="16" height="16" class="nav_link_icon" xmlns="http://www.w3.org/2000/svg"
-              fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
-            </svg>
-            Pemilik
-          </a>
-          <? endif; ?>
-          <? if (!$user->is_admin) : ?>
-          <a href="/wishlist" class="nav_link">
-            <svg aria-hidden="true" width="16" height="16" class="nav_link_icon" xmlns="http://www.w3.org/2000/svg"
-              fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
-            </svg>
-            Wishlist
-          </a>
-          <? endif; ?>
-          <a href="/account/edit" class="nav_link">
-            <svg aria-hidden="true" width="16" height="16" class="nav_link_icon" xmlns="http://www.w3.org/2000/svg"
-              fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="black">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
-            </svg>
+            <? if ($user->is_admin) : ?>
+              <a href="/owners" class="nav_link">
+                <svg aria-hidden="true" width="16" height="16" class="nav_link_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
+                </svg>
+                Pemilik
+              </a>
+            <? endif; ?>
+            <? if (!$user->is_admin) : ?>
+              <a href="/wishlist" class="nav_link">
+                <svg aria-hidden="true" width="16" height="16" class="nav_link_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
+                </svg>
+                Wishlist
+              </a>
+            <? endif; ?>
+            <a href="/account/edit" class="nav_link">
+              <svg aria-hidden="true" width="16" height="16" class="nav_link_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="black">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+              </svg>
 
-            Akun</a>
-          <a href="/logout" class="btn btn-danger">Keluar</a>
+              Akun</a>
+            <a href="/logout" class="btn btn-danger">Keluar</a>
           <? else : ?>
-          <a href="/login" class="btn btn-outlined">Masuk</a>
+            <a href="/login" class="btn btn-outlined">Masuk</a>
           <? endif; ?>
         </div>
       </div>
@@ -87,31 +76,28 @@
   </main>
 
   <? if (isset($toast)) : ?>
-  <div class="toast toast-<?= $toast["type"] ?>">
-    <? if ($toast["type"] === "success") : ?>
-    <svg viewBox="0 0 24 24" width="24" height="24" fill="var(--color-primary)">
-      <path
-        d="M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z">
-      </path>
-    </svg>
-    <? elseif ($toast["type"] === "error") : ?>
-    <svg viewBox="0 0 24 24" width="24" height="24" fill="var(--color-danger)">
-      <path
-        d="M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z">
-      </path>
-    </svg>
-    <? endif; ?>
-    <span>
-      <?= $toast["message"] ?>
-    </span>
-    <span class="toast-progress"></span>
-    <button class="toast-close">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="12" height="12" viewBox="0 0 24 24" stroke-width="2"
-        stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-      </svg>
-    </button>
-  </div>
+    <div class="toast toast-<?= $toast["type"] ?>">
+      <? if ($toast["type"] === "success") : ?>
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="var(--color-primary)">
+          <path d="M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z">
+          </path>
+        </svg>
+      <? elseif ($toast["type"] === "error") : ?>
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="var(--color-danger)">
+          <path d="M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z">
+          </path>
+        </svg>
+      <? endif; ?>
+      <span>
+        <?= $toast["message"] ?>
+      </span>
+      <span class="toast-progress"></span>
+      <button class="toast-close">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="12" height="12" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
   <? endif ?>
 
   <script src="/static/scripts/request.js"></script>

src/Views/wishlist/index.php

 @extends('layouts/base')
 @@head
-<link rel="stylesheet" href="/static/styles/owner.css" />
+<link rel="stylesheet" href="/static/styles/home.css">
 @@endhead
 
 
 <h1 class="hero-title">Wishlist</h1>
 <ul class="dorm_list">
-  <? use app\Models\Dorm;
-  $dorms = array();
-  print_r($wishlists);
-  foreach ($wishlists as $wishlist) :
-    $dorms[]= Dorm::findById($wishlist->dorm_id);
-  endforeach;
-
+  <?
   foreach ($dorms as $dorm) : ?>
     <li class="dorm_item">
       <a href="/dorms/<?= $dorm->dorm_id ?>">
@@ -30,43 +24,23 @@
           </p>
         </div>
         <form method="POST">
-            <button type="button" class="btn btn-danger dialog-btn action-btn"
-            data-dialog="delete-<?= $dorm->dorm_id ?>"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
-            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20" height="20">
-            <path stroke-linecap="round" stroke-linejoin="round"
-            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+          <button type="button" class="btn btn-danger dialog-btn action-btn" data-dialog="delete-<?= $dorm->dorm_id ?>"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20" height="20">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
             </svg>
-            </button>
-            <input type="hidden" name="dorm_id" value="<?= $dorm->dorm_id ?>" />
-            <input type="hidden" name="_method" value="DELETE" />
-            <div class="dialog-wrapper delete-<?= $dorm->dorm_id ?>">
-                <div class="dialog-content">
-                <h4 class="confirm-title">Apakah Anda yakin ingin menghapus dorm ini dari wishlist Anda?</h4>
-                <div class="confirm-action">
-                    <button type="button" class="btn btn-outlined dialog-btn"
-                    data-dialog="delete-<?= $dorm->dorm_id ?>">Batal</button>
-                    <button type="submit" class="btn btn-danger">Hapus</button>
-                </div>
-                </div>
+          </button>
+          <input type="hidden" name="dorm_id" value="<?= $dorm->dorm_id ?>" />
+          <input type="hidden" name="_method" value="DELETE" />
+          <div class="dialog-wrapper delete-<?= $dorm->dorm_id ?>">
+            <div class="dialog-content">
+              <h4 class="confirm-title">Apakah Anda yakin ingin menghapus dorm ini dari wishlist Anda?</h4>
+              <div class="confirm-action">
+                <button type="button" class="btn btn-outlined dialog-btn" data-dialog="delete-<?= $dorm->dorm_id ?>">Batal</button>
+                <button type="submit" class="btn btn-danger">Hapus</button>
+              </div>
             </div>
+          </div>
         </form>
       </a>
     </li>
   <? endforeach; ?>
-</ul>
-<!-- <div class="pagination">
-  <? if ($page > 1) : ?>
-    <a href="/?page=<?= $page - 1 ?>" class="pagination_item">
-      <span aria-hidden="true">&laquo;</span>
-      <span class="sr-only">Previous</span></a>
-  <? endif; ?>
-  <? for ($i = 1; $i <= $totalPage; $i++) : ?>
-    <a href="/?page=<?= $i ?>" class="pagination_item <?= $i == $page ? 'active' : '' ?>"><?= $i ?></a>
-  <? endfor; ?>
-
-  <? if ($page < $totalPage) : ?>
-    <a href="/?page=<?= $page + 1 ?>" class="pagination_item">
-      <span aria-hidden="true">&raquo;</span>
-      <span class="sr-only">Next</span></a>
-  <? endif; ?>
-</div> -->
\ No newline at end of file
+</ul>
\ No newline at end of file

src/public/static/scripts/dorm-list.js

@@ -28,6 +28,7 @@ const debounceSearch = debounce((e) => {
 searchBar.addEventListener("input", debounceSearch);
 
 const sortSelect = document.querySelector(".sort-select");
+console.log(sortSelect);
 sortSelect.addEventListener("change", (e) => {
   const sort = e.target.value;
   changeParam("sort", sort);