diff --git a/front/Dockerfile b/front/Dockerfile index c341b8ce..6ff38b3a 100644 --- a/front/Dockerfile +++ b/front/Dockerfile @@ -8,6 +8,7 @@ COPY apps/web/package.json apps/web/package.json COPY apps/mobile/package.json apps/mobile/package.json COPY packages/ui/package.json packages/ui/package.json COPY packages/primitives/package.json packages/primitives/package.json +COPY packages/models/package.json packages/models/package.json RUN yarn --immutable COPY . . diff --git a/front/Dockerfile.dev b/front/Dockerfile.dev index 25657fef..b1e58e67 100644 --- a/front/Dockerfile.dev +++ b/front/Dockerfile.dev @@ -8,6 +8,7 @@ COPY apps/web/package.json apps/web/package.json COPY apps/mobile/package.json apps/mobile/package.json COPY packages/ui/package.json packages/ui/package.json COPY packages/primitives/package.json packages/primitives/package.json +COPY packages/models/package.json packages/models/package.json RUN yarn --immutable ENV NEXT_TELEMETRY_DISABLED 1 diff --git a/front/apps/mobile/app.json b/front/apps/mobile/app.json index 6d19ed5f..bb736b11 100644 --- a/front/apps/mobile/app.json +++ b/front/apps/mobile/app.json @@ -4,7 +4,7 @@ "slug": "kyoo", "scheme": "kyoo", "version": "1.0.0", - "orientation": "portrait", + "orientation": "default", "icon": "./assets/icon.png", "entryPoint": "./index.ts", "userInterfaceStyle": "light", diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx index 3c96d1a1..98e9b1ce 100644 --- a/front/apps/mobile/app/_layout.tsx +++ b/front/apps/mobile/app/_layout.tsx @@ -22,6 +22,9 @@ import { Stack } from "expo-router"; import { Avatar, ThemeSelector } from "@kyoo/primitives"; import { useTheme } from "yoshiki/native"; import { NavbarTitle } from "@kyoo/ui"; +import { useState } from "react"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { createQueryClient } from "@kyoo/models"; const ThemedStack = () => { const theme = useTheme(); @@ -44,9 +47,13 @@ const ThemedStack = () => { }; export default function Root() { + const [queryClient] = useState(() => createQueryClient()); + return ( - - - + + + + + ); } diff --git a/front/apps/mobile/app/index.tsx b/front/apps/mobile/app/index.tsx index 47d23c48..9447d5b2 100644 --- a/front/apps/mobile/app/index.tsx +++ b/front/apps/mobile/app/index.tsx @@ -18,6 +18,7 @@ * along with Kyoo. If not, see . */ +import { Navbar } from "@kyoo/ui"; import { Text, View } from "react-native"; import { useYoshiki } from "yoshiki/native"; @@ -26,7 +27,7 @@ const App = () => { return ( theme.background })}> - {/* */} + toto ); diff --git a/front/apps/mobile/metro.config.js b/front/apps/mobile/metro.config.js index 36560b59..33d774e3 100644 --- a/front/apps/mobile/metro.config.js +++ b/front/apps/mobile/metro.config.js @@ -1,4 +1,23 @@ -// Learn more https://docs.expo.dev/guides/monorepos +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + const { getDefaultConfig } = require("expo/metro-config"); const path = require("path"); diff --git a/front/apps/web/next.config.js b/front/apps/web/next.config.js index 320870e3..be7877a8 100755 --- a/front/apps/web/next.config.js +++ b/front/apps/web/next.config.js @@ -81,6 +81,7 @@ const nextConfig = { transpilePackages: [ "@kyoo/ui", "@kyoo/primitives", + "@kyoo/models", "solito", "react-native", "react-native-web", diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 61086978..dcd0bfae 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -14,12 +14,12 @@ "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@jellyfin/libass-wasm": "^4.1.1", + "@kyoo/models": "workspace:^", "@kyoo/primitives": "workspace:^", "@kyoo/ui": "workspace:^", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.8.7", "@mui/system": "^5.10.10", - "@tanstack/react-query": "^4.18.0", "clsx": "^1.2.1", "csstype": "^3.1.1", "hls.js": "^1.2.8", diff --git a/front/apps/web/src/utils/zod.ts b/front/apps/web/src/models.ts similarity index 73% rename from front/apps/web/src/utils/zod.ts rename to front/apps/web/src/models.ts index ebcca5df..e451d54b 100644 --- a/front/apps/web/src/utils/zod.ts +++ b/front/apps/web/src/models.ts @@ -18,16 +18,4 @@ * along with Kyoo. If not, see . */ -import { z } from "zod"; - -export const zdate = () => { - return z.preprocess((arg) => { - if (arg instanceof Date) return arg; - - if (typeof arg === "string" && /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z?/.test(arg)) { - return new Date(arg); - } - - return undefined; - }, z.date()); -}; +export * from "@kyoo/models"; diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx index 4d394d7d..73e9e078 100755 --- a/front/apps/web/src/pages/_app.tsx +++ b/front/apps/web/src/pages/_app.tsx @@ -24,7 +24,7 @@ import { useTheme, useMobileHover } from "yoshiki/web"; import { createTheme, ThemeProvider as MTheme } from "@mui/material"; import NextApp, { AppContext, type AppProps } from "next/app"; import { Hydrate, QueryClientProvider } from "@tanstack/react-query"; -import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "~/utils/query"; +import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models"; import superjson from "superjson"; import Head from "next/head"; import { ThemeSelector as KThemeSelector } from "@kyoo/primitives"; diff --git a/front/apps/web/src/pages/browse/index.tsx b/front/apps/web/src/pages/browse/index.tsx index b6d62b0e..9178c46d 100644 --- a/front/apps/web/src/pages/browse/index.tsx +++ b/front/apps/web/src/pages/browse/index.tsx @@ -39,11 +39,11 @@ import { ErrorPage } from "~/components/errors"; import { Navbar } from "@kyoo/ui"; import { Poster, Image } from "@kyoo/primitives"; import { ItemType, LibraryItem, LibraryItemP } from "~/models"; -import { getDisplayDate } from "~/models/utils"; +import { getDisplayDate } from "@kyoo/models"; import { InfiniteScroll } from "~/utils/infinite-scroll"; import { Link } from "~/utils/link"; import { withRoute } from "~/utils/router"; -import { QueryIdentifier, QueryPage, useInfiniteFetch } from "~/utils/query"; +import { QueryIdentifier, QueryPage, useInfiniteFetch } from "@kyoo/models"; import { px } from "yoshiki/native"; enum SortBy { diff --git a/front/packages/models/package.json b/front/packages/models/package.json new file mode 100644 index 00000000..c0adccba --- /dev/null +++ b/front/packages/models/package.json @@ -0,0 +1,23 @@ +{ + "name": "@kyoo/models", + "main": "src/index.ts", + "types": "src/index.ts", + "packageManager": "yarn@3.2.4", + "devDependencies": { + "@types/react": "^18.0.25", + "typescript": "^4.9.3" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react-native-web": { + "optional": true + } + }, + "dependencies": { + "@tanstack/react-query": "^4.18.0", + "zod": "^3.19.1" + } +} diff --git a/front/apps/web/src/models/index.ts b/front/packages/models/src/index.ts similarity index 94% rename from front/apps/web/src/models/index.ts rename to front/packages/models/src/index.ts index 4932e1fc..d6de982a 100644 --- a/front/apps/web/src/models/index.ts +++ b/front/packages/models/src/index.ts @@ -18,7 +18,10 @@ * along with Kyoo. If not, see . */ +export * from "./resources"; +export * from "./traits"; export * from "./page"; export * from "./kyoo-errors"; -export * from "./traits"; -export * from "./resources"; +export * from "./utils" + +export * from "./query"; diff --git a/front/apps/web/src/models/kyoo-errors.ts b/front/packages/models/src/kyoo-errors.ts similarity index 100% rename from front/apps/web/src/models/kyoo-errors.ts rename to front/packages/models/src/kyoo-errors.ts diff --git a/front/apps/web/src/models/page.ts b/front/packages/models/src/page.ts similarity index 100% rename from front/apps/web/src/models/page.ts rename to front/packages/models/src/page.ts diff --git a/front/apps/web/src/utils/query.ts b/front/packages/models/src/query.tsx similarity index 92% rename from front/apps/web/src/utils/query.ts rename to front/packages/models/src/query.tsx index 2808d832..55f0a494 100644 --- a/front/apps/web/src/utils/query.ts +++ b/front/packages/models/src/query.tsx @@ -27,10 +27,10 @@ import { useQuery, } from "@tanstack/react-query"; import { z } from "zod"; -import { KyooErrors, Page } from "~/models"; -import { Paged } from "~/models/page"; +import { KyooErrors } from "./kyoo-errors"; +import { Page, Paged } from "./page"; -const queryFn = async ( +const queryFn = async ( type: z.ZodType, context: QueryFunctionContext, ): Promise => { @@ -104,13 +104,13 @@ export type QueryPage = ComponentType & { getLayout?: (page: ReactElement) => ReactNode; }; -const toQueryKey = (query: QueryIdentifier) => { +const toQueryKey = (query: QueryIdentifier) => { if (query.params) { return [ ...query.path, "?" + Object.entries(query.params) - .filter(([k, v]) => v !== undefined) + .filter(([_, v]) => v !== undefined) .map(([k, v]) => `${k}=${Array.isArray(v) ? v.join(",") : v}`) .join("&"), ]; @@ -119,14 +119,14 @@ const toQueryKey = (query: QueryIdentifier) => { } }; -export const useFetch = (query: QueryIdentifier) => { +export const useFetch = (query: QueryIdentifier) => { return useQuery({ queryKey: toQueryKey(query), queryFn: (ctx) => queryFn(query.parser, ctx), }); }; -export const useInfiniteFetch = (query: QueryIdentifier) => { +export const useInfiniteFetch = (query: QueryIdentifier) => { const ret = useInfiniteQuery, KyooErrors>({ queryKey: toQueryKey(query), queryFn: (ctx) => queryFn(Paged(query.parser), ctx), diff --git a/front/apps/web/src/models/resources/collection.ts b/front/packages/models/src/resources/collection.ts similarity index 100% rename from front/apps/web/src/models/resources/collection.ts rename to front/packages/models/src/resources/collection.ts diff --git a/front/apps/web/src/models/resources/episode.ts b/front/packages/models/src/resources/episode.ts similarity index 97% rename from front/apps/web/src/models/resources/episode.ts rename to front/packages/models/src/resources/episode.ts index 27c91985..8df707ba 100644 --- a/front/apps/web/src/models/resources/episode.ts +++ b/front/packages/models/src/resources/episode.ts @@ -19,7 +19,7 @@ */ import { z } from "zod"; -import { zdate } from "~/utils/zod"; +import { zdate } from "../utils"; import { ImagesP } from "../traits"; import { ResourceP } from "../traits/resource"; diff --git a/front/apps/web/src/models/resources/genre.ts b/front/packages/models/src/resources/genre.ts similarity index 100% rename from front/apps/web/src/models/resources/genre.ts rename to front/packages/models/src/resources/genre.ts diff --git a/front/apps/web/src/models/resources/index.ts b/front/packages/models/src/resources/index.ts similarity index 100% rename from front/apps/web/src/models/resources/index.ts rename to front/packages/models/src/resources/index.ts diff --git a/front/apps/web/src/models/resources/library-item.ts b/front/packages/models/src/resources/library-item.ts similarity index 97% rename from front/apps/web/src/models/resources/library-item.ts rename to front/packages/models/src/resources/library-item.ts index 9469e97d..6ceb1555 100644 --- a/front/apps/web/src/models/resources/library-item.ts +++ b/front/packages/models/src/resources/library-item.ts @@ -34,7 +34,7 @@ export enum ItemType { export const LibraryItemP = z.preprocess( (x: any) => { - x.aliases ??= []; + if (!x.aliases) x.aliases = []; return x; }, z.union([ diff --git a/front/apps/web/src/models/resources/library.ts b/front/packages/models/src/resources/library.ts similarity index 100% rename from front/apps/web/src/models/resources/library.ts rename to front/packages/models/src/resources/library.ts diff --git a/front/apps/web/src/models/resources/movie.ts b/front/packages/models/src/resources/movie.ts similarity index 98% rename from front/apps/web/src/models/resources/movie.ts rename to front/packages/models/src/resources/movie.ts index 44fa0305..ef2f7802 100644 --- a/front/apps/web/src/models/resources/movie.ts +++ b/front/packages/models/src/resources/movie.ts @@ -19,7 +19,7 @@ */ import { z } from "zod"; -import { zdate } from "~/utils/zod"; +import { zdate } from "../utils"; import { ImagesP, ResourceP } from "../traits"; import { GenreP } from "./genre"; import { StudioP } from "./studio"; diff --git a/front/apps/web/src/models/resources/person.ts b/front/packages/models/src/resources/person.ts similarity index 100% rename from front/apps/web/src/models/resources/person.ts rename to front/packages/models/src/resources/person.ts diff --git a/front/apps/web/src/models/resources/season.ts b/front/packages/models/src/resources/season.ts similarity index 97% rename from front/apps/web/src/models/resources/season.ts rename to front/packages/models/src/resources/season.ts index 75e357f5..e858f7eb 100644 --- a/front/apps/web/src/models/resources/season.ts +++ b/front/packages/models/src/resources/season.ts @@ -19,7 +19,7 @@ */ import { z } from "zod"; -import { zdate } from "~/utils/zod"; +import { zdate } from "../utils"; import { ImagesP } from "../traits"; import { ResourceP } from "../traits/resource"; diff --git a/front/apps/web/src/models/resources/show.ts b/front/packages/models/src/resources/show.ts similarity index 98% rename from front/apps/web/src/models/resources/show.ts rename to front/packages/models/src/resources/show.ts index 4a6cf6c3..9e61370a 100644 --- a/front/apps/web/src/models/resources/show.ts +++ b/front/packages/models/src/resources/show.ts @@ -19,7 +19,7 @@ */ import { z } from "zod"; -import { zdate } from "~/utils/zod"; +import { zdate } from "../utils"; import { ImagesP, ResourceP } from "../traits"; import { GenreP } from "./genre"; import { SeasonP } from "./season"; diff --git a/front/apps/web/src/models/resources/studio.ts b/front/packages/models/src/resources/studio.ts similarity index 100% rename from front/apps/web/src/models/resources/studio.ts rename to front/packages/models/src/resources/studio.ts diff --git a/front/apps/web/src/models/resources/watch-item.ts b/front/packages/models/src/resources/watch-item.ts similarity index 99% rename from front/apps/web/src/models/resources/watch-item.ts rename to front/packages/models/src/resources/watch-item.ts index 47f4ed8c..620530d4 100644 --- a/front/apps/web/src/models/resources/watch-item.ts +++ b/front/packages/models/src/resources/watch-item.ts @@ -19,7 +19,7 @@ */ import { z } from "zod"; -import { zdate } from "~/utils/zod"; +import { zdate } from "../utils"; import { ResourceP, ImagesP, imageFn } from "../traits"; import { EpisodeP } from "./episode"; diff --git a/front/apps/web/src/models/traits/images.ts b/front/packages/models/src/traits/images.ts similarity index 100% rename from front/apps/web/src/models/traits/images.ts rename to front/packages/models/src/traits/images.ts diff --git a/front/apps/web/src/models/traits/index.ts b/front/packages/models/src/traits/index.ts similarity index 100% rename from front/apps/web/src/models/traits/index.ts rename to front/packages/models/src/traits/index.ts diff --git a/front/apps/web/src/models/traits/resource.ts b/front/packages/models/src/traits/resource.ts similarity index 100% rename from front/apps/web/src/models/traits/resource.ts rename to front/packages/models/src/traits/resource.ts diff --git a/front/apps/web/src/models/utils.ts b/front/packages/models/src/utils.ts similarity index 82% rename from front/apps/web/src/models/utils.ts rename to front/packages/models/src/utils.ts index 8336c64f..0954563a 100644 --- a/front/apps/web/src/models/utils.ts +++ b/front/packages/models/src/utils.ts @@ -19,6 +19,19 @@ */ import { Movie, Show } from "./resources"; +import { z } from "zod"; + +export const zdate = () => { + return z.preprocess((arg) => { + if (arg instanceof Date) return arg; + + if (typeof arg === "string" && /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z?/.test(arg)) { + return new Date(arg); + } + + return undefined; + }, z.date()); +}; export const getDisplayDate = (data: Show | Movie) => { const { diff --git a/front/packages/models/tsconfig.json b/front/packages/models/tsconfig.json new file mode 100755 index 00000000..cafc1ac7 --- /dev/null +++ b/front/packages/models/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "declaration": true, + "sourceMap": true, + "noEmit": true, + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react-jsx", + "incremental": true, + "baseUrl": ".", + "paths": { + "~/*": ["src/*"] + } + }, + "include": ["**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json index c88e5157..294ed35b 100644 --- a/front/packages/primitives/package.json +++ b/front/packages/primitives/package.json @@ -20,6 +20,7 @@ "dependencies": { "@expo/html-elements": "^0.2.2", "@expo/vector-icons": "AnonymusRaccoon/expo-vector-icons#no-prepare", + "@tanstack/react-query": "^4.18.0", "solito": "^2.0.5" } } diff --git a/front/packages/primitives/src/themes/catppuccin.ts b/front/packages/primitives/src/themes/catppuccin.ts index c1199412..274b2dfb 100644 --- a/front/packages/primitives/src/themes/catppuccin.ts +++ b/front/packages/primitives/src/themes/catppuccin.ts @@ -20,12 +20,14 @@ import { ThemeBuilder } from "./theme"; +// Ref: https://github.com/catppuccin/catppuccin export const catppuccin: ThemeBuilder = { fonts: { heading: "Pacifico", paragraph: "Poppins", }, light: { + // Catppuccin latte appbar: "#e64553", contrast: "#cdd6f4", subcontrast: "#bac2de", @@ -45,8 +47,17 @@ export const catppuccin: ThemeBuilder = { paragraph: "#5c5f77", subtext: "#6c6f85", }, + colors: { + red: "#d20f39", + green: "#40a02b", + blue: "#1e66f5", + yellow: "#df8e1d", + black: "#4c4f69", + white: "#eff1f5", + }, }, dark: { + // Catppuccin mocha appbar: "#94e2d5", contrast: "#cdd6f4", subcontrast: "#bac2de", @@ -66,5 +77,13 @@ export const catppuccin: ThemeBuilder = { paragraph: "#bac2de", subtext: "#a6adc8", }, + colors: { + red: "#f38ba8", + green: "#a6e3a1", + blue: "#89b4fa", + yellow: "#f9e2af", + black: "#11111b", + white: "#cdd6f4", + }, }, }; diff --git a/front/packages/primitives/src/themes/theme.tsx b/front/packages/primitives/src/themes/theme.tsx index 4fdc6aca..bf2e25e3 100644 --- a/front/packages/primitives/src/themes/theme.tsx +++ b/front/packages/primitives/src/themes/theme.tsx @@ -39,6 +39,14 @@ type Mode = { contrast: Property.Color; subcontrast: Property.Color; variant: Variant; + colors: { + red: Property.Color, + green: Property.Color, + blue: Property.Color, + yellow: Property.Color, + white: Property.Color, + black: Property.Color, + } }; type Variant = { diff --git a/front/packages/primitives/tsconfig.json b/front/packages/primitives/tsconfig.json index 32ca157b..cafc1ac7 100755 --- a/front/packages/primitives/tsconfig.json +++ b/front/packages/primitives/tsconfig.json @@ -14,7 +14,7 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "react-native", + "jsx": "react-jsx", "incremental": true, "baseUrl": ".", "paths": { diff --git a/front/packages/ui/package.json b/front/packages/ui/package.json index 622abbae..71680ecc 100644 --- a/front/packages/ui/package.json +++ b/front/packages/ui/package.json @@ -4,6 +4,7 @@ "types": "src/index.ts", "packageManager": "yarn@3.2.4", "dependencies": { + "@kyoo/models": "workspace:^", "@kyoo/primitives": "workspace:^", "react-native-svg": "^13.6.0" }, diff --git a/front/packages/ui/src/fetch.tsx b/front/packages/ui/src/fetch.tsx new file mode 100644 index 00000000..d4d7b437 --- /dev/null +++ b/front/packages/ui/src/fetch.tsx @@ -0,0 +1,73 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { Page, QueryIdentifier, useFetch, KyooErrors } from "@kyoo/models"; +import { P } from "@kyoo/primitives"; +import { View } from "react-native"; +import { useYoshiki } from "yoshiki/native"; + +export type WithLoading = (Item & { isLoading: false }) | { isLoading: true }; + +const isPage = (obj: unknown): obj is Page => + (typeof obj === "object" && obj && "items" in obj) || false; + +export const Fetch = ({ + query, + placeholderCount, + children, +}: { + query: QueryIdentifier; + placeholderCount: number; + children: ( + item: Data extends Page ? WithLoading : WithLoading, + i: number, + ) => JSX.Element | null; +}): JSX.Element | null => { + const { data, error } = useFetch(query); + + if (error) return ; + if (!data) + return ( + <>{[...Array(placeholderCount)].map((_, i) => children({ isLoading: true } as any, i))} + ); + if (!isPage(data)) + return children(data ? { ...data, isLoading: false } : ({ isLoading: true } as any), 0); + return <>{data.items.map((item, i) => children({ ...item, isLoading: false } as any, i))}; +}; + +export const ErrorView = ({ error }: { error: KyooErrors }) => { + const { css } = useYoshiki(); + + return ( + theme.colors.red, + flex: 1, + alignItems: "center" + })} + > + {error.errors.map((x, i) => ( +

theme.colors.white })}> + {x} +

+ ))} + + ); +}; diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx index c3e64330..00755213 100644 --- a/front/packages/ui/src/navbar/index.tsx +++ b/front/packages/ui/src/navbar/index.tsx @@ -19,12 +19,11 @@ */ import useTranslation from "next-translate/useTranslation"; -/* import { Library, LibraryP, Page, Paged } from "~/models"; */ -/* import { QueryIdentifier, useFetch } from "~/utils/query"; */ -/* import { ErrorSnackbar } from "./errors"; */ -import { useYoshiki } from "yoshiki/native"; +import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models"; import { IconButton, Header, Avatar, A, ts } from "@kyoo/primitives"; -import { View } from "react-native"; +import { useYoshiki } from "yoshiki/native"; +import { Text, View } from "react-native"; +import { Fetch } from "../fetch"; import { KyooLongLogo } from "./icon"; const tooltip = (tooltip: string): object => ({}); @@ -34,7 +33,6 @@ export const NavbarTitle = KyooLongLogo; export const Navbar = () => { const { css } = useYoshiki(); const { t } = useTranslation("common"); - /* const { data, error, isSuccess, isError } = useFetch(Navbar.query()); */ return (
{ - { - /*isSuccess - ? data.items.map((library) => */ true - ? [...Array(4)].map((_, i) => ( - - Toto - {/* {library.name} */} - - )) - : [...Array(4)].map( - (_, i) => null, - /* */ - /* */ - /* */ - ) - } + + {(library, i) => + !library.isLoading ? ( + + {library.name} + + ) : ( + <> + Toto + {/* */} + {/* */} + {/* */} + + ) + } + @@ -105,7 +104,7 @@ export const Navbar = () => { ); }; -/* Navbar.query = (): QueryIdentifier> => ({ */ -/* parser: Paged(LibraryP), */ -/* path: ["libraries"], */ -/* }); */ +Navbar.query = (): QueryIdentifier> => ({ + parser: Paged(LibraryP), + path: ["libraries"], +}); diff --git a/front/packages/ui/tsconfig.json b/front/packages/ui/tsconfig.json index eed3a2cf..cafc1ac7 100755 --- a/front/packages/ui/tsconfig.json +++ b/front/packages/ui/tsconfig.json @@ -15,8 +15,6 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", - "jsxImportSource": "@emotion/react", - "types": ["@emotion/react/types/css-prop"], "incremental": true, "baseUrl": ".", "paths": { diff --git a/front/yarn.lock b/front/yarn.lock index c94b216b..9cbd8890 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -2341,12 +2341,30 @@ __metadata: languageName: node linkType: hard +"@kyoo/models@workspace:^, @kyoo/models@workspace:packages/models": + version: 0.0.0-use.local + resolution: "@kyoo/models@workspace:packages/models" + dependencies: + "@tanstack/react-query": ^4.18.0 + "@types/react": ^18.0.25 + typescript: ^4.9.3 + zod: ^3.19.1 + peerDependencies: + react: "*" + react-native: "*" + peerDependenciesMeta: + react-native-web: + optional: true + languageName: unknown + linkType: soft + "@kyoo/primitives@workspace:^, @kyoo/primitives@workspace:packages/primitives": version: 0.0.0-use.local resolution: "@kyoo/primitives@workspace:packages/primitives" dependencies: "@expo/html-elements": ^0.2.2 "@expo/vector-icons": "AnonymusRaccoon/expo-vector-icons#no-prepare" + "@tanstack/react-query": ^4.18.0 "@types/react": ^18.0.25 solito: ^2.0.5 typescript: ^4.9.3 @@ -2364,6 +2382,7 @@ __metadata: version: 0.0.0-use.local resolution: "@kyoo/ui@workspace:packages/ui" dependencies: + "@kyoo/models": "workspace:^" "@kyoo/primitives": "workspace:^" "@types/react": ^18.0.25 react-native-svg: ^13.6.0 @@ -12907,12 +12926,12 @@ __metadata: "@emotion/react": ^11.9.3 "@emotion/styled": ^11.9.3 "@jellyfin/libass-wasm": ^4.1.1 + "@kyoo/models": "workspace:^" "@kyoo/primitives": "workspace:^" "@kyoo/ui": "workspace:^" "@mui/icons-material": ^5.8.4 "@mui/material": ^5.8.7 "@mui/system": ^5.10.10 - "@tanstack/react-query": ^4.18.0 "@types/node": 18.11.9 "@types/react": 18.0.25 "@types/react-dom": 18.0.9