fix: wrong image order and wrong origin badge when add pets

.dockerignore

@@ -0,0 +1,8 @@
+.git
+node_modules
+Dockerfile
+.gitignore
+README.md
+.prettierrc
+docker-compose.yml
+.env

.eslintrc.json

@@ -38,7 +38,11 @@
     "import/resolver": {
       "node": {
         "extensions": [".js", ".jsx", ".ts", ".tsx"],
-        "moduleDirectory": ["node_modules", "src/"]
+        "moduleDirectory": ["node_modules", "src/", "@/"]
+      },
+      "alias": {
+        "map": [["@", "./src/"]],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
   }

.github/workflows/ci.yml

@@ -0,0 +1,42 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - dev
+      - main
+    tags:
+      - v*
+
+env:
+  IMAGE_NAME: ghcr.io/${{ github.repository }}
+
+permissions:
+  contents: read
+  packages: write
+
+jobs:
+  build-and-push:
+    name: Build and push docker image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Login to registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ github.token }}
+
+      - name: Setup buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          tags: ${{ env.IMAGE_NAME }}:${{ github.ref_type == 'tag' && github.ref_name ||  github.sha }}
+          cache-from: type=gha,ref=${{ env.IMAGE_NAME }}:buildcache
+          cache-to: type=gha,ref=${{ env.IMAGE_NAME }}:buildcache,mode=max
+          build-args: |
+            API_URL=https://api.johnjud.com/v1

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:21-alpine3.18 AS base
+
+ARG API_URL
+
+ENV VITE_API_URL=${API_URL}
+ENV COREPACK_ENABLE_STRICT=0
+
+RUN npm i -g pnpm 
+
+WORKDIR /app
+
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
+
+COPY . .
+
+RUN pnpm build
+
+EXPOSE 4173
+
+CMD ["pnpm", "preview"]

README.md

@@ -44,7 +44,7 @@ pnpm install
 pnpm dev
 ```
 
-5. Go to [http://localhost:3000](http://localhost:3000) in your fav browser.
+5. Go to [http://localhost:5173](http://localhost:5173) in your fav browser.
 
 ## Contributing
 
@@ -110,4 +110,27 @@ The commit message should start with one of the following types:
 -   refactor: A code change that neither fixes a bug nor adds a feature
 -   style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 
-For more information, please read the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/) documentation.
+For more information, please read the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/) documentation.
+
+
+## Implement API
+
+This project use `@tanstack/react-query` with `axios` for fetching data and We will use custom queries hooks for query.
+
+Please see in Discord for `.env` file
+
+Structure
+
+- `src/api` : Store api fetching function using `axios`
+- `src/types` : Store type of fetched data
+- `src/hook/queries` : Store query function from `@tanstack/react-query`
+- `src/hook/mutation` : Store mutation function
+
+Instruction Step :
+
+1. Create type from data in `src/types` if have pagination use `Meta` from `src/types/common.ts`
+2. Create fetching function in `src/api` and passing type to axios function
+3. Create query function in `src/hook/quries` or mutation function in `src/hook/mutation`
+4. Implement Query or Mutation function in **Page** and pass data to components
+
+** **Do not query data in any Component !!**

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:5173",
+    testIsolation: false,
+  },
+});

cypress/e2e/authentication.cy.ts

@@ -0,0 +1,58 @@
+describe("authentication", () => {
+  it("can visit the site", () => {
+    cy.visit("/");
+    cy.wait(2000);
+    localStorage.clear();
+  });
+
+  it("can open sidebar", () => {
+    cy.get("#open-sidebar").click();
+  });
+
+  it("can navigate to login page", () => {
+    cy.get("a").contains("Admin Login").click();
+
+    cy.wait(1000);
+    cy.url().should("include", "/admin");
+    cy.get("h1").contains("เข้าสู่ระบบ");
+  });
+
+  it("can login", () => {
+    cy.wait(2000);
+    cy.get(`input[name="email"]`).type("[email protected]");
+    cy.get(`input[name="password"]`).type("12345678");
+    cy.get("button").contains("เข้าสู่ระบบ").click();
+
+    cy.wait(2000);
+    cy.url().should("include", "/admin/pets");
+    cy.get("#open-sidebar").click();
+    cy.get("button").contains("Logout").should("exist");
+  });
+
+  it("can logout", () => {
+    cy.get("button").contains("Logout").click();
+
+    cy.wait(1000);
+    cy.url().should("include", "/admin");
+  });
+
+  it("can navigate to forget password page", () => {
+    cy.get("a").contains("ลืมรหัสผ่าน?").click();
+
+    cy.wait(1000);
+    cy.url().should("include", "/admin/forget-password");
+    cy.get("h1").contains("ลืมรหัสผ่าน?");
+  });
+
+  it("can request forget password", () => {
+    cy.get(`input[name="email"]`).type("[email protected]");
+    cy.get("button").contains("รีเซตรหัสผ่าน").click();
+
+    cy.wait(1000);
+    cy.get("h2").contains("อีเมลรีเซ็ตถูกส่งแล้ว").should("exist");
+    cy.get("button").contains("กลับไปหน้าเข้าสู่ระบบ").click();
+
+    cy.wait(1000);
+    cy.url().should("include", "/admin");
+  });
+});

cypress/e2e/ui.cy.ts

@@ -0,0 +1,163 @@
+describe("first page", () => {
+  it("can visit the site", () => {
+    cy.visit("/");
+    cy.wait(2000);
+    localStorage.clear();
+  });
+
+  it("can show items correctly in sidebar", () => {
+    cy.get("#open-sidebar").click();
+
+    cy.get("a").contains("หน้าหลัก").should("exist");
+    cy.get("a").contains("สัตว์เลี้ยง").should("exist");
+    cy.get("a").contains("เล่นเกม").should("exist");
+    cy.get("a").contains("ดูดวง").should("exist");
+    cy.get("a").contains("คำถามที่พบบ่อย").should("exist");
+    cy.get("a").contains("เกี่ยวกับเรา").should("exist");
+    cy.get("a").contains("รายการที่ชอบ").should("exist");
+    cy.get("a").contains("Admin Login").should("exist");
+    cy.get("button").contains("Logout").should("not.exist");
+
+    cy.get("#close-sidebar").click();
+  });
+
+  it("can navigate to home page", () => {
+    cy.get("button").contains("กดดูเลย").should("exist");
+    cy.get("button").contains("กดดูเลย").click();
+    cy.wait(2000);
+  });
+});
+
+describe("home page", () => {
+  it("should show carousel", () => {
+    cy.get("div.carousel.carousel-slider").should("exist");
+  });
+
+  it("should have 8 mini cards", () => {
+    cy.get("div.w-40.rounded-2xl.bg-white.shadow-md").should("have.length", 8);
+  });
+
+  it("should have pet cards", () => {
+    cy.get(
+      "div.flex.w-80.flex-col.items-start.justify-start.rounded-2xl.bg-white.p-4.shadow"
+    ).should("have.length.at.least", 8);
+  });
+
+  it("can navigate to home page", () => {
+    cy.get("#open-sidebar").click();
+    cy.get("a").contains("สัตว์เลี้ยง").click();
+    cy.wait(2000);
+  });
+});
+
+describe("pets page", () => {
+  it("should have search input", () => {
+    cy.get(`input[placeholder="ค้นหาสัตว์เลี้ยง"]`).should("exist");
+  });
+
+  it("should have pet cards", () => {
+    cy.get(
+      "div.flex.w-80.flex-col.items-start.justify-start.rounded-2xl.bg-white.p-4.shadow"
+    ).should("have.length.at.least", 8);
+  });
+
+  it("should have filter button", () => {
+    cy.get("button > svg.iconify--custom").should("exist");
+    cy.get("button > svg.iconify--custom").click();
+  });
+
+  it("should show filter menu correctly", () => {
+    cy.get("button.bg-accent-red")
+      .contains("ประเภทสัตว์เลี้ยง")
+      .should("exist");
+    cy.get("button.bg-accent-red").contains("เพศ").should("exist");
+    cy.get("button.bg-accent-red").contains("สี").should("exist");
+    cy.get("button.bg-accent-red").contains("อายุ").should("exist");
+  });
+
+  it("can navigate to pet detail page", () => {
+    // TODO: Add Random Click
+    cy.get(
+      "div.flex.w-80.flex-col.items-start.justify-start.rounded-2xl.bg-white.p-4.shadow"
+    )
+      .eq(1)
+      .click();
+    cy.wait(2000);
+  });
+});
+
+describe("pet detail page", () => {
+  it("should have carousel", () => {
+    cy.get("div.carousel.carousel-slider").should("exist");
+  });
+
+  it("should have pet name", () => {
+    cy.get("h2.text-3xl.font-bold.text-primary").should("exist");
+  });
+
+  it("should have description", () => {
+    cy.get("textarea").should("exist");
+  });
+
+  it("should have like button", () => {
+    cy.get("#like-button").should("exist");
+  });
+
+  it("should have gender detail", () => {
+    cy.get("div").contains("เพศ").should("exist");
+  });
+
+  it("should have type detail", () => {
+    cy.get("div").contains("ชนิด").should("exist");
+  });
+
+  it("should have birthdate detail", () => {
+    cy.get("div").contains("วันเกิด").should("exist");
+  });
+
+  it("should have habit detail", () => {
+    cy.get("div").contains("นิสัย").should("exist");
+  });
+
+  it("should have vaccinate detail", () => {
+    cy.get("button").contains("ฉีดวัคซีนแล้ว").should("exist");
+  });
+
+  it("should have sterile detail", () => {
+    cy.get("button").contains("ทำหมันแล้ว").should("exist");
+  });
+
+  it("should have adoption button", () => {
+    cy.get("button").contains("รับเลี้ยงเลย").should("exist");
+  });
+
+  it("should have small pet card", () => {
+    cy.get("div.w-48.rounded-2xl.bg-white.p-3.shadow-md").should(
+      "have.length.at.least",
+      8
+    );
+  });
+
+  it("can navigate to pet adoption page", () => {
+    cy.get("button").contains("รับเลี้ยงเลย").click();
+    cy.wait(2000);
+  });
+});
+
+describe("pet adoption page", () => {
+  it("should have carousel", () => {
+    cy.get("div.carousel.carousel-slider").should("exist");
+  });
+
+  it("should have pet name", () => {
+    cy.get("h2.text-3xl.font-bold.text-primary").should("exist");
+  });
+
+  it("should have pet name", () => {
+    cy.get("h3").contains("ข้อตกลงการรับเลี้ยง").should("exist");
+    cy.get("button.bg-accent-red").contains("รับเลี้ยงเลย").should("exist");
+    cy.get("button.bg-accent-red").contains("รับเลี้ยงเลย").click();
+
+    cy.get("button.bg-primary").contains("รับเลี้ยงเลย").should("exist");
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}