Skip to content

Commit 0c16962

Browse files
naari3naari3
authored
Merge pull request #84 from naari3/add-random
Add random button
2 parents c0d757f + b9c5b5e commit 0c16962

39 files changed

+478
-545
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
"@typescript-eslint/no-explicit-any": "off",
1818
"@typescript-eslint/explicit-module-boundary-types": "off",
1919
"react/prop-types": "off",
20+
"prettier/prettier": ["error", { printWidth: 150 }],
2021
},
2122
globals: {
2223
React: "writable",

‎.github/workflows/lint.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ jobs:
88
- uses: actions/checkout@master
99
- uses: actions/setup-node@v1
1010
with:
11-
node-version: "14"
11+
node-version: "18"
1212
- run: npm install
1313
- run: npm run lint

‎.prettierrc.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
module.exports = {};
1+
module.exports = {
2+
printWidth: 150,
3+
};

‎components/GoogleAnalytics.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@ const GoogleAnalytics: FC = () => {
55
return (
66
existsGaId && (
77
<>
8-
<script
9-
async
10-
src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
11-
/>
8+
<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} />
129
<script
1310
dangerouslySetInnerHTML={{
1411
__html: `

‎components/Header.tsx

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,7 @@ const Header: FC = () => {
3131
})
3232
}
3333
>
34-
<img
35-
src="/otomad-search.svg"
36-
alt="otomad-search"
37-
className={styles.logo}
38-
/>
34+
<img src="/otomad-search.svg" alt="otomad-search" className={styles.logo} />
3935
otomad-search
4036
</a>
4137
</Link>
@@ -44,22 +40,13 @@ const Header: FC = () => {
4440
<header>
4541
<div className={styles.inner}>
4642
<div className={styles.jussen}>
47-
<a
48-
className={styles.jussenLink}
49-
href="http://oto10.s602.xrea.com/10sen/"
50-
target="_blank"
51-
rel="noreferrer"
52-
>
43+
<a className={styles.jussenLink} href="http://oto10.s602.xrea.com/10sen/" target="_blank" rel="noreferrer">
5344
{t("10sen-navi-link")}
5445
</a>
5546
</div>
5647
</div>
5748
</header>
58-
<header
59-
className={`${styles.headerSearchBar} ${
60-
router.pathname === "/search" ? styles.searchBar : ""
61-
}`}
62-
>
49+
<header className={`${styles.headerSearchBar} ${router.pathname === "/search" ? styles.searchBar : ""}`}>
6350
<div className={styles.inner}>
6451
<SearchBar />
6552
</div>

‎components/JussenButton.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import useTranslation from "next-translate/useTranslation";
66
const JussenButton: FC<{ targetYear: number }> = ({ targetYear }) => {
77
const searchDispatch = useSearchDispatch();
88
const { t } = useTranslation("JussenButton");
9-
const ev: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (
10-
e
11-
) => {
9+
const ev: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = (e) => {
1210
e.preventDefault();
1311

1412
const since = `${targetYear - 1}-12-11T00:00`;

‎components/Pager.tsx

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import React, { useEffect, useState, FC } from "react";
22
import styles from "./Pager.module.css";
33
import Link from "next/link";
44
import { useGlobalState as useSearchGlobalState } from "../contexts/SearchContext";
5-
import {
6-
useDispatch as useLoadingDispatch,
7-
useGlobalState as useLoadingGlobalState,
8-
} from "../contexts/LoadingContext";
5+
import { useDispatch as useLoadingDispatch, useGlobalState as useLoadingGlobalState } from "../contexts/LoadingContext";
96
import removeEmpty from "../lib/removeEmpty";
107
import { UrlObject } from "url";
11-
import { actualMaxPageNumber, MAX_OFFSET, MAX_SS_OFFSET } from "../lib/pager";
8+
import { actualMaxPageNumber, MAX_SS_OFFSET } from "../lib/pager";
129
import * as gtag from "../lib/gtag";
1310

1411
type Url = string | UrlObject;
@@ -22,9 +19,7 @@ const PagerButton: FC<PagerButtonProps> = ({ href, children }) => {
2219
const loading = useLoadingGlobalState();
2320

2421
return loading ? (
25-
<span className={`${styles.pagerButton} ${styles.disabled}`}>
26-
{children}
27-
</span>
22+
<span className={`${styles.pagerButton} ${styles.disabled}`}>{children}</span>
2823
) : (
2924
<Link href={href}>
3025
<a
@@ -55,11 +50,7 @@ const Pager: FC = () => {
5550
const [hasNextNextPage, setHasNextNextPage] = useState(false);
5651

5752
useEffect(() => {
58-
const actualMaxPageNum = actualMaxPageNumber(
59-
options.per,
60-
options.count,
61-
MAX_SS_OFFSET
62-
);
53+
const actualMaxPageNum = actualMaxPageNumber(options.per, options.count, MAX_SS_OFFSET);
6354
setHasPrevPrevPage(options.page > 2);
6455
setHasPrevPage(options.page > 1);
6556
setHasNextPage(actualMaxPageNum > options.page);
@@ -107,11 +98,7 @@ const Pager: FC = () => {
10798
""
10899
)}
109100

110-
<span
111-
className={`${styles.pagerButton} ${styles.switchingButton} ${styles.active}`}
112-
>
113-
{options.page}
114-
</span>
101+
<span className={`${styles.pagerButton} ${styles.switchingButton} ${styles.active}`}>{options.page}</span>
115102

116103
{hasNextPage ? (
117104
<PagerButton

‎components/SearchBar.module.css renamed to ‎components/SearchBar.module.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,16 @@
3333
}
3434

3535
.searchButton {
36+
display: inline-block;
37+
background-color: buttonface;
38+
cursor: pointer;
3639
padding: 2px 5px;
3740
border: 0;
3841
border-left: #bbbbbb solid 1px;
42+
&.searchButton_Disabled {
43+
background-color: rgba(239, 239, 239, 0.3);
44+
color: rgba(16, 16, 16, 0.3);
45+
}
3946
}
4047

4148
.inputOrder {

‎components/SearchBar.tsx

Lines changed: 72 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
import React, { FC, useEffect, useState } from "react";
22
import Link from "next/link";
3-
import styles from "./SearchBar.module.css";
3+
import styles from "./SearchBar.module.scss";
44
import removeEmpty from "../lib/removeEmpty";
55
import parseLimitedFloat from "../lib/parseLimitedFloat";
66
import * as gtag from "../lib/gtag";
77

8-
import {
9-
useDispatch as useSearchDispatch,
10-
useGlobalState as useSearchGlobalState,
11-
} from "../contexts/SearchContext";
12-
import {
13-
useDispatch as useLoadingDispatch,
14-
useGlobalState as useLoadingGlobalState,
15-
} from "../contexts/LoadingContext";
8+
import { useDispatch as useSearchDispatch, useGlobalState as useSearchGlobalState } from "../contexts/SearchContext";
9+
import { useDispatch as useLoadingDispatch, useGlobalState as useLoadingGlobalState } from "../contexts/LoadingContext";
1610
import JussenButton from "./JussenButton";
1711

1812
import useTranslation from "next-translate/useTranslation";
@@ -63,61 +57,78 @@ const SearchBar: FC = () => {
6357
<div className={styles.searchBar}>
6458
<form>
6559
<div className={styles.filter}>
66-
<div>
67-
<div className={styles.otomadFixWrap}>
68-
<label className={styles.otomadLabel}>音MAD </label>
69-
<input
70-
type="text"
71-
value={options.q || ""}
72-
className={styles.inputQueryBar}
73-
autoComplete={"off"}
74-
onChange={(e) => {
75-
searchDispatch({
60+
<div className={styles.otomadFixWrap}>
61+
<label className={styles.otomadLabel}>音MAD </label>
62+
<input
63+
type="text"
64+
value={options.q || ""}
65+
className={styles.inputQueryBar}
66+
autoComplete={"off"}
67+
onChange={(e) => {
68+
searchDispatch({
69+
type: "update",
70+
payload: { q: e.target.value },
71+
});
72+
}}
73+
/>
74+
<Link
75+
href={{
76+
pathname: "/search",
77+
query: { ...removeEmpty(options), page: 1 },
78+
}}
79+
>
80+
<a
81+
className={`${styles.searchButton} ${loading ? styles.searchButton_Disabled : ""}`}
82+
// disabled={loading}
83+
onClick={() => {
84+
gtag.event({
85+
action: "search",
86+
category: "Otomads",
87+
label: "happy",
88+
});
89+
loadingDispatch({
7690
type: "update",
77-
payload: { q: e.target.value },
91+
payload: true,
7892
});
7993
}}
80-
/>
81-
<Link
82-
href={{
83-
pathname: "/search",
84-
query: { ...removeEmpty(options), page: 1 },
94+
>
95+
{t("search")}
96+
</a>
97+
</Link>
98+
<Link
99+
href={{
100+
pathname: "/random",
101+
query: { ...removeEmpty(options) },
102+
}}
103+
>
104+
<a
105+
onClick={() => {
106+
gtag.event({
107+
action: "random",
108+
category: "Otomads",
109+
label: "lucky",
110+
});
85111
}}
112+
className={`${styles.searchButton} ${loading ? styles.searchButton_Disabled : ""}`}
86113
>
87-
<button
88-
className={styles.searchButton}
89-
disabled={loading}
90-
onClick={() => {
91-
gtag.event({
92-
action: "search",
93-
category: "Otomads",
94-
label: "happy",
95-
});
96-
loadingDispatch({
97-
type: "update",
98-
payload: true,
99-
});
100-
}}
101-
>
102-
{t("search")}
103-
</button>
104-
</Link>
105-
</div>
106-
{options.count === null || options.count === undefined ? (
107-
""
108-
) : (
109-
<span>
110-
{options.count.toLocaleString()} {t("results")}
111-
</span>
112-
)}
113-
{takesALongTime ? (
114-
<div>
115-
<span>{t("search-firsttime")}</span>
116-
</div>
117-
) : (
118-
""
119-
)}
114+
{t("random")}
115+
</a>
116+
</Link>
120117
</div>
118+
{options.count === null || options.count === undefined ? (
119+
""
120+
) : (
121+
<span>
122+
{options.count.toLocaleString()} {t("results")}
123+
</span>
124+
)}
125+
{takesALongTime ? (
126+
<div>
127+
<span>{t("search-firsttime")}</span>
128+
</div>
129+
) : (
130+
""
131+
)}
121132
</div>
122133
<div className={styles.filter}>
123134
<span className={styles.filterName}>{t("sort")}</span>
@@ -198,7 +209,7 @@ const SearchBar: FC = () => {
198209
<input
199210
className={styles.inputNumber}
200211
type="number"
201-
step="0.1"
212+
step="0.01"
202213
min="0"
203214
value={options.lengthMinutesGte || ""}
204215
onChange={(e) => {
@@ -216,7 +227,7 @@ const SearchBar: FC = () => {
216227
<input
217228
className={styles.inputNumber}
218229
type="number"
219-
step="0.1"
230+
step="0.01"
220231
min="0"
221232
value={options.lengthMinutesLte || ""}
222233
onChange={(e) => {
@@ -342,11 +353,7 @@ const SearchBar: FC = () => {
342353
/>
343354
</label>
344355
<JussenButton targetYear={new Date().getFullYear()} />
345-
{isJussenPast ? (
346-
<JussenButton targetYear={new Date().getFullYear() + 1} />
347-
) : (
348-
""
349-
)}
356+
{isJussenPast ? <JussenButton targetYear={new Date().getFullYear() + 1} /> : ""}
350357
</div>
351358
</form>
352359
</div>

‎components/TagList.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ type Props = {
99
const TagList = React.memo(({ tags }: Props) => {
1010
const ref = useRef<HTMLUListElement>(null);
1111

12-
const filteredTags = (tags: string[]): string[] =>
13-
tags.filter(
14-
(tag) => !["音MAD", "音mad", "音ＭＡＤ", "音ｍａｄ"].includes(tag)
15-
);
12+
const filteredTags = (tags: string[]): string[] => tags.filter((tag) => !["音MAD", "音mad", "音ＭＡＤ", "音ｍａｄ"].includes(tag));
1613

1714
useEffect(() => {
1815
if (ref.current) {

‎components/TagOnScreen.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ import Tag, { NoLinkTag } from "./Tag";
1010
const TagOnScreen: FC<{ name: string }> = ({ name }) => {
1111
return (
1212
<TrackVisibility throttleInterval={0} offset={250} partialVisibility={true}>
13-
{({ isVisible }) =>
14-
isVisible ? <Tag name={name} /> : <NoLinkTag name={name}></NoLinkTag>
15-
}
13+
{({ isVisible }) => (isVisible ? <Tag name={name} /> : <NoLinkTag name={name}></NoLinkTag>)}
1614
</TrackVisibility>
1715
);
1816
};

‎components/Thumbnail.tsx

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,9 @@ import { useState, Dispatch, SetStateAction, useEffect, FC } from "react";
22
import styles from "./Thumbnail.module.css";
33
import TrackVisibility from "react-on-screen";
44

5-
const NO_THUMBNAIL_URL =
6-
"https://nicovideo.cdn.nimg.jp/web/img/common/no_thumbnail_M.jpg";
5+
const NO_THUMBNAIL_URL = "https://nicovideo.cdn.nimg.jp/web/img/common/no_thumbnail_M.jpg";
76

8-
const Inner = ({
9-
isVisible,
10-
setViewable,
11-
}: {
12-
isVisible: boolean;
13-
setViewable: Dispatch<SetStateAction<boolean>>;
14-
}) => {
7+
const Inner = ({ isVisible, setViewable }: { isVisible: boolean; setViewable: Dispatch<SetStateAction<boolean>> }) => {
158
useEffect(() => {
169
if (isVisible) setViewable(isVisible);
1710
}, [isVisible]);
@@ -27,15 +20,8 @@ const Thumbnail: FC<{
2720

2821
return (
2922
<>
30-
<TrackVisibility
31-
once={true}
32-
throttleInterval={0}
33-
partialVisibility={true}
34-
offset={250}
35-
>
36-
{({ isVisible }) => (
37-
<Inner isVisible={isVisible} setViewable={setViewable} />
38-
)}
23+
<TrackVisibility once={true} throttleInterval={0} partialVisibility={true} offset={250}>
24+
{({ isVisible }) => <Inner isVisible={isVisible} setViewable={setViewable} />}
3925
</TrackVisibility>
4026
<img
4127
className={styles.thumb}

0 commit comments

Comments
 (0)