InputManJSとFastAPIでリッチなコメント機能付きアプリを作成する

python -m venv fastapi-comment-api

cd fastapi-comment-api
Scripts\activate

pip install fastapi uvicorn sqlalchemy python-multipart

from sqlalchemy import create_engine, event
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
from sqlalchemy.engine import Engine

DATABASE_URL = "sqlite:///./test.db"

engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
Base = declarative_base()

@event.listens_for(Engine, "connect")
def set_sqlite_pragma(dbapi_connection, connection_record):
    cursor = dbapi_connection.cursor()
    cursor.execute("PRAGMA foreign_keys=ON")
    cursor.close()

def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey
from .database import Base

class Comment(Base):
    __tablename__ = "comments"
    id = Column('id', Integer, primary_key=True)
    parentCommentId = Column('parentCommentId', Integer, ForeignKey("comments.id", ondelete="CASCADE"), nullable=True)
    content = Column('content', Text)
    userId = Column('userId', Integer)
    mentionInfo = Column('mentionInfo', Text, nullable=True)
    postedTime = Column('postedTime', DateTime)
    updateTime = Column('updateTime', DateTime)

class User(Base):
    __tablename__ = "users"
    id =  Column('id', Integer, primary_key=True)
    username = Column('username', String)
    avatar = Column('avatar', String)

class Reaction(Base):
    __tablename__ = "reactions"
    id = Column('id', Integer, primary_key=True)
    commentId = Column('commentId', Integer, ForeignKey("comments.id", ondelete="CASCADE"))
    userId = Column('userId', Integer)
    reactionChar = Column('reactionChar', Text)

from pydantic import BaseModel
from typing import Union

class CommentIn(BaseModel):
    userId: int
    parentId: Union[int, str, None] = None
    content: str
    mentionInfo: Union[str, None] = None   
        
class ReactionIn(BaseModel):
    reactionChar: str
    commentId: int
    userId: int

from fastapi import Depends, FastAPI, Form, HTTPException, status
from fastapi.exceptions import RequestValidationError
from fastapi.responses import JSONResponse
from sqlalchemy.orm import Session
from sqlalchemy import func
from starlette.middleware.cors import CORSMiddleware
from starlette.requests import Request
from datetime import datetime
from typing import Union
from .database import engine, get_db
from . import models, schemas


models.Base.metadata.create_all(bind=engine)

# コメント情報取得のヘルパー関数
def get_comment(id: int, db_session: Session):
    return db_session.query(models.Comment).filter(models.Comment.id == id).first()

# ユーザー情報取得のヘルパー関数
def get_user(id: int, db_session: Session):
    return db_session.query(models.User).filter(models.User.id == id).first()

app = FastAPI()

# CORS対応
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"], 
    allow_headers=["*"] 
)

# Commentを全件取得
@app.get("/comments")
def read_comments(db: Session = Depends(get_db)):
    comments = db.query(models.Comment).all()
    return {
        "hasMore": False,
        "comments": [
            {
                "id": comment.id,
                "parentCommentId": comment.parentCommentId,
                "content": comment.content,
                "postedTime": comment.postedTime.strftime("%Y/%m/%d %H:%M:%S"),
                "updateTime": comment.updateTime.strftime("%Y/%m/%d %H:%M:%S"),
                "userId": comment.userId,
                "mentionInfo": comment.mentionInfo,
            }
            for comment in comments
        ],
    }

# Commentを登録
@app.post("/comments")
async def create_comment(
    userId: int = Form(...),
    parentId: Union[int, str, None] = Form(None),
    content: str = Form(...),
    mentionInfo: Union[str, None] = Form(None),
    db: Session = Depends(get_db)
):
    formdata = schemas.CommentIn(
        userId=userId,
        parentId=parentId,
        content=content,
        mentionInfo=mentionInfo,
    )

    comment = models.Comment(
        userId=formdata.userId,
        parentCommentId = None if formdata.parentId == 'undefined' else formdata.parentId,
        content=formdata.content,
        mentionInfo=formdata.mentionInfo,
        postedTime=datetime.now(),
        updateTime=datetime.now()
    )

    db.add(comment)
    db.commit()
    db.refresh(comment)
    return comment

# Commentを更新
@app.put("/comments")
async def update_comment(
    id: int = Form(...),
    userId: int = Form(...),
    parentCommentId: Union[int, str, None] = Form(None),
    newContent: str = Form(...),
    mentionInfo: Union[str, None] = Form(None),
    db: Session = Depends(get_db)
):
    formdata = schemas.CommentIn(
        userId=userId,
        parentId=parentCommentId,
        content=newContent,
        mentionInfo=mentionInfo,
    )

    comment = models.Comment(
        userId=formdata.userId,
        parentCommentId=formdata.parentId,
        content=formdata.content,
        mentionInfo=formdata.mentionInfo,
        updateTime=datetime.now()
    )

    db_comment = get_comment(id,db)
    if db_comment is None:
        raise HTTPException(status_code=404, detail="Comment not found")
    else:
        db_comment.userId = comment.userId
        db_comment.parentCommentId = None if comment.parentCommentId == 'undefined' else comment.parentCommentId
        db_comment.content = comment.content
        db_comment.mentionInfo = comment.mentionInfo    
        db_comment.updateTime = comment.updateTime    
    
        db.commit()
        db.refresh(db_comment)
        return db_comment

# Commentを削除
@app.delete("/comments")
def delete_comment(commentId: int, db: Session = Depends(get_db)):
    db_comment = get_comment(commentId,db)
    if db_comment is None:
        raise HTTPException(status_code=404, detail="Comment not found")
    else:
        db_comment = db.query(models.Comment).filter(models.Comment.id == commentId).delete()
        db.commit()
        return True

# Userを取得
@app.get("/users")
def read_user(id: int, db: Session = Depends(get_db)):
    user = get_user(id, db)
    return user

# Reactionを取得
@app.get("/reactions")
def read_reaction(commentId: int, userId: int, db: Session = Depends(get_db)):
    reactions = db.query(models.Reaction.reactionChar, func.count(models.Reaction.reactionChar).label("count")
        ).filter(models.Reaction.commentId == commentId).group_by(models.Reaction.reactionChar).all()

    user_reactions = db.query(models.Reaction.reactionChar).filter(models.Reaction.commentId == commentId, models.Reaction.userId == userId).all()
    user_reacted_chars = {reaction[0] for reaction in user_reactions}

    reaction_info = [
        {
            "reactionChar": reaction[0],
            "count": reaction[1],
            "currentUserReacted": reaction[0] in user_reacted_chars
        }
        for reaction in reactions
    ]

    return reaction_info

# Reactionsを登録
@app.post("/reactions")
async def create_reaction(
    reactChar: str = Form(...),
    commentId: int = Form(...),
    userId: int = Form(...),
    db: Session = Depends(get_db)
):
    formdata = schemas.ReactionIn(
        reactionChar=reactChar,
        commentId=commentId,
        userId=userId,
    )

    reaction = models.Reaction(
        reactionChar=formdata.reactionChar,
        commentId=formdata.commentId,
        userId=formdata.userId,
    )

    db.add(reaction)
    db.commit()
    db.refresh(reaction)
    return True

# Reactionを削除
@app.delete("/reactions")
def delete_reaction(commentId: int, userId: int, reactChar: str, db: Session = Depends(get_db)):
    db_reaction = db.query(models.Reaction).filter(models.Reaction.userId == userId, models.Reaction.commentId == commentId, models.Reaction.reactionChar == reactChar).delete()
    if db_reaction is None:
        raise HTTPException(status_code=404, detail="Reaction not found")
    else:
        db.commit()
        return True

# リクエストエラー時のハンドリング
@app.exception_handler(RequestValidationError)
async def handler(request:Request, exc:RequestValidationError):
    print(exc)
    return JSONResponse(content={}, status_code=status.HTTP_422_UNPROCESSABLE_ENTITY)

uvicorn app.main:app --reload

INSERT INTO USERS (id, username, avatar) VALUES (1, "森上 偉久馬", "./img/avatar1.png");
INSERT INTO USERS (id, username, avatar) VALUES (2, "葛城 孝史", "./img/avatar2.png");
INSERT INTO USERS (id, username, avatar) VALUES (3, "加藤 泰江", "./img/avatar3.png");
INSERT INTO USERS (id, username, avatar) VALUES (4, "川村 匡", "./img/avatar4.png");
INSERT INTO USERS (id, username, avatar) VALUES (5, "松沢 誠一", "./img/avatar5.png");
INSERT INTO USERS (id, username, avatar) VALUES (6, "成宮 真紀", "./img/avatar6.png");

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>コメントコンポーネントサンプル</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/gc.inputman.comment.css" />
    <script src="scripts/gc.inputman.comment.ja.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!--
    <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/comment/css/gc.inputman.comment.css
" />
    <script src="https://cdn.mescius.com/inputmanjs/hosted/comment/scripts/gc.inputman.comment.ja.js"></script>
    -->

    <script src="scripts/app.js"></script>
</head>

<body>
</body>

</html>

・・・（中略）・・・
<body>
    <div id="gcComment"></div>
</body>

</html>

GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

document.addEventListener('DOMContentLoaded', () => {

        const gcComment = new GC.InputMan.GcComment(document.getElementById('gcComment'), {
        dataSource: {
            enabled: true,
            remote: {
                comments: {
                    read: {
                        url: `http://localhost:8000/comments`,
                    },
                    create: {
                        url: `http://localhost:8000/comments`,
                    },
                    update: {
                        url: `http://localhost:8000/comments`,
                    },
                    delete: {
                        url: `http://localhost:8000/comments`,
                    }
                },
                users: {
                    read: {
                        url: `http://localhost:8000/users`,
                        schema: {
                            dataSchema: {
                                name: 'username'
                            }
                        }
                    }
                },
                reactions: {
                    read: {
                        url: `http://localhost:8000/reactions`,
                    },
                    create: {
                        url: `http://localhost:8000/reactions`,
                    },
                    delete: {
                        url: `http://localhost:8000/reactions`,
                    }
                },
            }
        },
        editorConfig: {
            height: 150,
        },
        commentMode: GC.InputMan.GcCommentMode.ThreadMode,
        userInfo: {
            id: "1",
            username: "森上 偉久馬",
            avatar: 'img/avatar1.png',
            avatarType: 'square',
        }
    });
});

・・・（中略）・・・
        userInfo: {
            id: "1",
            username: "森上 偉久馬",
            avatar: 'img/avatar1.png',
            avatarType: 'square',
        }
    });
});