diff --git a/routes/OtherCat.tsx b/routes/OtherCat.tsx new file mode 100644 index 0000000..4bc2516 --- /dev/null +++ b/routes/OtherCat.tsx @@ -0,0 +1,169 @@ +import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Modal, TextInput, Switch} from 'react-native'; +import { useEffect, useState } from 'react'; +import { AntDesign, Ionicons } from '@expo/vector-icons'; +import { Link } from "react-router-native"; +import db from '../lib/client' + +export default function OtherCat({theme, otherCategories, setOtherCategories, setSelCat, setShowBack, setTitle}:any){ + const [modalVisible, setModalVisible] = useState(false); + const [newCat, setNewCat] = useState({title: '', showEpisodes: false}); + + const st = style(theme); + + + const submit = async () => { + const res = await db.from('categories').insert(newCat); + if (res.data) { + setOtherCategories([...otherCategories, res.data]) + setModalVisible(false); + setNewCat({title: '', showEpisodes: false}); + } + } + + const updateTitle = (title:string) => { + setNewCat({...newCat, title}) + } + + const handleCheck = () => { + setNewCat((current:any)=>{return {...current, showEpisodes: !current.showEpisodes}}) + } + + return ( + + setModalVisible(true)}> + ADD NEW CATEGORY + + + {otherCategories.map((cat:any) => { + return ( + {setShowBack('categories');setSelCat(cat); setTitle(cat.title);}} to='/other' style={st.category} key={cat.id}> + {cat.title} + + ) + })} + + + + + + setModalVisible(false)}> + Add Movie + SUBMIT + + + Name + + + + Show season and episode tracker: + + + + + + + ) +} + + +const style = (theme:any) => { + return StyleSheet.create({ + container: { + justifyContent: 'center', + width: '100%', + }, + text: { + color: theme.text, + }, + switch: { + flex: 1, + marginHorizontal: 20 + }, + switchText: { + color: theme.text, + margin: 20, + }, + add: { + color: theme.text, + fontSize: 20, + textAlign: 'center', + padding: 10, + backgroundColor: theme.primary, + }, + category: { + color: theme.text, + fontSize: 20, + textAlign: 'center', + padding: 20, + borderColor: theme.accent, + borderWidth: 1, + justifyContent: 'center', + alignItems: 'center', + }, + catText: { + color: theme.text, + width: '100%', + }, + modalView: { + margin: 20, + marginVertical: 300, + backgroundColor: theme.background, + borderRadius: 20, + width: '90%', + height: 180, + 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', + }, + centeredView: { + flex: 1, + marginTop: 22, + }, + modalBack: { + color: theme.text, + margin: 10, + width: 60, + }, + modalSubmit: { + color: theme.text, + marginVertical: 10, + marginHorizontal: 20, + fontSize: 15, + width: 60, + }, + modalTitle: { + color: theme.text, + flex: 1, + textAlign: 'center', + margin: 10, + fontSize: 20, + opacity: 0.7, + }, + row: { + flexDirection: 'row', + }, + textInput: { + backgroundColor: theme.textInput.background, + color: theme.text, + width: '70%', + borderRadius: 10, + paddingHorizontal: 10, + padding: 5, + }, + }); +} \ No newline at end of file