Support likes fields

components/SearchBar.tsx

@@ -26,6 +26,8 @@ const sortAxisOptions = [
   "-commentCounter",
   "+mylistCounter",
   "-mylistCounter",
+  "+likeCounter",
+  "-likeCounter",
   "+lengthSeconds",
   "-lengthSeconds",
   "+lastCommentTime",
@@ -260,6 +262,39 @@ const SearchBar: FC = () => {
             <span className={styles.filterWord}>{t("common:max")}</span>
           </label>
         </div>
+        <div className={styles.filter}>
+          <span className={styles.filterName}>{t("like-count")}</span>
+          <label>
+            <input
+              className={styles.inputNumber}
+              type="number"
+              min="0"
+              value={options.likeCounterGte || ""}
+              onChange={(e) => {
+                searchDispatch({
+                  type: "update",
+                  payload: { likeCounterGte: parseInt(e.target.value) },
+                });
+              }}
+            />
+            <span className={styles.filterWord}>{t("common:min")}</span>
+          </label>
+          <label>
+            <input
+              className={styles.inputNumber}
+              type="number"
+              min="0"
+              value={options.likeCounterLte || ""}
+              onChange={(e) => {
+                searchDispatch({
+                  type: "update",
+                  payload: { likeCounterLte: parseInt(e.target.value) },
+                });
+              }}
+            />
+            <span className={styles.filterWord}>{t("common:max")}</span>
+          </label>
+        </div>
         <div className={styles.filter}>
           <span className={styles.filterName}>{t("date-filter")}</span>
           <label className={styles.filterDate}>

locales/en/SearchBar.json

@@ -14,12 +14,15 @@
   "-commentCounter": "Least Comments",
   "+mylistCounter": "Least My Listed",
   "-mylistCounter": "Most My Listed",
+  "+likeCounter": "Least Liked",
+  "-likeCounter": "Most Liked",
   "+lengthSeconds": "Shortest Duration",
   "-lengthSeconds": "Longest Duration",
   "+lastCommentTime": "Oldest Comments",
   "-lastCommentTime": "Newest Comments",
   "my-list-count": "# of My Lists",
   "duration": "Duration (in minutes)",
+  "like-count": "Likes",
   "duration-minutes-min": "min. length",
   "duration-minutes-max": "max. length",
   "views": "Views",

locales/ja/SearchBar.json

@@ -14,12 +14,15 @@
   "-commentCounter": "コメント数が多い順",
   "+mylistCounter": "マイリスト数が少ない順",
   "-mylistCounter": "マイリスト数が多い順",
+  "+likeCounter": "いいね数が少ない順",
+  "-likeCounter": "いいね数が多い順",
   "+lengthSeconds": "再生時間が短い順",
   "-lengthSeconds": "再生時間が長い順",
   "+lastCommentTime": "コメントが古い順",
   "-lastCommentTime": "コメントが新しい順",
   "my-list-count": "マイリスト数",
   "duration": "再生時間",
+  "like-count": "いいね数",
   "duration-minutes-min": "分以上",
   "duration-minutes-max": "分以下",
   "views": "再生数",

pages_/search.tsx

@@ -121,6 +121,8 @@ const getSearchQuery = ({
   mylistCounterLte,
   viewCounterGte,
   viewCounterLte,
+  likeCounterGte,
+  likeCounterLte,
   lengthMinutesGte,
   lengthMinutesLte,
   startTimeGte,
@@ -166,6 +168,19 @@ const getSearchQuery = ({
     filters["viewCounter"]["lte"] = viewCounterLte;
   }
 
+  if (likeCounterGte) {
+    if (!filters["likeCounter"]) {
+      filters["likeCounter"] = {};
+    }
+    filters["likeCounter"]["gte"] = likeCounterGte;
+  }
+  if (likeCounterLte !== null) {
+    if (!filters["likeCounter"]) {
+      filters["likeCounter"] = {};
+    }
+    filters["likeCounter"]["lte"] = likeCounterLte;
+  }
+
   if (startTimeGte) {
     if (!filters["startTime"]) {
       filters["startTime"] = {};
@@ -288,6 +303,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     mylistCounterLte: roundNumber(parseQueryToInt(query.mylistCounterLte)),
     viewCounterGte: roundNumber(parseQueryToInt(query.viewCounterGte)),
     viewCounterLte: roundNumber(parseQueryToInt(query.viewCounterLte)),
+    likeCounterGte: roundNumber(parseQueryToInt(query.likeCounterGte)),
+    likeCounterLte: roundNumber(parseQueryToInt(query.likeCounterLte)),
     lengthMinutesGte: roundNumber(
       parseQueryToLimitedFloat(query.lengthMinutesGte)
     ),

reducers/search.ts

@@ -9,6 +9,8 @@ export type SearchOptions = {
   lengthMinutesLte?: number;
   viewCounterGte?: number;
   viewCounterLte?: number;
+  likeCounterGte?: number;
+  likeCounterLte?: number;
   userId?: number;
   count?: number;
   page?: number;