531 lines
21 KiB
TypeScript
531 lines
21 KiB
TypeScript
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 { OtherSchema, PreSubmitOtherSchema, type Other, type PreSubmitOther } from '../lib/schemas';
|
|
|
|
|
|
export default function Other({theme, selCat, others, setOthers, setSelCat}:any){
|
|
const [tbd, setTbd] = useState<Other[]>([]);
|
|
const [inProgress, setInProgress] = useState<Other[]>([]);
|
|
const [completed, setCompleted] = useState<Other[]>([]);
|
|
const [addModalVisible, setAddModalVisible] = useState(false);
|
|
const [editOther, setEditOther] = useState<Other>({id: 0, title: '', rating: 0, notes: '', completeState: 0, currentSeason: 0, currentEpisode: 0, category: Number(selCat.id)});
|
|
|
|
const st = style(theme);
|
|
|
|
const addOther = async (other: PreSubmitOther) => {
|
|
const res = await db.from('others').insert(other);
|
|
if (res.error) {
|
|
console.log(res.error);
|
|
return
|
|
}
|
|
setOthers((currentState:any)=>[...currentState, res.data]);
|
|
}
|
|
|
|
const deleteOther = async (id: number) => {
|
|
const res = await db.from('others').delete().eq({id: id});
|
|
if (res.error) {
|
|
console.log(res.error);
|
|
return
|
|
}
|
|
setOthers((currentState:any)=>currentState.filter((other:Other)=>other.id !== id));
|
|
setEdditOther({id: 0, title: '', rating: 0, notes: '', completeState: 0, currentSeason: 0, currentEpisode: 0, category: selCat.id});
|
|
}
|
|
|
|
const updateOther = async () => {
|
|
const res = await db.from('others').update(editOther).eq({id: editOther.id});
|
|
if (res.error) {
|
|
console.log(res.error);
|
|
return
|
|
}
|
|
setOthers((currentState:any)=>currentState.map((m:Other)=>m.id === editOther.id ? editOther : m));
|
|
}
|
|
|
|
const setEdditOther = (other: Other) => {
|
|
setEditOther(other);
|
|
}
|
|
|
|
const sortOthers = async () => {
|
|
const sortedUnWatchedshows = others.filter((other:Other) => other.completeState===0).sort((a:Other, b:Other) => {
|
|
if (a.title && b.title) {
|
|
return a.title.localeCompare(b.title)
|
|
}
|
|
return 0;
|
|
})
|
|
const sortedWatchingShows = others.filter((other:Other) => other.completeState===1).sort((a:Other, b:Other) => {
|
|
if (a.title && b.title) {
|
|
return a.title.localeCompare(b.title)
|
|
}
|
|
return 0;
|
|
})
|
|
const sortedWatchedshows = others.filter((other:Other) => other.completeState===2).sort((a:Other, b:Other) => {
|
|
if (a.title && b.title) {
|
|
return a.title.localeCompare(b.title)
|
|
}
|
|
return 0;
|
|
})
|
|
setTbd(sortedUnWatchedshows);
|
|
setInProgress(sortedWatchingShows);
|
|
setCompleted(sortedWatchedshows);
|
|
}
|
|
|
|
useEffect(() => {sortOthers()}, [others]);
|
|
useEffect(()=>{return()=>{setSelCat({id:0})}},[])
|
|
|
|
return (
|
|
<View style={style(theme).container}>
|
|
<AddOtherModal theme={theme} addModalVisible={addModalVisible} setAddModalVisible={setAddModalVisible} add={addOther} selCat={selCat}/>
|
|
<EditshowModal theme={theme} editOther={editOther} setEditOther={setEdditOther} update={updateOther} remove={deleteOther} selCat={selCat}/>
|
|
{(addModalVisible)?null:
|
|
<TouchableOpacity style={st.buttonOverlay} onPress={()=>setAddModalVisible(true)}>
|
|
<Text style={st.addButton}><AntDesign name="plus" size={30} /></Text>
|
|
</TouchableOpacity>
|
|
}
|
|
<ScrollView style={st.ScrollView}>
|
|
<View style={st.watchingList}>
|
|
{(inProgress.length > 0)?<Text style={{...st.text, fontWeight: 'bold'}}>In Progress</Text>:null}
|
|
{inProgress.map((other:Other) => {return(<OtherLI other={other} theme={theme} key={other.id} selected={setEditOther}/>)})}
|
|
</View>
|
|
<View style={st.unWatchedList}>
|
|
{(tbd.length > 0)?<Text style={{...st.text, fontWeight: 'bold'}}>TBD</Text>:null}
|
|
{tbd.map((other:Other) => {return(<OtherLI other={other} theme={theme} key={other.id} selected={setEditOther}/>)})}
|
|
</View>
|
|
<View style={st.watchedList}>
|
|
{(completed.length > 0)?<Text style={{...st.text, fontWeight: 'bold'}}>COMPLETED</Text>:null}
|
|
{completed.map((other:Other) => {return(<OtherLI other={other} theme={theme} key={other.id} watched={true} selected={setEditOther}/>)})}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
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,
|
|
},
|
|
otherLI:{
|
|
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,
|
|
},
|
|
});
|
|
}
|
|
|
|
function OtherLI({other, theme, watched=false, selected}:any){
|
|
const st = style(theme);
|
|
const rating = other.rating ? other.rating : 0;
|
|
return (
|
|
<TouchableOpacity style={st.otherLI} onPress={()=>selected(other)}>
|
|
<Text style={st.title}>{other.title}</Text>
|
|
<RatingStars rating={rating} theme={theme}/>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
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(<Text key={i} style={st.star} onPress={()=>handlePress(i+1)}><AntDesign name="star" size={22} /></Text>)
|
|
} else {
|
|
stars.push(<Text key={i} style={st.star} onPress={()=>handlePress(i+1)}><AntDesign name="staro" size={22} /></Text>)
|
|
}
|
|
}
|
|
} else {
|
|
for (let i = 0; i < 5; i++) {
|
|
if (i < rating) {
|
|
stars.push(<Text key={i} style={st.starD}><AntDesign name="star" size={22} /></Text>)
|
|
} else {
|
|
stars.push(<Text key={i} style={st.starD}><AntDesign name="staro" size={22} /></Text>)
|
|
}
|
|
}
|
|
}
|
|
return (
|
|
<View style={st.starView}>
|
|
{stars}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
function AddOtherModal({addModalVisible, setAddModalVisible, add, theme, selCat}:any){
|
|
const [title, setTitle] = useState("");
|
|
const [rating, setRating] = useState(0);
|
|
const [completeState, setCompleteState] = 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);
|
|
setCompleteState(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 other= {
|
|
title: titleCase(title),
|
|
rating: rating,
|
|
completeState: completeState,
|
|
currentSeason: season,
|
|
currentEpisode: episode,
|
|
notes: notes,
|
|
category: selCat.id
|
|
}
|
|
const {data, error}:any = PreSubmitOtherSchema.safeParse(other);
|
|
if (error) {
|
|
console.log(error);
|
|
return;
|
|
}
|
|
add(data);
|
|
cancel();
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
animationType="slide"
|
|
transparent={true}
|
|
visible={addModalVisible}
|
|
>
|
|
<View style={st.centeredView}>
|
|
<View style={st.modalView}>
|
|
<View style={st.modalContainer}>
|
|
<View style={st.row}>
|
|
<Text style={st.modalBack} onPress={cancel}><Ionicons name="chevron-back" size={20} /></Text>
|
|
<Text style={st.modalTitle} >Add {selCat.title}</Text>
|
|
<Text style={st.modalSubmit} onPress={submit}>SUBMIT</Text>
|
|
</View>
|
|
<View style={{...st.row, margin: 10, marginTop: 40}}>
|
|
<Text style={{...st.text, marginTop: 4, flex: 1,}}>Title:</Text>
|
|
<TextInput style={st.textInput} onChangeText={setTitle} value={title}/>
|
|
</View>
|
|
<View style={{...st.row, margin: 10, backgroundColor: theme.lowLight, width: "94%", borderRadius: 30}}>
|
|
<TouchableOpacity style={(completeState===0)?{...style(theme).threeSwitch, ...style(theme).threeSwitchSelected}:{...style(theme).threeSwitch}} onPress={()=>setCompleteState(0)}>
|
|
<Text style={{...st.text, marginTop: 4}}>TBD</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={(completeState===1)?{...style(theme).threeSwitch, ...style(theme).threeSwitchSelected}:{...style(theme).threeSwitch}} onPress={()=>setCompleteState(1)}>
|
|
<Text style={{...st.text, marginTop: 4}}>In Progress</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={(completeState===2)?{...style(theme).threeSwitch, ...style(theme).threeSwitchSelected}:{...style(theme).threeSwitch}} onPress={()=>setCompleteState(2)}>
|
|
<Text style={{...st.text, marginTop: 4}}>Completed</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{(selCat.showEpisodes)?
|
|
<View style={{...st.row, margin: 10}}>
|
|
<View style={{...st.row, flex: 1, justifyContent: 'center'}}>
|
|
<Text style={{...st.text, marginTop: 4,}}>Season:</Text>
|
|
<TextInput style={st.numberInput} keyboardType = 'number-pad' onChangeText={(s)=>setSeason(Number(s))} value={season.toString()}/>
|
|
</View>
|
|
<View style={{...st.row, flex: 1, justifyContent: 'center'}}>
|
|
<Text style={{...st.text, marginTop: 4,}}>Episode:</Text>
|
|
<TextInput style={st.numberInput} keyboardType = 'number-pad' onChangeText={(s)=>setEpisode(Number(s))} value={episode.toString()}/>
|
|
</View>
|
|
</View>:null}
|
|
<View style={{...st.row, margin: 10,}}>
|
|
<Text style={{...st.text, marginTop: 4, flex: 1,}}>Rating:</Text>
|
|
<RatingStars rating={rating} theme={theme} onPress={setRating} />
|
|
</View>
|
|
<View style={{width: '100%', margin: 10}}>
|
|
<Text style={{...st.text, marginTop: 4,}}>Notes:</Text>
|
|
<TextInput
|
|
editable
|
|
multiline
|
|
numberOfLines={8}
|
|
maxLength={400}
|
|
style={st.textArea}
|
|
onChangeText={setNotes}
|
|
value={notes}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
|
|
function EditshowModal({editOther, setEditOther, update, theme, remove, selCat}:any){
|
|
const st = style(theme);
|
|
|
|
const cancel = () => {
|
|
setEditOther({id: 0, title: "", rating: 0, watched: false, notes: "", currentSeason: 1, currentEpisode: 1, category: selCat.id});
|
|
}
|
|
|
|
const setRating = (rating:number) => {
|
|
setEditOther((currentState:any)=>({...currentState, rating: rating}));
|
|
}
|
|
const setTitle = (title:string) => {
|
|
setEditOther((currentState:any)=>({...currentState, title: title}));
|
|
}
|
|
const setCompleteState = (completeState:number) => {
|
|
setEditOther((currentState:any)=>({...currentState, completeState: completeState}));
|
|
}
|
|
const setSeason = (season:number) => {
|
|
setEditOther((currentState:any)=>({...currentState, currentSeason: Number(season)}));
|
|
}
|
|
const setEpisode = (episode:number) => {
|
|
setEditOther((currentState:any)=>({...currentState, currentEpisode: Number(episode)}));
|
|
}
|
|
const setNotes = (notes:string) => {
|
|
setEditOther((currentState:any)=>({...currentState, notes: notes}));
|
|
}
|
|
|
|
|
|
const submit = () => {
|
|
update();
|
|
cancel();
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
animationType="slide"
|
|
transparent={true}
|
|
visible={editOther.id > 0}
|
|
>
|
|
<View style={st.centeredView}>
|
|
<View style={st.modalView}>
|
|
<View style={st.modalContainer}>
|
|
<View style={st.row}>
|
|
<Text style={st.modalBack} onPress={cancel}><Ionicons name="chevron-back" size={20} /></Text>
|
|
<Text style={st.modalTitle} >Edit {selCat.title}</Text>
|
|
<Text style={st.modalSubmit} onPress={submit}>SUBMIT</Text>
|
|
</View>
|
|
<View style={{...st.row, margin: 10, marginTop: 40}}>
|
|
<Text style={{...st.text, marginTop: 4, flex: 1,}}>Title:</Text>
|
|
<TextInput style={st.textInput} onChangeText={setTitle} value={editOther.title}/>
|
|
</View>
|
|
<View style={{...st.row, margin: 10, backgroundColor: theme.lowLight, width: "94%", borderRadius: 30}}>
|
|
<TouchableOpacity style={(editOther.completeState===0)?{...style(theme).threeSwitch, ...style(theme).threeSwitchSelected}:{...style(theme).threeSwitch}} onPress={()=>setCompleteState(0)}>
|
|
<Text style={{...st.text, marginTop: 4}}>TBD</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={(editOther.completeState===1)?{...style(theme).threeSwitch, ...style(theme).threeSwitchSelected}:{...style(theme).threeSwitch}} onPress={()=>setCompleteState(1)}>
|
|
<Text style={{...st.text, marginTop: 4}}>In Progress</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={(editOther.completeState===2)?{...style(theme).threeSwitch, ...style(theme).threeSwitchSelected}:{...style(theme).threeSwitch}} onPress={()=>setCompleteState(2)}>
|
|
<Text style={{...st.text, marginTop: 4}}>Completed</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{(selCat.showEpisodes)?
|
|
<View style={{...st.row, margin: 10}}>
|
|
<View style={{...st.row, flex: 1, justifyContent: 'center'}}>
|
|
<Text style={{...st.text, marginTop: 4,}}>Season:</Text>
|
|
<TextInput style={st.numberInput} keyboardType = 'number-pad' onChangeText={(s)=>setSeason(Number(s))} value={editOther.currentSeason.toString()}/>
|
|
</View>
|
|
<View style={{...st.row, flex: 1, justifyContent: 'center'}}>
|
|
<Text style={{...st.text, marginTop: 4,}}>Episode:</Text>
|
|
<TextInput style={st.numberInput} keyboardType = 'number-pad' onChangeText={(s)=>setEpisode(Number(s))} value={editOther.currentEpisode.toString()}/>
|
|
</View>
|
|
</View>:null}
|
|
<View style={{...st.row, margin: 10,}}>
|
|
<Text style={{...st.text, marginTop: 4, flex: 1,}}>Rating:</Text>
|
|
<RatingStars rating={editOther.rating} theme={theme} onPress={setRating} />
|
|
</View>
|
|
<View style={{width: '100%', margin: 10, marginBottom: 0,}}>
|
|
<Text style={{...st.text, marginTop: 4,}}>Notes:</Text>
|
|
<TextInput
|
|
editable
|
|
multiline
|
|
numberOfLines={6}
|
|
maxLength={400}
|
|
style={st.textArea}
|
|
onChangeText={setNotes}
|
|
value={editOther.notes}
|
|
/>
|
|
</View>
|
|
<View style={{...st.row, width: '90%', marginLeft: 20, justifyContent: "flex-start"}}>
|
|
<Button title="delete" onPress={()=>remove(editOther.id)} theme={theme} style={{backgroundColor: theme.danger, paddingHorizontal: 25, margin: 0,}}/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
} |