- {!!tv && (
-
-
-
- {tv?.original_name}{" "}
-
-
- Number of Season: {tv.number_of_seasons} | Number of Episodes:{" "}
- {tv.number_of_episodes}
-
-
{tv.overview}
-
- {!!tv.genres.length &&
- tv.genres.map((genre) => (
-
- {genre.name}
-
- ))}
-
- {!!images?.backdrops.length && (
-
-
- {pickRandomImages(images.backdrops as Media[], 7).map(
- (image: Media) => (
-
-
-
- )
- )}
-
-
-
-
- )}
- {!!videos?.results.length && (
-
- )}
-
+ if (error) {
+ return
{error};
+ }
+ if (isLoading) {
+ return
loading...
;
+ }
- {/* Backgroud */}
-
-
-
- )}
+ return (
+
+ {!!tv && (
+
+
+
+ {tv?.original_name}{" "}
+
+
+ Number of Season: {tv.number_of_seasons} | Number of Episodes:{" "}
+ {tv.number_of_episodes}
+
+
{tv.overview}
+
+ {!!tv.genres.length &&
+ tv.genres.map((genre) => (
+
+ {genre.name}
+
+ ))}
+
+ {!!tv.images?.backdrops.length && (
+
+
+ {pickRandomImages(tv.images.backdrops as Media[], 7).map(
+ (image: Media) => (
+
+
+
+ )
+ )}
+
+
+
+
+ )}
+ {!!tv.videos?.results.length && (
+
+ )}
+ {isAuthenticated && (
+
+ )}
+
- {/* Show seasons */}
- {!!tv?.seasons.length && (
-
- Seasons:
-
- {tv.seasons.map((season: Season) => (
-
-
-
- ))}
-
-
-
-
- )}
+ {/* Backgroud */}
+
+
+
+ )}
-
+ {/* Show seasons */}
+ {!!tv?.seasons.length && (
+
+ Seasons:
+
+ {tv.seasons.map((season: Season) => (
+
+
+
+ ))}
+
+
+
+
+ )}
-
-
Similar Tvs:
- {similarTvs?.results?.length ? (
- similarTvs?.results?.map((movie) => (
-
- />
- ))) : (
-
-
No Similiar Tv Shows Shown yet.
-
+
+
Similar Tvs:
+ {tv?.similar?.results?.length ? (
+ tv?.similar?.results?.map((movie) => (
+
-
- );
+ />
+ ))) : (
+
+
No Similiar Tv Shows Shown yet.
+
+
+ )}
+
+
+ );
}
diff --git a/src/pages/Watchlist/Movies.tsx b/src/pages/Watchlist/Movies.tsx
new file mode 100644
index 0000000..4f221eb
--- /dev/null
+++ b/src/pages/Watchlist/Movies.tsx
@@ -0,0 +1,38 @@
+import type { SimpleMovie } from "@/types/movie"
+import type { Response } from "@/types/response"
+
+export default function Movies() {
+
+ const { account, isAuthenticated } = useAccount();
+ const { data: movies } = useFetch
>(`/account/${account?.id}/watchlist/movies`)
+
+ if (!isAuthenticated) {
+ return (
+
+
+
Not Logged in
+
Please add your token on setting page.
+
+ {movies?.results.length && (
+ movies.results.map((movie, index) => (
+
+ media={movie}
+ title={movie.title}
+ key={index}
+ className="lg:col-span-1 md:col-span-2 col-span-3" />
+ ))
+
+ )
+
+ }
+
+
+ )
+}
diff --git a/src/pages/Watchlist/TvShows.tsx b/src/pages/Watchlist/TvShows.tsx
new file mode 100644
index 0000000..fab4156
--- /dev/null
+++ b/src/pages/Watchlist/TvShows.tsx
@@ -0,0 +1,36 @@
+import type { SimpleTv } from "@/types/tv"
+import type { Response } from "@/types/response"
+
+export default function TvShows() {
+ const { account, isAuthenticated } = useAccount()
+ const { data: tv } = useFetch>(`/account/${account?.id}/watchlist/tv`)
+
+ if (!isAuthenticated) {
+ return (
+
+
+
Not Logged in
+
Please add your token on setting page.
+
+ {tv?.results.length && (
+ tv.results.map((tv, index) => (
+
+ media={tv}
+ title={tv.name}
+ key={index}
+ className="lg:col-span-1 md:col-span-2 col-span-3" />
+ ))
+
+ )
+
+ }
+
+
+ )
+}
diff --git a/src/providers/theme.tsx b/src/providers/theme.tsx
deleted file mode 100644
index bd73516..0000000
--- a/src/providers/theme.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
- children: React.ReactNode;
- defaultTheme?: Theme;
- storageKey?: string;
-};
-
-type ThemeProviderState = {
- theme: Theme;
- setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
- theme: "system",
- setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext(initialState);
-
-export function ThemeProvider({
- children,
- defaultTheme = "dark",
- storageKey = "vilm-theme",
- ...props
-}: ThemeProviderProps) {
- const [theme, setTheme] = useState(
- () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
- );
-
- useEffect(() => {
- const root = window.document.documentElement;
-
- root.classList.remove("light", "dark");
-
- if (theme === "system") {
- const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
- .matches
- ? "dark"
- : "light";
-
- root.classList.add(systemTheme);
- return;
- }
-
- root.classList.add(theme);
- }, [theme]);
-
- const value = {
- theme,
- setTheme: (theme: Theme) => {
- localStorage.setItem(storageKey, theme);
- setTheme(theme);
- },
- };
-
- return (
-
- {children}
-
- );
-}
-
-export const useTheme = () => {
- const context = useContext(ThemeProviderContext);
-
- if (context === undefined)
- throw new Error("useTheme must be used within a ThemeProvider");
-
- return context;
-};
diff --git a/src/types/movie.ts b/src/types/movie.ts
index 36d3377..1793636 100644
--- a/src/types/movie.ts
+++ b/src/types/movie.ts
@@ -1,57 +1,66 @@
+import type { SimpleBaseMedia } from "@/components/BackdropCard";
+
export interface Movie {
- adult: boolean;
- backdrop_path: string;
- belongs_to_collection?: BelongsToCollection;
- budget: number;
- genres: Genre[];
- homepage: string;
- id: number;
- imdb_id: string;
- original_language: string;
- original_title: string;
- overview: string;
- popularity: number;
- poster_path: string;
- production_companies: ProductionCompany[];
- production_countries: ProductionCountry[];
- release_date: string;
- revenue: number;
- runtime: number;
- spoken_languages: SpokenLanguage[];
- status: string;
- tagline: string;
- title: string;
- video: boolean;
- vote_average: number;
- vote_count: number;
+ adult: boolean;
+ backdrop_path: string;
+ belongs_to_collection?: BelongsToCollection;
+ budget: number;
+ genres: Genre[];
+ homepage: string;
+ id: number;
+ imdb_id: string;
+ original_language: string;
+ original_title: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ production_companies: ProductionCompany[];
+ production_countries: ProductionCountry[];
+ release_date: string;
+ revenue: number;
+ runtime: number;
+ spoken_languages: SpokenLanguage[];
+ status: string;
+ tagline: string;
+ title: string;
+ video: boolean;
+ vote_average: number;
+ vote_count: number;
}
export interface BelongsToCollection {
- id: number;
- name: string;
- poster_path: string;
- backdrop_path: string;
+ id: number;
+ name: string;
+ poster_path: string;
+ backdrop_path: string;
}
export interface Genre {
- id: number;
- name: string;
+ id: number;
+ name: string;
}
export interface ProductionCompany {
- id: number;
- logo_path: string;
- name: string;
- origin_country: string;
+ id: number;
+ logo_path: string;
+ name: string;
+ origin_country: string;
}
export interface ProductionCountry {
- iso_3166_1: string;
- name: string;
+ iso_3166_1: string;
+ name: string;
}
export interface SpokenLanguage {
- english_name: string;
- iso_639_1: string;
- name: string;
+ english_name: string;
+ iso_639_1: string;
+ name: string;
+}
+
+export interface SimpleMovie extends SimpleBaseMedia {
+ original_title: string;
+ release_date: string;
+ title: string;
+ video: boolean;
}
diff --git a/src/types/providers.ts b/src/types/providers.ts
index 2d5fe40..4c76749 100644
--- a/src/types/providers.ts
+++ b/src/types/providers.ts
@@ -1,30 +1,30 @@
export interface ProvidersResponse {
- id: number;
- results: Provider;
+ id: number;
+ results: Provider;
}
-export interface ProviderInfo {
- logo_path: string;
- provider_id: number;
- provider_name: string;
- display_priority: number;
+export interface Provider {
+ [country: string]: CountryData;
}
-export interface Provider {
- [country: string]: CountryData;
+export interface ProviderInfo {
+ logo_path: string;
+ provider_id: number;
+ provider_name: string;
+ display_priority: number;
}
export interface CountryData {
- link?: string;
- rent?: ProviderInfo[];
- buy?: ProviderInfo[];
- ads?: ProviderInfo[];
- flatrate?: ProviderInfo[];
+ link?: string;
+ rent?: ProviderInfo[];
+ buy?: ProviderInfo[];
+ ads?: ProviderInfo[];
+ flatrate?: ProviderInfo[];
}
export interface WatchType {
- rent?: ProviderInfo[];
- buy?: ProviderInfo[];
- ads?: ProviderInfo[];
- flatrate?: ProviderInfo[];
+ rent?: ProviderInfo[];
+ buy?: ProviderInfo[];
+ ads?: ProviderInfo[];
+ flatrate?: ProviderInfo[];
}
diff --git a/src/types/response.ts b/src/types/response.ts
index e239c5c..60895e5 100644
--- a/src/types/response.ts
+++ b/src/types/response.ts
@@ -1,64 +1,85 @@
+import type { Images, Video } from "./media";
+import type { Movie } from "./movie";
+import type { ProvidersResponse } from "./providers";
+import type { Tv } from "./tv";
+
export interface Response {
- page: number;
- results: T;
- total_pages?: number;
- total_results?: number;
+ page: number;
+ results: T;
+ total_pages?: number;
+ total_results?: number;
}
export interface MovieTv {
- adult: boolean;
- backdrop_path: string;
- id: number;
- title?: string;
- original_language: string;
- original_title?: string;
- overview: string;
- poster_path: string;
- media_type: string;
- genre_ids: number[];
- popularity: number;
- release_date?: string;
- video?: boolean;
- vote_average: number;
- vote_count: number;
- name?: string;
- original_name?: string;
- first_air_date?: string;
- origin_country?: string[];
+ adult: boolean;
+ backdrop_path: string;
+ id: number;
+ title?: string;
+ original_language: string;
+ original_title?: string;
+ overview: string;
+ poster_path: string;
+ media_type: string;
+ genre_ids: number[];
+ popularity: number;
+ release_date?: string;
+ video?: boolean;
+ vote_average: number;
+ vote_count: number;
+ name?: string;
+ original_name?: string;
+ first_air_date?: string;
+ origin_country?: string[];
}
export interface SimilarTv {
- adult: boolean;
- backdrop_path: string;
- genre_ids: number[];
- id: number;
- origin_country: string[];
- original_language: string;
- original_name: string;
- overview: string;
- popularity: number;
- poster_path: string;
- first_air_date: string;
- name: string;
- vote_average: number;
- vote_count: number;
+ adult: boolean;
+ backdrop_path: string;
+ genre_ids: number[];
+ id: number;
+ origin_country: string[];
+ original_language: string;
+ original_name: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ first_air_date: string;
+ name: string;
+ vote_average: number;
+ vote_count: number;
}
export interface SimilarMovie {
- adult: boolean;
- backdrop_path: string;
- genre_ids: number[];
- id: number;
- original_language: string;
- original_title: string;
- overview: string;
- popularity: number;
- poster_path: string;
- release_date: string;
- title: string;
- video: boolean;
- vote_average: number;
- vote_count: number;
+ adult: boolean;
+ backdrop_path: string;
+ genre_ids: number[];
+ id: number;
+ original_language: string;
+ original_title: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ release_date: string;
+ title: string;
+ video: boolean;
+ vote_average: number;
+ vote_count: number;
+}
+
+export interface AccountStates {
+ favorite: boolean;
+ rated: boolean;
+ watchlist: boolean;
+}
+
+export interface AppendResponse {
+ images: Images;
+ videos: Response;
+ account_states: AccountStates;
+ "watch/providers": ProvidersResponse;
+ similar: Response;
}
export interface SimilarMixed extends SimilarMovie, SimilarTv {}
+export interface MovieResponse extends Movie, AppendResponse {}
+export interface TvResponse extends Tv, AppendResponse {}
diff --git a/src/types/tv.ts b/src/types/tv.ts
index c755363..c652912 100644
--- a/src/types/tv.ts
+++ b/src/types/tv.ts
@@ -1,115 +1,124 @@
+import { SimpleBaseMedia } from "@/components/BackdropCard";
+
export interface Tv {
- adult: boolean;
- backdrop_path: string;
- created_by: CreatedBy[];
- episode_run_time: number[];
- first_air_date: string;
- genres: Genre[];
- homepage: string;
- id: number;
- in_production: boolean;
- languages: string[];
- last_air_date: string;
- last_episode_to_air: LastEpisodeToAir;
- name: string;
- next_episode_to_air: NextEpisodeToAir;
- networks: Network[];
- number_of_episodes: number;
- number_of_seasons: number;
- origin_country: string[];
- original_language: string;
- original_name: string;
- overview: string;
- popularity: number;
- poster_path: string;
- production_companies: ProductionCompany[];
- production_countries: ProductionCountry[];
- seasons: Season[];
- spoken_languages: SpokenLanguage[];
- status: string;
- tagline: string;
- type: string;
- vote_average: number;
- vote_count: number;
+ adult: boolean;
+ backdrop_path: string;
+ created_by: CreatedBy[];
+ episode_run_time: number[];
+ first_air_date: string;
+ genres: Genre[];
+ homepage: string;
+ id: number;
+ in_production: boolean;
+ languages: string[];
+ last_air_date: string;
+ last_episode_to_air: LastEpisodeToAir;
+ name: string;
+ next_episode_to_air: NextEpisodeToAir;
+ networks: Network[];
+ number_of_episodes: number;
+ number_of_seasons: number;
+ origin_country: string[];
+ original_language: string;
+ original_name: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ production_companies: ProductionCompany[];
+ production_countries: ProductionCountry[];
+ seasons: Season[];
+ spoken_languages: SpokenLanguage[];
+ status: string;
+ tagline: string;
+ type: string;
+ vote_average: number;
+ vote_count: number;
}
export interface CreatedBy {
- id: number;
- credit_id: string;
- name: string;
- gender: number;
- profile_path?: string;
+ id: number;
+ credit_id: string;
+ name: string;
+ gender: number;
+ profile_path?: string;
}
export interface Genre {
- id: number;
- name: string;
+ id: number;
+ name: string;
}
export interface LastEpisodeToAir {
- id: number;
- name: string;
- overview: string;
- vote_average: number;
- vote_count: number;
- air_date: string;
- episode_number: number;
- episode_type: string;
- production_code: string;
- runtime: number;
- season_number: number;
- show_id: number;
- still_path: string;
+ id: number;
+ name: string;
+ overview: string;
+ vote_average: number;
+ vote_count: number;
+ air_date: string;
+ episode_number: number;
+ episode_type: string;
+ production_code: string;
+ runtime: number;
+ season_number: number;
+ show_id: number;
+ still_path: string;
}
export interface NextEpisodeToAir {
- id: number;
- name: string;
- overview: string;
- vote_average: number;
- vote_count: number;
- air_date: string;
- episode_number: number;
- episode_type: string;
- production_code: string;
- runtime: number;
- season_number: number;
- show_id: number;
- still_path: string;
+ id: number;
+ name: string;
+ overview: string;
+ vote_average: number;
+ vote_count: number;
+ air_date: string;
+ episode_number: number;
+ episode_type: string;
+ production_code: string;
+ runtime: number;
+ season_number: number;
+ show_id: number;
+ still_path: string;
}
export interface Network {
- id: number;
- logo_path: string;
- name: string;
- origin_country: string;
+ id: number;
+ logo_path: string;
+ name: string;
+ origin_country: string;
}
export interface ProductionCompany {
- id: number;
- logo_path?: string;
- name: string;
- origin_country: string;
+ id: number;
+ logo_path?: string;
+ name: string;
+ origin_country: string;
}
export interface ProductionCountry {
- iso_3166_1: string;
- name: string;
+ iso_3166_1: string;
+ name: string;
}
export interface Season {
- air_date: string;
- episode_count: number;
- id: number;
- name: string;
- overview: string;
- poster_path: string;
- season_number: number;
- vote_average: number;
+ air_date: string;
+ episode_count: number;
+ id: number;
+ name: string;
+ overview: string;
+ poster_path: string;
+ season_number: number;
+ vote_average: number;
}
export interface SpokenLanguage {
- english_name: string;
- iso_639_1: string;
- name: string;
+ english_name: string;
+ iso_639_1: string;
+ name: string;
+}
+
+export interface SimpleTv extends SimpleBaseMedia {
+ origin_country: string[];
+ original_name: string;
+ first_air_date: string;
+ name: string;
}
diff --git a/src/utils/$fetch.ts b/src/utils/$fetch.ts
index 128c4eb..32b268d 100644
--- a/src/utils/$fetch.ts
+++ b/src/utils/$fetch.ts
@@ -1,46 +1,45 @@
import config from "@/config";
interface Option {
- headers: { [key: string]: string };
- method?: string;
- body?: unknown;
- defaultToken?: boolean;
+ headers?: { [key: string]: string };
+ method?: string;
+ body?: { [key: string]: string | boolean | number };
+ defaultToken?: boolean;
}
export interface ResponseMessage {
- status_code: number;
- status_message: string;
- success: boolean;
+ status_code: number;
+ status_message: string;
+ success: boolean;
}
const { apiUrl, token } = config;
const $fetch = async (path: string, option?: Option) => {
- const useDefaultToken = option?.defaultToken ?? true;
- const headers = {
- Accept: "application/json",
- Authorization: useDefaultToken ? "Bearer " + token : "",
- ...option?.headers,
- };
- const method = option?.method ?? "GET";
-
- const response: Response = await fetch(`${apiUrl}${path}`, {
- headers: {
- ...headers,
- },
- method,
- body: JSON.stringify(option?.body),
- });
-
- const data: T = await response.json();
- const isError = !response.ok;
- const error: ResponseMessage | null = isError
- ? (data as ResponseMessage)
- : null;
-
- console.log({ response, data, error });
-
- return { response, data, error };
+ const useDefaultToken = option?.defaultToken ?? true;
+ const headers = {
+ Accept: "application/json",
+ "content-type": "application/json",
+ Authorization: useDefaultToken ? "Bearer " + token : "",
+ ...option?.headers,
+ };
+ const method = option?.method ?? "GET";
+
+ const response: Response = await fetch(`${apiUrl}${path}`, {
+ headers: {
+ ...headers,
+ },
+ method,
+ ...(method !== "GET" && { body: JSON.stringify({ ...option?.body }) }),
+ });
+
+ const data: T = await response.json();
+ const isError = !response.ok;
+ const error: ResponseMessage | null = isError
+ ? (data as ResponseMessage)
+ : null;
+
+ return { response, data, error };
};
export default $fetch;
diff --git a/vite.config.ts b/vite.config.ts
index 68eea1b..12669fe 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,43 +4,45 @@ import react from "@vitejs/plugin-react";
import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [
- AutoImport({
- imports: [
- "react",
- "react-router-dom",
- {
- from: "react",
- imports: ["createContext"],
- },
- {
- "react-router-dom": [["BrowserRouter", "Router"]],
- },
- ],
- include: [
- /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
- /\.md$/, // .md
- ],
- dts: "./auto-imports.d.ts",
- eslintrc: {
- enabled: true,
- },
- dirs: [
- "./src/components/**",
- "./src/config",
- "./src/hooks",
- "./src/pages/**",
- "./src/types",
- "./src/utils",
- "./src/providers",
- "./src/lib",
- ],
- }),
- react(),
- ],
- resolve: {
- alias: {
- "@": path.resolve(__dirname, "./src"),
- },
- },
+ plugins: [
+ AutoImport({
+ imports: [
+ "react",
+ "react-router-dom",
+ {
+ from: "react",
+ imports: ["createContext"],
+ },
+ {
+ "react-router-dom": [["BrowserRouter", "Router"]],
+ },
+ ],
+ include: [
+ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+ /\.md$/, // .md
+ ],
+ dts: "./auto-imports.d.ts",
+ eslintrc: {
+ enabled: true,
+ },
+ dirs: [
+ "./src/components/**",
+ "./src/config",
+ "./src/hooks",
+ "./src/pages/**",
+ "./src/types",
+ "./src/utils",
+ "./src/providers",
+ "./src/lib",
+ "./src/contexts/**",
+ "./src/layouts/",
+ ],
+ }),
+ react(),
+ ],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
});