diff --git a/routes/Shows.tsx b/routes/Shows.tsx index 9a63a39..c9d60c7 100644 --- a/routes/Shows.tsx +++ b/routes/Shows.tsx @@ -1,9 +1,101 @@ -import { StyleSheet, Text, View} from 'react-native'; +import { StyleSheet, Text, View, ScrollView, Modal, TextInput, Switch, TouchableOpacity} from 'react-native'; +import Button from '../components/Button'; +import db from '../lib/client' +import { useState, useEffect } from 'react'; +import { AntDesign, Ionicons } from '@expo/vector-icons'; +import { PreSubmitShowSchema, type PreSubmitShow, ShowSchema, type Show } from '../lib/schemas'; + + +export default function Shows({theme, shows, setShows}:any){ + const [unWatched, setUnWatched] = useState([]); + const [watching, setWatching] = useState([]); + const [watched, setWatched] = useState([]); + const [addModalVisible, setAddModalVisible] = useState(false); + const [editShow, setEditShow] = useState({id: 0, title: '', rating: 0, notes: '', watchState: 0, currentSeason: 0, currentEpisode: 0}); + + const st = style(theme); + + const addshow = async (show: PreSubmitShow) => { + const res = await db.from('shows').insert(show); + if (res.error) { + console.log(res.error); + return + } + setShows((currentState:any)=>[...currentState, res.data]); + } + + const deleteshow = async (id: number) => { + const res = await db.from('shows').delete().eq({id: id}); + if (res.error) { + console.log(res.error); + return + } + setShows((currentState:any)=>currentState.filter((show:Show)=>show.id !== id)); + setEdditShow({id: 0, title: '', rating: 0, notes: '', watchState: 0, currentSeason: 0, currentEpisode: 0}); + } + + const updateshow = async () => { + const res = await db.from('shows').update(editShow).eq({id: editShow.id}); + if (res.error) { + console.log(res.error); + return + } + setShows((currentState:any)=>currentState.map((m:Show)=>m.id === editShow.id ? editShow : m)); + } + + const setEdditShow = (show: Show) => { + setEditShow(show); + } + + const sortshows = async () => { + const sortedUnWatchedshows = shows.filter((show:Show) => show.watchState===0).sort((a:Show, b:Show) => { + if (a.title && b.title) { + return a.title.localeCompare(b.title) + } + return 0; + }) + const sortedWatchingShows = shows.filter((show:Show) => show.watchState===1).sort((a:Show, b:Show) => { + if (a.title && b.title) { + return a.title.localeCompare(b.title) + } + return 0; + }) + const sortedWatchedshows = shows.filter((show:Show) => show.watchState === 2).sort((a:Show, b:Show) => { + if (a.title && b.title) { + return a.title.localeCompare(b.title) + } + return 0; + }) + setUnWatched(sortedUnWatchedshows); + setWatching(sortedWatchingShows); + setWatched(sortedWatchedshows); + } + + useEffect(() => {sortshows()}, [shows]); -export default function Shows({theme}:any){ return ( - This is shows + + + {(addModalVisible)?null: + setAddModalVisible(true)}> + + + } + + + {(watching.length > 0)?CURRENTLY WATCHING:null} + {watching.map((show:Show) => {return()})} + + + {(unWatched.length > 0)?DIDN'T SEE:null} + {unWatched.map((show:Show) => {return()})} + + + {(watched.length > 0)?COMPLETED SHOWS:null} + {watched.map((show:Show) => {return()})} + + ) } @@ -12,9 +104,428 @@ export default function Shows({theme}:any){ const style = (theme:any) => { return StyleSheet.create({ container: { + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + width: '100%', + paddingBottom: 60, + height: '100%', + }, + row: { + flexDirection: 'row', + }, + modalBack: { + color: theme.text, + margin: 10, + width: 60, + }, + modalSubmit: { + color: theme.text, + marginVertical: 10, + marginHorizontal: 20, + fontSize: 15, + width: 60, + }, + centeredView: { + flex: 1, + marginTop: 22, + }, + modalView: { + margin: 20, + backgroundColor: theme.background, + borderRadius: 20, + width: '90%', + height: 520, + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 4, + elevation: 5, + }, + modalContainer: { + width: '100%', + height: '100%', + alignItems: 'flex-start', + justifyContent: 'flex-start', + }, + buttonOverlay: { + position: 'absolute', + zIndex: 98, + right: 20, + bottom: 200, + backgroundColor: theme.primary, + borderRadius: 100, + width: 50, + height: 50, + }, + addButton: { + color: theme.text, + zIndex: 99, + textAlign: 'center', + paddingTop: 10, + }, + ScrollView: { + marginBottom: 100, + }, + watchingList: { + width: '100%', + marginBottom: 40, + }, + unWatchedList: { + width: '100%', + marginBottom: 40, + }, + watchedList: { + width: '100%', }, text: { color: theme.text, - } + marginHorizontal: 10, + }, + starView: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + marginHorizontal: 10, + }, + star: { + color: theme.text, + marginHorizontal: 3, + }, + starD: { + color: 'grey', + marginHorizontal: 3, + }, + showLI:{ + margin: 6, + marginVertical: 10, + marginLeft: "auto", + width: "100%", + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'flex-end', + }, + title: { + color: theme.text, + marginHorizontal: 4, + flex: 1, + marginLeft: 50, + fontSize: 20, + }, + textInput: { + backgroundColor: theme.textInput.background, + color: theme.text, + width: '70%', + borderRadius: 10, + paddingHorizontal: 10, + padding: 5, + }, + modalTitle: { + color: theme.text, + flex: 1, + textAlign: 'center', + margin: 10, + fontSize: 20, + opacity: 0.7, + }, + switch: { + backgroundColor: theme.background, + paddingHorizontal: 10, + zIndex: 99, + }, + textArea: { + backgroundColor: theme.textInput.background, + color: theme.text, + width: '90%', + margin: 10, + borderRadius: 10, + padding: 5, + textAlignVertical: 'top', + }, + threeSwitch: { + flex: 1, + paddingVertical: 10, + opacity: 1, + alignItems: 'center', + justifyContent: 'center', + }, + threeSwitchSelected: { + borderRadius: 30, + backgroundColor: theme.highLight, + alignItems: 'center', + justifyContent: 'center', + }, + numberInput: { + backgroundColor: theme.textInput.background, + color: theme.text, + borderRadius: 10, + paddingHorizontal: 10, + padding: 5, + }, }); -} \ No newline at end of file +} + +function ShowLI({show, theme, watched=false, selected}:any){ + const st = style(theme); + const rating = show.rating ? show.rating : 0; + return ( + selected(show)}> + {show.title} + + + ) +} + +function RatingStars({rating, theme, disabled=false, onPress }:any){ + const st = style(theme); + + const handlePress = (i:number) => { + if (onPress) { + if (i === rating) { + onPress(0); + } else { + onPress(i); + } + } + } + + const stars = [] + if (!disabled){ + for (let i = 0; i < 5; i++) { + if (i < rating) { + stars.push(handlePress(i+1)}>) + } else { + stars.push(handlePress(i+1)}>) + } + } + } else { + for (let i = 0; i < 5; i++) { + if (i < rating) { + stars.push() + } else { + stars.push() + } + } + } + return ( + + {stars} + + ) +} + + +function AddshowModal({addModalVisible, setAddModalVisible, add, theme}:any){ + const [title, setTitle] = useState(""); + const [rating, setRating] = useState(0); + const [watchState, setWatchState] = useState(0); + const [season, setSeason] = useState(1); + const [episode, setEpisode] = useState(1); + const [notes, setNotes] = useState(""); + const st = style(theme); + + const cancel = () => { + setTitle(""); + setRating(0); + setWatchState(0); + setSeason(1); + setEpisode(1); + setNotes(""); + setAddModalVisible(false); + } + + + function titleCase(str:any) { + str = str.split(' '); + for (var i = 0; i < str.length; i++) { + str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); + } + return str.join(' '); + } + + + const submit = () => { + + const show = { + title: titleCase(title), + rating: rating, + watchState: watchState, + currentSeason: season, + currentEpisode: episode, + notes: notes, + } + const {data, error}:any = PreSubmitShowSchema.safeParse(show); + if (error) { + console.log(error); + return; + } + add(data); + cancel(); + } + + return ( + + + + + + + Add Show + SUBMIT + + + Title: + + + + setWatchState(0)}> + Didn't See + + setWatchState(1)}> + Currently Watching + + setWatchState(2)}> + Completed + + + + + Season: + setSeason(Number(s))} value={season.toString()}/> + + + Episode: + setEpisode(Number(s))} value={episode.toString()}/> + + + + Rating: + + + + Notes: + + + + + + + ) +} + + +function EditshowModal({editShow, setEditShow, update, theme, remove}:any){ + const st = style(theme); + const season = editShow.currentSeason; + + const cancel = () => { + setEditShow({id: 0, title: "", rating: 0, watched: false, notes: "", currentSeason: 1, currentEpisode: 1}); + } + + const setRating = (rating:number) => { + setEditShow((currentState:any)=>({...currentState, rating: rating})); + } + const setTitle = (title:string) => { + setEditShow((currentState:any)=>({...currentState, title: title})); + } + const setWatchState = (watchState:number) => { + setEditShow((currentState:any)=>({...currentState, watchState: watchState})); + } + const setSeason = (season:number) => { + setEditShow((currentState:any)=>({...currentState, currentSeason: Number(season)})); + } + const setEpisode = (episode:number) => { + setEditShow((currentState:any)=>({...currentState, currentEpisode: Number(episode)})); + } + const setNotes = (notes:string) => { + setEditShow((currentState:any)=>({...currentState, notes: notes})); + } + + + const submit = () => { + update(); + cancel(); + } + + return ( + 0} + > + + + + + + Edit Show + SUBMIT + + + Title: + + + + setWatchState(0)}> + Didn't See + + setWatchState(1)}> + Currently Watching + + setWatchState(2)}> + Completed + + + + + Season: + setSeason(Number(s))} value={editShow.currentSeason.toString()}/> + + + Episode: + setEpisode(Number(s))} value={editShow.currentEpisode.toString()}/> + + + + Rating: + + + + Notes: + + + +