Stock/islands/StockList.tsx

230 lines
5.9 KiB
TypeScript
Raw Normal View History

2023-07-23 00:32:54 +09:00
import { Button } from "../components/Button.tsx";
2023-07-28 17:52:07 +09:00
import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
2023-07-23 00:32:54 +09:00
import { ComponentChildren } from "preact";
import { Signal, useSignal } from "@preact/signals";
2023-07-24 09:10:32 +09:00
import { IS_BROWSER } from "$fresh/runtime.ts";
import { mapValues } from "$std/collections/map_values.ts";
2023-07-28 17:52:07 +09:00
import { useAsync } from "../util/util.ts";
import {
Coperation,
CorpSimple,
fetchKosdaqList,
fetchKospiList,
fetchPageInfo,
PageCorpsInfo,
} from "../util/api.ts";
2023-07-23 00:32:54 +09:00
interface StockProps {
pageName: string;
}
interface ToggleButtonProps {
2023-07-24 09:10:32 +09:00
disabled?: boolean;
toggle: Signal<boolean>;
2023-07-23 00:32:54 +09:00
children?: ComponentChildren;
}
function ToggleButton(props: ToggleButtonProps) {
2023-07-24 09:10:32 +09:00
const { disabled, toggle, ...rest } = props;
2023-07-23 00:32:54 +09:00
return (
2023-07-24 09:10:32 +09:00
<button
{...rest}
disabled={!IS_BROWSER || disabled}
onClick={() => toggle.value = !toggle.value}
class={"px-2 py-1 border-2 rounded transition-colors" + (
toggle.value
? "border-gray-500 bg-white hover:bg-gray-200"
: "border-gray-200 bg-gray-800 hover:bg-gray-500 text-white"
)}
/>
2023-07-23 00:32:54 +09:00
);
}
2023-07-28 17:52:07 +09:00
function StockListByDate(
{ prevSet, rows, name }: {
prevSet: Set<string>;
rows: Coperation[];
name: string;
},
) {
const lastCount = useRef(rows.length);
const curCount = rows.length;
2023-07-24 09:10:32 +09:00
const parent = useRef<HTMLDivElement>(null);
2023-07-28 17:52:07 +09:00
const controller = useRef<
{
isEnabled: () => boolean;
disable: () => void;
enable: () => void;
} | undefined
>();
useEffect(() => {
(async () => {
console.log("animation mount on ", name);
const { default: autoAnimate } = await import(
"https://esm.sh/@formkit/auto-animate@0.7.0"
);
if (parent.current) {
const cntr = autoAnimate(parent.current);
controller.current = cntr;
}
2023-07-24 09:10:32 +09:00
})();
2023-07-28 17:52:07 +09:00
}, [parent]);
2023-07-24 09:10:32 +09:00
2023-07-28 17:52:07 +09:00
useLayoutEffect(() => {
if (controller.current) {
if (Math.abs(curCount - lastCount.current) > 200) {
console.log("disable animation", curCount, "from", lastCount.current);
controller.current.disable();
2023-07-28 17:52:07 +09:00
} else {
console.log("enable animation", curCount, "from", lastCount.current);
controller.current.enable();
}
lastCount.current = curCount;
}
}, [parent, rows]);
2023-07-28 17:52:07 +09:00
return (
<div ref={parent}>
<h2 class="text-lg">{name}</h2>
{rows.map((row) => {
const firstOccur = !prevSet.has(row.Code);
return (
<div
key={row.Code}
class={[
"bg-white",
firstOccur ? "text-[#ff5454] underline" : "text-black",
].join(" ")}
>
<a href={`https://stockplus.com/m/stocks/KOREA-A${row.Code}`}>
{row.Name}
</a>
</div>
);
})}
</div>
);
2023-07-24 09:10:32 +09:00
}
function StockList({ data }: { data: PageCorpsInfo }) {
console.log("data");
const corpListByDate = data.corpListByDate;
const keys = Object.keys(corpListByDate).sort().reverse().slice(0, 5)
.reverse();
const sets = keys.map((x) => new Set(corpListByDate[x].map((y) => y.Code)));
//const rows = data.corpListbyDate;
return (
<div class="flex">
{keys.map((x, i) => {
const prevSet = i == 0 ? new Set<string>() : sets[i - 1];
const rows = corpListByDate[x];
return (
2023-07-28 17:52:07 +09:00
<StockListByDate key={x} name={x} prevSet={prevSet} rows={rows} />
2023-07-24 09:10:32 +09:00
);
})}
2023-07-23 00:32:54 +09:00
</div>
2023-07-24 09:10:32 +09:00
);
}
type FilterInfoOption = {
list: {
items: CorpSimple[];
include: boolean;
}[];
otherwise: boolean;
};
function filterInfo(info: Coperation[], filterList: FilterInfoOption) {
const checkMap = new Map<string, boolean>();
for (const l of filterList.list) {
for (const i of l.items) {
2023-10-27 00:01:27 +09:00
checkMap.set(i.Code, l.include);
2023-07-24 09:10:32 +09:00
}
}
return info.filter((x) => {
const v = checkMap.get(x.Code);
if (v === undefined) {
return filterList.otherwise;
} else {
return v;
}
});
2023-07-23 00:32:54 +09:00
}
export default function StockListUI(props: StockProps) {
2023-07-28 17:52:07 +09:00
const sig = useAsync<[PageCorpsInfo, CorpSimple[], CorpSimple[]]>(() =>
Promise.all([
fetchPageInfo(props.pageName),
fetchKospiList(),
fetchKosdaqList(),
])
);
2023-07-24 09:10:32 +09:00
const viewKospi = useSignal(true);
const viewKosdaq = useSignal(false);
const viewOtherwise = useSignal(false);
2023-07-23 00:32:54 +09:00
return (
<div class="my-2">
<div class="flex gap-2">
2023-07-24 09:10:32 +09:00
<ToggleButton toggle={viewKospi}>Kospi</ToggleButton>
<ToggleButton toggle={viewKosdaq}>Kosdaq</ToggleButton>
<ToggleButton toggle={viewOtherwise}>Otherwise</ToggleButton>
2023-07-23 00:32:54 +09:00
</div>
<div class="flex gap-8 py-6 flex-col">
{sig.value.type == "loading"
? (new Array(20).fill(0).map((_) => (
<div class="animate-pulse bg-gray-300 p-2"></div>
)))
2023-07-24 09:10:32 +09:00
: (
<div>
{sig.value.type == "error"
? (
<div>
2023-07-23 00:32:54 +09:00
<p>File Loading Failed</p>
2023-07-24 09:10:32 +09:00
</div>
)
2023-07-28 17:52:07 +09:00
: (
<StockList
data={applyFilter(
sig.value.data[0],
sig.value.data[1],
sig.value.data[2],
)}
/>
)}
2023-07-24 09:10:32 +09:00
</div>
)}
2023-07-23 00:32:54 +09:00
</div>
</div>
);
2023-07-28 17:52:07 +09:00
function applyFilter(
data: PageCorpsInfo,
kospi: CorpSimple[],
kosdaq: CorpSimple[],
): PageCorpsInfo {
const filter = getFilters(kospi, kosdaq);
2023-07-24 09:10:32 +09:00
return {
name: data.name,
description: data.description,
2023-07-28 17:52:07 +09:00
corpListByDate: mapValues(data.corpListByDate, (it: Coperation[]) => {
2023-07-24 09:10:32 +09:00
return filterInfo(it, filter);
2023-07-28 17:52:07 +09:00
}),
};
2023-07-24 09:10:32 +09:00
}
2023-07-28 17:52:07 +09:00
function getFilters(
kospi: CorpSimple[],
kosdaq: CorpSimple[],
): FilterInfoOption {
2023-07-24 09:10:32 +09:00
return {
otherwise: viewOtherwise.value,
list: [{
2023-07-28 17:52:07 +09:00
include: viewKospi.value,
items: kospi,
}, {
include: viewKosdaq.value,
items: kosdaq,
}],
};
2023-07-24 09:10:32 +09:00
}
2023-07-23 00:32:54 +09:00
}