From 27d1d96c9d3348ff9b41a239f84722b93a3e376c Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Sun, 7 May 2023 09:13:37 +0900
Subject: [PATCH] Modify backend for Calckey

---
 .../server/api/endpoints/channels/search.ts   | 67 ++++++++-----------
 packages/client/src/pages/channels.vue        | 17 ++---
 2 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/channels/search.ts b/packages/backend/src/server/api/endpoints/channels/search.ts
index 5527adb9b4..5758d81a67 100644
--- a/packages/backend/src/server/api/endpoints/channels/search.ts
+++ b/packages/backend/src/server/api/endpoints/channels/search.ts
@@ -1,9 +1,8 @@
-import { Inject, Injectable } from "@nestjs/common";
+import define from "../../define.js";
 import { Brackets } from "typeorm";
 import { Endpoint } from "@/server/api/endpoint-base.js";
-import { QueryService } from "@/core/QueryService.js";
-import type { ChannelsRepository } from "@/models/index.js";
-import { ChannelEntityService } from "@/core/entities/ChannelEntityService.js";
+import { makePaginationQuery } from "@/server/api/common/make-pagination-query.js";
+import { Channels } from "@/models/index.js";
 import { DI } from "@/di-symbols.js";
 import { sqlLikeEscape } from "@/misc/sql-like-escape.js";
 
@@ -41,44 +40,32 @@ export const paramDef = {
 	required: ["query"],
 } as const;
 
-// eslint-disable-next-line import/no-default-export
-@Injectable()
-export default class extends Endpoint<typeof meta, typeof paramDef> {
-	constructor(
-		@Inject(DI.channelsRepository)
-		private channelsRepository: ChannelsRepository,
+export default define(meta, paramDef, async (ps, me) => {
+	const query = makePaginationQuery(
+		Channels.createQueryBuilder("channel"),
+		ps.sinceId,
+		ps.untilId,
+	);
 
-		private channelEntityService: ChannelEntityService,
-		private queryService: QueryService,
-	) {
-		super(meta, paramDef, async (ps, me) => {
-			const query = this.queryService.makePaginationQuery(
-				this.channelsRepository.createQueryBuilder("channel"),
-				ps.sinceId,
-				ps.untilId,
-			);
-
-			if (ps.type === "nameAndDescription") {
-				query.andWhere(
-					new Brackets((qb) => {
-						qb.where("channel.name ILIKE :q", {
-							q: `%${sqlLikeEscape(ps.query)}%`,
-						}).orWhere("channel.description ILIKE :q", {
-							q: `%${sqlLikeEscape(ps.query)}%`,
-						});
-					}),
-				);
-			} else {
-				query.andWhere("channel.name ILIKE :q", {
+	if (ps.type === "nameAndDescription") {
+		query.andWhere(
+			new Brackets((qb) => {
+				qb.where("channel.name ILIKE :q", {
+					q: `%${sqlLikeEscape(ps.query)}%`,
+				}).orWhere("channel.description ILIKE :q", {
 					q: `%${sqlLikeEscape(ps.query)}%`,
 				});
-			}
-
-			const channels = await query.take(ps.limit).getMany();
-
-			return await Promise.all(
-				channels.map((x) => this.channelEntityService.pack(x, me)),
-			);
+			}),
+		);
+	} else {
+		query.andWhere("channel.name ILIKE :q", {
+			q: `%${sqlLikeEscape(ps.query)}%`,
 		});
 	}
-}
+
+	const channels = await query.take(ps.limit).getMany();
+
+	return await Promise.all(
+		channels.map((x) => Channels.pack(x, me)),
+	);
+});
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index f188fb1daf..5c87027878 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -22,7 +22,6 @@
 			>
 				<swiper-slide>
 					<div class="_content grwlizim search">
-						<div class="gaps">
 							<MkInput
 								v-model="searchQuery"
 								:large="true"
@@ -30,12 +29,15 @@
 								type="search"
 							>
 								<template #prefix
-									><i class="ph-search ph-bold ph-lg"></i
+									><i
+										class="ph-magnifying-glass ph-bold ph-lg"
+									></i
 								></template>
 							</MkInput>
 							<MkRadios
 								v-model="searchType"
 								@update:model-value="search()"
+								class="_gap"
 							>
 								<option value="nameAndDescription">
 									{{ i18n.ts._channel.nameAndDescription }}
@@ -50,9 +52,9 @@
 								gradate
 								rounded
 								@click="search"
+								class="_gap"
 								>{{ i18n.ts.search }}</MkButton
 							>
-						</div>
 						<MkFoldableSection v-if="channelPagination">
 							<template #header>{{
 								i18n.ts.searchResult
@@ -124,10 +126,10 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 import MkChannelPreview from "@/components/MkChannelPreview.vue";
 import MkChannelList from "@/components/MkChannelList.vue";
 import MkPagination from "@/components/MkPagination.vue";
-import MkInput from "@/components/MkInput.vue";
-import MkRadios from "@/components/MkRadios.vue";
+import MkInput from "@/components/form/input.vue";
+import MkRadios from "@/components/form/radios.vue";
 import MkButton from "@/components/MkButton.vue";
-import MkFoldableSection from "@/components/MkFoldableSection.vue";
+import MkFolder from "@/components/MkFolder.vue";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
@@ -147,7 +149,6 @@ const props = defineProps<{
 	type?: string;
 }>();
 let key = $ref("");
-let tab = $ref("search");
 let searchQuery = $ref("");
 let searchType = $ref("nameAndDescription");
 let channelPagination = $ref();
@@ -201,7 +202,7 @@ const headerTabs = $computed(() => [
 	{
 		key: "search",
 		title: i18n.ts.search,
-		icon: "ph-search ph-bold ph-lg",
+		icon: "ph-magnifying-glass ph-bold ph-lg",
 	},
 	{
 		key: "featured",