feat: favorite posts WordPress plugin

.gitignore

@@ -0,0 +1,5 @@
+vendor/
+node_modules/
+.parcel-cache/
+*.css.map
+*.js.map

apiki-favorites.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Plugin Name: Apiki Favorites
+ * Description: Favorite posts functionality for logged-in users via WP REST API.
+ * Version: 1.0.0
+ * Requires PHP: 8.1
+ * Author: Hahuma <firminopetterson@gmail.com>
+ * License: MIT
+ * Text Domain: apiki-favorites
+ */
+
+declare(strict_types=1);
+
+defined('ABSPATH') || exit;
+
+require_once __DIR__ . '/vendor/autoload.php';
+
+ApikiFavorites\Plugin::instance()->boot();

assets/scss/index.scss

@@ -0,0 +1,71 @@
+.apiki-favorite-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 0.8;
+    transform: scale(1.2);
+  }
+
+  &--active {
+    opacity: 1;
+
+    svg {
+      fill: #e53935;
+    }
+  }
+
+  &--loading {
+    opacity: 0.4;
+    pointer-events: none;
+    animation: pulse 0.8s infinite alternate;
+  }
+
+  svg {
+    fill: none;
+    stroke: #e53935;
+    stroke-width: 2;
+    transition: fill 0.2s ease;
+  }
+}
+
+@keyframes pulse {
+  from { transform: scale(1); }
+  to { transform: scale(1.15); }
+}
+
+.apiki-toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 12px 20px;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  z-index: 99999;
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &--success {
+    background: #43a047;
+  }
+
+  &--error {
+    background: #e53935;
+  }
+}

assets/ts/api.ts

@@ -0,0 +1,43 @@
+declare const apikiFavorites: {
+  restUrl: string;
+  nonce: string;
+  isLoggedIn: boolean;
+};
+
+interface FavoriteResponse {
+  id: number;
+  post_id: number;
+  created_at: string;
+}
+
+async function request<T>(method: string, body?: Record<string, unknown>): Promise<T> {
+  const options: RequestInit = {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      "X-WP-Nonce": apikiFavorites.nonce,
+    },
+    credentials: "same-origin",
+  };
+
+  if (body) {
+    options.body = JSON.stringify(body);
+  }
+
+  const response = await fetch(apikiFavorites.restUrl, options);
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.message || "Request failed");
+  }
+
+  return response.json();
+}
+
+export function addFavorite(postId: number): Promise<FavoriteResponse> {
+  return request<FavoriteResponse>("POST", { post_id: postId });
+}
+
+export function removeFavorite(postId: number): Promise<{ deleted: boolean }> {
+  return request<{ deleted: boolean }>("DELETE", { post_id: postId });
+}

assets/ts/index.ts

@@ -0,0 +1,45 @@
+import { addFavorite, removeFavorite } from "./api";
+import { showToast } from "./toast";
+import "../scss/index.scss";
+
+function init(): void {
+  document.querySelectorAll<HTMLButtonElement>(".apiki-favorite-btn").forEach((button) => {
+    button.addEventListener("click", handleClick);
+  });
+}
+
+async function handleClick(event: Event): Promise<void> {
+  const button = event.currentTarget as HTMLButtonElement;
+  const postId = Number(button.dataset.postId);
+
+  if (!postId || button.disabled) return;
+
+  button.disabled = true;
+  button.classList.add("apiki-favorite-btn--loading");
+
+  const isActive = button.classList.contains("apiki-favorite-btn--active");
+
+  try {
+    if (isActive) {
+      await removeFavorite(postId);
+      button.classList.remove("apiki-favorite-btn--active");
+      button.setAttribute("aria-label", "Add to favorites");
+      button.setAttribute("title", "Add to favorites");
+      showToast("Removed from favorites", "success");
+    } else {
+      await addFavorite(postId);
+      button.classList.add("apiki-favorite-btn--active");
+      button.setAttribute("aria-label", "Remove from favorites");
+      button.setAttribute("title", "Remove from favorites");
+      showToast("Added to favorites!", "success");
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Something went wrong";
+    showToast(message, "error");
+  } finally {
+    button.disabled = false;
+    button.classList.remove("apiki-favorite-btn--loading");
+  }
+}
+
+document.addEventListener("DOMContentLoaded", init);

assets/ts/toast.ts

@@ -0,0 +1,15 @@
+export function showToast(message: string, type: "success" | "error"): void {
+  const toast = document.createElement("div");
+  toast.className = `apiki-toast apiki-toast--${type}`;
+  toast.textContent = message;
+  document.body.appendChild(toast);
+
+  requestAnimationFrame(() => {
+    toast.classList.add("apiki-toast--visible");
+  });
+
+  setTimeout(() => {
+    toast.classList.remove("apiki-toast--visible");
+    toast.addEventListener("transitionend", () => toast.remove());
+  }, 3000);
+}

composer.json

@@ -0,0 +1,19 @@
+{
+  "name": "apiki/favorites",
+  "description": "WordPress plugin for favoriting posts via REST API.",
+  "type": "wordpress-plugin",
+  "require": {
+    "php": ">= 8.1"
+  },
+  "license": "MIT",
+  "autoload": {
+    "psr-4": {
+      "ApikiFavorites\\": "src/"
+    }
+  },
+  "autoload-dev": {
+    "psr-4": {
+      "ApikiFavorites\\Tests\\": "tests/"
+    }
+  }
+}

docker-compose.yml

@@ -0,0 +1,35 @@
+services:
+  wordpress:
+    image: wordpress:php8.3-apache
+    ports:
+      - "8888:80"
+    environment:
+      WORDPRESS_DB_HOST: db
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_PASSWORD: wordpress
+      WORDPRESS_DB_NAME: wordpress
+    volumes:
+      - wp_data:/var/www/html
+      - ./:/var/www/html/wp-content/plugins/apiki-favorites
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: mysql:8.0
+    environment:
+      MYSQL_ROOT_PASSWORD: root
+      MYSQL_DATABASE: wordpress
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: wordpress
+    volumes:
+      - db_data:/var/lib/mysql
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+volumes:
+  wp_data:
+  db_data: