chore: update

admin/src/app/(pages)/categories/[id]/page.tsx

@@ -0,0 +1,32 @@
+import { QuestionCard } from "@/components/QuestionCard";
+import { getCategoryById, getQuestionsByCategoryId } from "@/lib/data";
+import React from "react";
+
+export default async function CategoryDetail({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const category = await getCategoryById(Number(params.id));
+  const questions = await getQuestionsByCategoryId(Number(params.id));
+
+  return (
+    <main>
+      <div className="px-4 md:px-8 py-4 bg-gray-100">
+        <h2 className="my-4 pl-3 text-xl font-bold border-l-4 border-green-300">
+          {category.name}の質問を探す
+        </h2>
+        <div className="grid xl:grid-cols-4 sm:grid-cols-2 gap-4 mx-auto">
+          {questions.map((item) => (
+            <QuestionCard
+              key={item.id}
+              id={item.id.toString()}
+              title={item.title}
+              content={item.content}
+            />
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}

admin/src/lib/data.ts

@@ -11,11 +11,25 @@ export const getCategories = async () => {
     name: string,
     name_en: string,
     icon: string,
-    created_at: Date,
-    updated_at: Date,
   }[]
 }
 
+export const getCategoryById = async (id: number) => {
+  const res = await fetch(`http://localhost:3000/categories/${id}`, {
+    method: "GET",
+    headers: {
+      'Accept': 'application/json'
+    }
+  }).then(res => res.json())
+
+  return res as {
+    id: number,
+    name: string,
+    name_en: string,
+    icon: string,
+  }
+}
+
 export const getQuestions = async () => {
   const res = await fetch('http://localhost:3000/questions', {
     method: 'GET',
@@ -49,3 +63,22 @@ export const getQuestionById = async (id: number) => {
     postedByMe: boolean
   }
 }
+
+export const getQuestionsByCategoryId = async (id: number) => {
+  const res = await fetch(`http://localhost:3000/categories/${id}/questions`, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json'
+    }
+  }).then(res => res.json())
+
+  // FIXME
+  res.postedByMe = false
+
+  return res as {
+    id: number,
+    title: string,
+    content: string
+    postedByMe: boolean
+  }[]
+}

backend/app/controllers/questions_controller.rb

@@ -5,6 +5,7 @@ class QuestionsController < ApplicationController
   # GET /questions
   def index
     @questions = Question.all
+    @questions = Question.where(category_id: params['category_id']) if params['category_id'].present?
 
     render json: @questions
   end

backend/compose.yml

@@ -30,6 +30,7 @@ services:
       - redis
     expose: ["3000"]
     ports: ["3000:3000"]
+    command: /bin/sh -c "bin/rails server -b 0.0.0.0"
     user: root
     working_dir: /app
 

backend/config/routes.rb

@@ -1,15 +1,17 @@
 Rails.application.routes.draw do
   if Rails.env.development?
     mount GraphiQL::Rails::Engine, at: '/graphiql', graphql_path: '/graphql'
-  end  
+  end
   post "/graphql", to: "graphql#execute"
 
   root 'top#index'
 
   resources :favorite_questions
   resources :draft_questions
   resources :tags
-  resources :categories
+  resources :categories do
+    resources :questions, only: [:index]
+  end
   resources :users
   resources :questions