From 81373da4049cc2d10aa32765f721c3718f183e20 Mon Sep 17 00:00:00 2001 From: Jelle van Snik Date: Mon, 7 Feb 2022 23:22:35 +0100 Subject: [PATCH] Basic component structure --- src/App.tsx | 26 ++++++---------- src/components/Buttons/ButtonControl.tsx | 8 +++++ src/components/Icon.tsx | 15 ++++++++++ src/components/SearchBar.tsx | 20 +++++++++++++ .../TextInputs/TextInputControl.tsx | 23 ++++++++++++++ src/components/media/MediaCard.tsx | 30 +++++++++++++++++++ src/components/media/WatchedMediaCard.tsx | 10 +++++++ src/list/index.js | 0 src/scrapers/index.ts | 6 ++-- .../list/{theflix => theflixmovie}/index.ts | 6 ++-- src/scrapers/list/theflixseries/index.ts | 23 ++++++++++++++ src/scrapesr/index.js | 0 src/sdf/index.js | 0 src/types.d.ts/index.js | 0 src/views/MovieView.tsx | 7 +++++ src/views/SearchView.tsx | 23 ++++++++++++++ src/views/SeriesView.tsx | 7 +++++ 17 files changed, 182 insertions(+), 22 deletions(-) create mode 100644 src/components/Buttons/ButtonControl.tsx create mode 100644 src/components/Icon.tsx create mode 100644 src/components/SearchBar.tsx create mode 100644 src/components/TextInputs/TextInputControl.tsx create mode 100644 src/components/media/MediaCard.tsx create mode 100644 src/components/media/WatchedMediaCard.tsx delete mode 100644 src/list/index.js rename src/scrapers/list/{theflix => theflixmovie}/index.ts (81%) create mode 100644 src/scrapers/list/theflixseries/index.ts delete mode 100644 src/scrapesr/index.js delete mode 100644 src/sdf/index.js delete mode 100644 src/types.d.ts/index.js create mode 100644 src/views/MovieView.tsx create mode 100644 src/views/SearchView.tsx create mode 100644 src/views/SeriesView.tsx diff --git a/src/App.tsx b/src/App.tsx index 80bff536..aa7bf137 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,16 @@ -import { GetProviderFromId, SearchProviders, MWMedia, MWMediaType } from '@/scrapers'; -import { useState } from 'react'; +import { Route, Switch } from 'react-router-dom'; import './index.css'; +import { MovieView } from './views/MovieView'; +import { SearchView } from './views/SearchView'; +import { SeriesView } from './views/SeriesView'; function App() { - const [results, setResults] = useState([]); - - async function runSearch() { - const results = await SearchProviders({ type: MWMediaType.MOVIE, searchQuery: "abc" }); - setResults(results); - } - return ( - <> -

Search

- -

Search results

- {results.map(v=>( -

{v.title} ({GetProviderFromId(v.providerId)?.displayName})

- ))} - + + + + + ); } diff --git a/src/components/Buttons/ButtonControl.tsx b/src/components/Buttons/ButtonControl.tsx new file mode 100644 index 00000000..78baa6a5 --- /dev/null +++ b/src/components/Buttons/ButtonControl.tsx @@ -0,0 +1,8 @@ +export interface ButtonControlProps { + onClick?: () => void; + children?: React.ReactNode; +} + +export function ButtonControl({ onClick, children }: ButtonControlProps) { + return +} diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx new file mode 100644 index 00000000..582490d0 --- /dev/null +++ b/src/components/Icon.tsx @@ -0,0 +1,15 @@ +export enum Icons { + SEARCH = "search", +} + +export interface IconProps { + icon: Icons; +} + +const iconList = { + search: ``, +} + +export function Icon(props: IconProps) { + return ; +} diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx new file mode 100644 index 00000000..a9ddaabf --- /dev/null +++ b/src/components/SearchBar.tsx @@ -0,0 +1,20 @@ +import { ButtonControl } from './Buttons/ButtonControl'; +import { Icon, Icons } from './Icon'; +import { TextInputControl, TextInputControlPropsNoLabel } from './TextInputs/TextInputControl'; + +export interface SearchBarProps extends TextInputControlPropsNoLabel { + buttonText?: string; + onClick?: () => void; +} + +export function SearchBarInput(props: SearchBarProps) { + return ( +
+ + + + { props.buttonText || "Search" } + +
+ ) +} diff --git a/src/components/TextInputs/TextInputControl.tsx b/src/components/TextInputs/TextInputControl.tsx new file mode 100644 index 00000000..76e34673 --- /dev/null +++ b/src/components/TextInputs/TextInputControl.tsx @@ -0,0 +1,23 @@ +export interface TextInputControlPropsNoLabel { + onChange?: (data: string) => void; + value?: string; +} + +export interface TextInputControlProps extends TextInputControlPropsNoLabel { + label?: string; +} + +export function TextInputControl({ onChange, value, label }: TextInputControlProps) { + const input = onChange && onChange(e.target.value)} value={value} /> + + if (label) { + return ( + + ) + } + + return input; +} diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx new file mode 100644 index 00000000..2ecddacb --- /dev/null +++ b/src/components/media/MediaCard.tsx @@ -0,0 +1,30 @@ +import { GetProviderFromId, MWMedia, MWMediaType } from "@/scrapers"; +import { Link } from "react-router-dom"; + +export interface MediaCardProps { + media: MWMedia; + watchedPercentage: Number; +} + +function MediaCardContent({ media, watchedPercentage }: MediaCardProps) { + return ( + <> +

{media.title} ({GetProviderFromId(media.providerId)?.displayName})

+

{watchedPercentage}% watched

+
+ + ) +} + +export function MediaCard(props: MediaCardProps) { + const provider = GetProviderFromId(props.media.providerId); + let link = "movie" + if (provider?.type === MWMediaType.SERIES) + link = "series"; + + return ( + + + + ) +} diff --git a/src/components/media/WatchedMediaCard.tsx b/src/components/media/WatchedMediaCard.tsx new file mode 100644 index 00000000..b11df6a7 --- /dev/null +++ b/src/components/media/WatchedMediaCard.tsx @@ -0,0 +1,10 @@ +import { MWMedia } from "@/scrapers"; +import { MediaCard } from "./MediaCard"; + +export interface WatchedMediaCardProps { + media: MWMedia; +} + +export function WatchedMediaCard(props: WatchedMediaCardProps) { + return +} diff --git a/src/list/index.js b/src/list/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/scrapers/index.ts b/src/scrapers/index.ts index 9cb69408..cf58c1e0 100644 --- a/src/scrapers/index.ts +++ b/src/scrapers/index.ts @@ -1,9 +1,11 @@ -import { theFlixScraper } from "./list/theflix"; +import { theFlixMovieScraper } from "./list/theflixmovie"; +import { theFlixSeriesScraper } from "./list/theflixseries"; import { MWMediaProvider, MWQuery } from "./types"; export * from "./types"; const mediaProvidersUnchecked: MWMediaProvider[] = [ - theFlixScraper + theFlixMovieScraper, + theFlixSeriesScraper, ] export const mediaProviders: MWMediaProvider[] = mediaProvidersUnchecked.filter(v=>v.enabled); diff --git a/src/scrapers/list/theflix/index.ts b/src/scrapers/list/theflixmovie/index.ts similarity index 81% rename from src/scrapers/list/theflix/index.ts rename to src/scrapers/list/theflixmovie/index.ts index 834e4daa..3e623eec 100644 --- a/src/scrapers/list/theflix/index.ts +++ b/src/scrapers/list/theflixmovie/index.ts @@ -1,7 +1,7 @@ import { MWMedia, MWMediaProvider, MWMediaType, MWPortableMedia, MWQuery } from "@/scrapers/types"; -export const theFlixScraper: MWMediaProvider = { - id: "theflix", +export const theFlixMovieScraper: MWMediaProvider = { + id: "theflixmovie", enabled: true, type: MWMediaType.MOVIE, displayName: "TheFlix", @@ -17,7 +17,7 @@ export const theFlixScraper: MWMediaProvider = { return [{ mediaId: "a", providerId: this.id, - title: "testing", + title: `movie test`, }]; }, } diff --git a/src/scrapers/list/theflixseries/index.ts b/src/scrapers/list/theflixseries/index.ts new file mode 100644 index 00000000..d469fe05 --- /dev/null +++ b/src/scrapers/list/theflixseries/index.ts @@ -0,0 +1,23 @@ +import { MWMedia, MWMediaProvider, MWMediaType, MWPortableMedia, MWQuery } from "@/scrapers/types"; + +export const theFlixSeriesScraper: MWMediaProvider = { + id: "theflixseries", + enabled: true, + type: MWMediaType.SERIES, + displayName: "TheFlix", + + async getMediaFromPortable(media: MWPortableMedia): Promise { + return { + ...media, + title: "title here" + } + }, + + async searchForMedia(query: MWQuery): Promise { + return [{ + mediaId: "b", + providerId: this.id, + title: `series test`, + }]; + }, +} diff --git a/src/scrapesr/index.js b/src/scrapesr/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/sdf/index.js b/src/sdf/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/types.d.ts/index.js b/src/types.d.ts/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/views/MovieView.tsx b/src/views/MovieView.tsx new file mode 100644 index 00000000..91e86511 --- /dev/null +++ b/src/views/MovieView.tsx @@ -0,0 +1,7 @@ +export function MovieView() { + return ( +
+

Movie view here

+
+ ) +} diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx new file mode 100644 index 00000000..c91a95bf --- /dev/null +++ b/src/views/SearchView.tsx @@ -0,0 +1,23 @@ +import { WatchedMediaCard } from "@/components/media/WatchedMediaCard"; +import { SearchBarInput } from "@/components/SearchBar"; +import { GetProviderFromId, MWMedia, MWMediaType, SearchProviders } from "@/scrapers"; +import { useState } from "react"; + +export function SearchView() { + const [results, setResults] = useState([]); + const [search, setSearch] = useState(""); + + async function runSearch() { + const results = await SearchProviders({ type: MWMediaType.MOVIE, searchQuery: search }); + setResults(results); + } + + return ( +
+

Search

+ +

Search results

+ {results.map((v)=>())} +
+ ) +} diff --git a/src/views/SeriesView.tsx b/src/views/SeriesView.tsx new file mode 100644 index 00000000..f535ca0f --- /dev/null +++ b/src/views/SeriesView.tsx @@ -0,0 +1,7 @@ +export function SeriesView() { + return ( +
+

Series view here

+
+ ) +}