-
- - {card.title} -
- {card.version && ( - - {card.version} - - )} -- {card.description} -
- - ); -}; diff --git a/src/features/gameCard/index.ts b/src/features/gameCard/index.ts deleted file mode 100644 index fcda3e6..0000000 --- a/src/features/gameCard/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { GameCard } from "./gameCard"; - -export { GameCard }; diff --git a/src/features/itemCard/index.ts b/src/features/itemCard/index.ts new file mode 100644 index 0000000..de3f029 --- /dev/null +++ b/src/features/itemCard/index.ts @@ -0,0 +1,3 @@ +import { ItemCard } from "./itemCard"; + +export { ItemCard }; diff --git a/src/features/itemCard/itemCard.tsx b/src/features/itemCard/itemCard.tsx new file mode 100644 index 0000000..d5ceec5 --- /dev/null +++ b/src/features/itemCard/itemCard.tsx @@ -0,0 +1,52 @@ +import { + isAudiobook, + isGame, + isMovie, + ItemCardType, + ItemService, +} from "@/entities/item"; +import { Img } from "@/shared/ui"; +import Link from "next/link"; + +export const ItemCard = ({ card }: { card: ItemCardType }) => { + return ( + + {!!card.cover && ( +
+
+ + {card.title} +
+ + {isGame(card) && card.version && ( + + {card.version} + + )} + {isMovie(card) && card.age && ( + + {card.age} + + )} + {isAudiobook(card) && card.author && ( + + {card.author} + + )} ++ {card.description} +
+ + ); +}; diff --git a/src/shared/ui/modal.tsx b/src/shared/ui/modal.tsx index b8871a6..a2ab468 100644 --- a/src/shared/ui/modal.tsx +++ b/src/shared/ui/modal.tsx @@ -13,7 +13,7 @@ export const Modal = ({ children }: { children: React.ReactNode }) => { !closing && "animate-fadeIn", closing && "animate-fadeOut opacity-0", "flex items-center justify-around", - "absolute z-20 left-0 w-full h-full bg-[#000000c5]" + "absolute z-30 left-0 w-full h-full bg-[#000000c5]" )} onClick={() => { setClosing(true); diff --git a/src/widgets/gameInfo/gameInfo.tsx b/src/widgets/gameInfo/gameInfo.tsx deleted file mode 100644 index eba9752..0000000 --- a/src/widgets/gameInfo/gameInfo.tsx +++ /dev/null @@ -1,446 +0,0 @@ -"use client"; - -import { - gameCreateSchema, - GameCreateType, - GameService, - GameType, -} from "@/entities/game"; -import clsx from "clsx"; -import Link from "next/link"; -import { getYouTubeID } from "@/shared/utils"; -import { UserService } from "@/entities/user"; -import useSWR from "swr"; -import { useCallback, useEffect, useRef, useState, useMemo } from "react"; -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { Img } from "@/shared/ui"; -import { useDropzone } from "react-dropzone"; -import { FilesService } from "@/entities/files"; -import { SpinnerIcon } from "@/shared/assets/icons"; - -const isExistingGame = (game: GameCreateType | GameType): game is GameType => { - return (game as GameType).id !== undefined; -}; - -export const GameInfo = ({ - game: init_game, -}: { - game: GameCreateType | GameType; -}) => { - const [game, changeGame] = useState
+ {cover && (
+ 
+ )}
+ {!cover && editable && (
+
+ )}
+
+ {editable && (
+
+ )}
+
+ );
+};
diff --git a/src/widgets/itemInfo/itemDetails.tsx b/src/widgets/itemInfo/itemDetails.tsx
new file mode 100644
index 0000000..6706e40
--- /dev/null
+++ b/src/widgets/itemInfo/itemDetails.tsx
@@ -0,0 +1,115 @@
+import { ItemCreateType, ItemType } from "@/entities/item";
+import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import clsx from "clsx";
+import { SpinnerIcon } from "@/shared/assets/icons";
+
+export const ItemDetails = ({
+ title,
+ description,
+ editable,
+ state,
+ registerFormField: register,
+ setFormValue: setValue,
+}: {
+ title: {
+ title: string;
+ default_title: string;
+ error: string | undefined;
+ };
+ description: {
+ description: string | null | undefined;
+ default_description: string | null | undefined;
+ };
+ editable: boolean;
+ state: "saved" | "editing" | "error";
+ registerFormField: UseFormRegister
+
+
+ {isCoverDragActive ? (
+
+ )}
+ Изменить обложку...
+ ) : ( + <> + + Для редактирования нажмите или перетащите новую обложку + поверх старой + + + Для редактирования нажмите на обложку и выберите фото + + + )} + +{ + setValue("title", e.currentTarget.innerText, { + shouldValidate: true, + shouldDirty: true, + }); + }} + > + {title.default_title} +
+ + {editable && ( + + {} + {state === "editing" && ( + <> +{title.error}
+ {(description.default_description || editable) && (
+
+ {editable && (
+
+ Введите описание
+
+ )}
+ {
+ setValue("description", e.currentTarget.innerText, {
+ shouldValidate: true,
+ shouldDirty: true,
+ });
+ }}
+ >
+ {description.default_description}
+
+
+ )}
+
+ );
+};
diff --git a/src/widgets/itemInfo/itemFragment.tsx b/src/widgets/itemInfo/itemFragment.tsx
new file mode 100644
index 0000000..b36a6d4
--- /dev/null
+++ b/src/widgets/itemInfo/itemFragment.tsx
@@ -0,0 +1,81 @@
+import { FilesService } from "@/entities/files";
+import { ItemCreateType, ItemType } from "@/entities/item";
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import clsx from "clsx";
+
+export const ItemFragment = ({
+ fragment,
+ editable,
+ setFormValue: setValue,
+ registerFormField: register,
+}: {
+ fragment: string | undefined | null;
+ editable: boolean;
+ setFormValue: UseFormSetValue
+
+ );
+};
diff --git a/src/widgets/itemInfo/itemInfo.tsx b/src/widgets/itemInfo/itemInfo.tsx
new file mode 100644
index 0000000..d475671
--- /dev/null
+++ b/src/widgets/itemInfo/itemInfo.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { isAudiobook, isGame, ItemCreateType, ItemType } from "@/entities/item";
+import { UserService } from "@/entities/user";
+import useSWR from "swr";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ItemCover } from "./itemCover";
+import { ItemService } from "@/entities/item/item";
+import { ItemProperties } from "./itemProperties";
+import { ItemTrailer } from "./itemTrailer";
+import { ItemTorrent } from "./itemTorrent";
+import { ItemDetails } from "./itemDetails";
+import { isMovie } from "@/entities/item/movie/schemas/movie";
+import { ItemFragment } from "./itemFragment";
+
+export const ItemInfo =
+
+ {editable && (
+ <>
+
+
+ {isFragmentDragActive ? (
+ Изменить фрагмент...
+ ) : (
+
+ Для редактирования нажмите или перетащите новый фрагмент
+ поверх старого
+
+ )}
+
+
+ )}
+
+
+ {(ItemService.GetPropertiesDescriptionForItem(item) ?? []).map(
+ (section, i) => (
+
+ );
+};
diff --git a/src/widgets/itemInfo/itemTorrent.tsx b/src/widgets/itemInfo/itemTorrent.tsx
new file mode 100644
index 0000000..7f92a83
--- /dev/null
+++ b/src/widgets/itemInfo/itemTorrent.tsx
@@ -0,0 +1,102 @@
+import { FilesService } from "@/entities/files";
+import { ItemCreateType, ItemType } from "@/entities/item";
+import Link from "next/link";
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { UseFormSetValue } from "react-hook-form";
+import clsx from "clsx";
+
+export const ItemTorrent = ({
+ title,
+ torrent_file,
+ editable,
+ error,
+ setFormValue: setValue,
+}: {
+ title: string;
+ torrent_file: string;
+ editable: boolean;
+ error: string | undefined;
+ setFormValue: UseFormSetValue-
+ {section.map((req) => (
+
- + {req.name + ": "} + + + Не известно + + { + setValue( + req.key as keyof ItemType, + e.currentTarget.innerText, + { + shouldValidate: true, + shouldDirty: true, + } + ); + }} + > + {req.value + ? req.value(item) + : undefined ?? (item[req.key] as string)} + + + + ))} +
+
+
+
+ Скачать {title}
+
+ {editable && (
+ <>
+
+
+ {error && (
+ {error}
+ )}
+ {isTorrentDragActive ? (
+
+ Изменить .torrent файл...
+
+ ) : (
+
+ Нажмите, чтобы изменить
+ .torrent файл + + )} + + + )} +
+ + .torrent файл + + )} + + + )} +
+
+ Как скачать игру
+
с помощью .torrent файла? + +
+
+ );
+};
diff --git a/src/widgets/itemInfo/itemTrailer.tsx b/src/widgets/itemInfo/itemTrailer.tsx
new file mode 100644
index 0000000..b16b428
--- /dev/null
+++ b/src/widgets/itemInfo/itemTrailer.tsx
@@ -0,0 +1,51 @@
+import { ItemCreateType, ItemType } from "@/entities/item";
+import { getYouTubeID } from "@/shared/utils";
+import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+
+export const ItemTrailer = ({
+ trailer,
+ default_trailer,
+ editable,
+ setFormValue: setValue,
+ registerFormField: register,
+}: {
+ trailer: string | undefined;
+ default_trailer: string | undefined;
+ editable: boolean;
+ setFormValue: UseFormSetValueс помощью .torrent файла? + +
+ {trailer && getYouTubeID(trailer) && (
+
+ )}
+ {!trailer && editable && (
+
+ )}
+
+ )}
+
+ {editable && (
+
+ {
+ setValue("trailer", e.target.value);
+ },
+ })}
+ defaultValue={default_trailer}
+ />
+
+ )}
+
+ );
+};
diff --git a/tsconfig.json b/tsconfig.json
index 7b28589..8e364bc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,8 @@
],
"paths": {
"@/*": ["./src/*"]
- }
+ },
+ "experimentalDecorators": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]