|
|
|
@ -10,6 +10,7 @@ import ResourceIcon from "@/components/ResourceIcon";
|
|
|
|
|
import { resourceServiceClient } from "@/grpcweb";
|
|
|
|
|
import useLoading from "@/hooks/useLoading";
|
|
|
|
|
import i18n from "@/i18n";
|
|
|
|
|
import { useMemoStore } from "@/store/v1";
|
|
|
|
|
import { Resource } from "@/types/proto/api/v2/resource_service";
|
|
|
|
|
import { useTranslate } from "@/utils/i18n";
|
|
|
|
|
|
|
|
|
@ -38,6 +39,7 @@ const Resources = () => {
|
|
|
|
|
const [state, setState] = useState<State>({
|
|
|
|
|
searchQuery: "",
|
|
|
|
|
});
|
|
|
|
|
const memoStore = useMemoStore();
|
|
|
|
|
const [resources, setResources] = useState<Resource[]>([]);
|
|
|
|
|
const filteredResources = resources.filter((resource) => includes(resource.filename, state.searchQuery));
|
|
|
|
|
const groupedResources = groupResourcesByDate(filteredResources.filter((resoure) => resoure.memoId));
|
|
|
|
@ -47,6 +49,7 @@ const Resources = () => {
|
|
|
|
|
resourceServiceClient.listResources({}).then(({ resources }) => {
|
|
|
|
|
setResources(resources);
|
|
|
|
|
loadingState.setFinish();
|
|
|
|
|
Promise.all(resources.map((resource) => (resource.memoId ? memoStore.getOrFetchMemoById(resource.memoId) : null)));
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
@ -109,6 +112,7 @@ const Resources = () => {
|
|
|
|
|
</div>
|
|
|
|
|
<div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap">
|
|
|
|
|
{resources.map((resource) => {
|
|
|
|
|
const relatedMemo = resource.memoId ? memoStore.getMemoById(resource.memoId) : null;
|
|
|
|
|
return (
|
|
|
|
|
<div key={resource.id} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
|
|
|
|
|
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
|
|
|
|
@ -116,13 +120,15 @@ const Resources = () => {
|
|
|
|
|
</div>
|
|
|
|
|
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
|
|
|
|
|
<p className="text-xs shrink text-gray-400 truncate">{resource.filename}</p>
|
|
|
|
|
<Link
|
|
|
|
|
className="shrink-0 text-xs ml-1 text-gray-400 hover:underline hover:text-blue-600"
|
|
|
|
|
to={`/m/${resource.memoId}`}
|
|
|
|
|
target="_blank"
|
|
|
|
|
>
|
|
|
|
|
#{resource.memoId}
|
|
|
|
|
</Link>
|
|
|
|
|
{relatedMemo && (
|
|
|
|
|
<Link
|
|
|
|
|
className="shrink-0 text-xs ml-1 text-gray-400 hover:underline hover:text-blue-600"
|
|
|
|
|
to={`/m/${relatedMemo.name}`}
|
|
|
|
|
target="_blank"
|
|
|
|
|
>
|
|
|
|
|
#{relatedMemo.id}
|
|
|
|
|
</Link>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|