mapcomplete/UI/Reviews/SingleReview.ts

import Combine from "../Base/Combine"
import { FixedUiElement } from "../Base/FixedUiElement"
import Translations from "../i18n/Translations"
import { Utils } from "../../Utils"
import BaseUIElement from "../BaseUIElement"
import Img from "../Base/Img"
import { Review } from "mangrove-reviews-typescript"
import { Store } from "../../Logic/UIEventSource"

export default class SingleReview extends Combine {
    constructor(review: Review & { madeByLoggedInUser: Store<boolean> }) {
        const date = new Date(review.iat * 1000)
        const reviewAuthor =
            review.metadata.nickname ??
            (review.metadata.given_name ?? "") + (review.metadata.family_name ?? "")
        const authorElement = new FixedUiElement(reviewAuthor).SetClass("font-bold")

        super([
            new Combine([SingleReview.GenStars(review.rating)]),
            new FixedUiElement(review.opinion),
            new Combine([
                new Combine([
                    authorElement,
                    review.metadata.is_affiliated
                        ? Translations.t.reviews.affiliated_reviewer_warning
                        : "",
                ]).SetStyle("margin-right: 0.5em"),
                new FixedUiElement(
                    `${date.getFullYear()}-${Utils.TwoDigits(
                        date.getMonth() + 1
                    )}-${Utils.TwoDigits(date.getDate())} ${Utils.TwoDigits(
                        date.getHours()
                    )}:${Utils.TwoDigits(date.getMinutes())}`
                ).SetClass("subtle"),
            ]).SetClass("flex mb-4 justify-end"),
        ])
        this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element")
        review.madeByLoggedInUser.addCallbackAndRun((madeByUser) => {
            if (madeByUser) {
                authorElement.SetClass("thanks")
            } else {
                authorElement.RemoveClass("thanks")
            }
        })
    }

    public static GenStars(rating: number): BaseUIElement {
        if (rating === undefined) {
            return Translations.t.reviews.no_rating
        }
        if (rating < 10) {
            rating = 10
        }
        const scoreTen = Math.round(rating / 10)
        return new Combine([
            ...Utils.TimesT(scoreTen / 2, (_) =>
                new Img("./assets/svg/star.svg").SetClass("'h-8 w-8 md:h-12")
            ),
            scoreTen % 2 == 1
                ? new Img("./assets/svg/star_half.svg").SetClass("h-8 w-8 md:h-12")
                : undefined,
        ]).SetClass("flex w-max")
    }
}