mirror of
https://github.com/urosran/cally.git
synced 2025-11-27 17:04:55 +00:00
Calendar page refactor
This commit is contained in:
Milan Paunovic
@ -1,188 +1,172 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
AntDesign,
|
||||
Feather,
|
||||
MaterialCommunityIcons,
|
||||
MaterialIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import {
|
||||
Button,
|
||||
ButtonSize,
|
||||
Card,
|
||||
Dialog,
|
||||
PanningProvider,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import { StyleSheet, TouchableOpacity } from "react-native";
|
||||
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
|
||||
import React, {useState} from "react";
|
||||
import {MaterialIcons,} from "@expo/vector-icons";
|
||||
import {Button, Card, Dialog, PanningProvider, Text, View,} from "react-native-ui-lib";
|
||||
import {StyleSheet, TouchableOpacity} from "react-native";
|
||||
import AddChoreDialog from "../todos/AddChoreDialog";
|
||||
import { ToDosContextProvider } from "@/contexts/ToDosContext";
|
||||
import {ToDosContextProvider} from "@/contexts/ToDosContext";
|
||||
import UploadImageDialog from "./UploadImageDialog";
|
||||
import CameraIcon from "@/assets/svgs/CameraIcon";
|
||||
import CalendarIcon from "@/assets/svgs/CalendarIcon";
|
||||
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
||||
import {useSetAtom} from "jotai";
|
||||
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
|
||||
|
||||
export const AddEventDialog = () => {
|
||||
const [show, setShow] = useState(false);
|
||||
const [showManualInputModal, setShowManualInputModal] = useState(false);
|
||||
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
|
||||
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
|
||||
const [show, setShow] = useState(false);
|
||||
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
|
||||
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom)
|
||||
|
||||
const handleOpenManualInputModal = () => {
|
||||
setShow(false);
|
||||
setTimeout(() => {
|
||||
setShowManualInputModal(true);
|
||||
}, 500);
|
||||
};
|
||||
const handleOpenManualInputModal = () => {
|
||||
setShow(false);
|
||||
setTimeout(() => {
|
||||
setSelectedNewEndDate(new Date());
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleScanImageDialog = () => {
|
||||
setShow(false);
|
||||
setTimeout(() => {
|
||||
setShowUploadDialog(true);
|
||||
}, 100);
|
||||
};
|
||||
const handleScanImageDialog = () => {
|
||||
setShow(false);
|
||||
setTimeout(() => {
|
||||
setShowUploadDialog(true);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<ToDosContextProvider>
|
||||
<>
|
||||
<Button
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
height: 40,
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#fd1775",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
color="white"
|
||||
enableShadow
|
||||
onPress={() => setShow(true)}
|
||||
>
|
||||
<View row centerV centerH>
|
||||
<MaterialIcons name="add" size={22} color={"white"} />
|
||||
<Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
|
||||
New
|
||||
</Text>
|
||||
</View>
|
||||
</Button>
|
||||
return (
|
||||
<ToDosContextProvider>
|
||||
<>
|
||||
<Button
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 20,
|
||||
right: 20,
|
||||
height: 40,
|
||||
borderRadius: 30,
|
||||
backgroundColor: "#fd1775",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
color="white"
|
||||
enableShadow
|
||||
onPress={() => setShow(true)}
|
||||
>
|
||||
<View row centerV centerH>
|
||||
<MaterialIcons name="add" size={22} color={"white"}/>
|
||||
<Text white style={{fontSize: 16, fontFamily: 'Manrope_600SemiBold'}}>
|
||||
New
|
||||
</Text>
|
||||
</View>
|
||||
</Button>
|
||||
|
||||
<Dialog
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
center
|
||||
>
|
||||
<Card style={styles.dialogCard}>
|
||||
<Text text60 style={styles.modalTitle}>
|
||||
Create a new event
|
||||
</Text>
|
||||
<Dialog
|
||||
visible={show}
|
||||
onDismiss={() => setShow(false)}
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
center
|
||||
>
|
||||
<Card style={styles.dialogCard}>
|
||||
<Text text60 style={styles.modalTitle}>
|
||||
Create a new event
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{ marginTop: 20, alignItems: "center", width: "100%" }}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
backgroundColor: "#ea156c",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
label="Scan Image"
|
||||
labelStyle={styles.btnLabel}
|
||||
onPress={handleScanImageDialog}
|
||||
iconSource={() => (
|
||||
<CameraIcon color="white" style={styles.btnIcon} />
|
||||
)}
|
||||
/>
|
||||
<View
|
||||
style={{marginTop: 20, alignItems: "center", width: "100%"}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
backgroundColor: "#ea156c",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
label="Scan Image"
|
||||
labelStyle={styles.btnLabel}
|
||||
onPress={handleScanImageDialog}
|
||||
iconSource={() => (
|
||||
<CameraIcon color="white" style={styles.btnIcon}/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
backgroundColor: "#e28800",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
label="Create Event"
|
||||
labelStyle={styles.btnLabel}
|
||||
onPress={handleOpenManualInputModal}
|
||||
iconSource={() => (
|
||||
<CalendarIcon color={"white"} style={styles.btnIcon} />
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
backgroundColor: "#e28800",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
label="Create Event"
|
||||
labelStyle={styles.btnLabel}
|
||||
onPress={handleOpenManualInputModal}
|
||||
iconSource={() => (
|
||||
<CalendarIcon color={"white"} style={styles.btnIcon}/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
backgroundColor: "#05a8b6",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
label="Add To Do"
|
||||
labelStyle={styles.btnLabel}
|
||||
onPress={() => setChoreDialogVisible(true)}
|
||||
iconSource={() => (
|
||||
<NavToDosIcon
|
||||
color={"white"}
|
||||
width={23}
|
||||
style={styles.btnIcon}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
<Button
|
||||
style={{
|
||||
marginBottom: 10,
|
||||
backgroundColor: "#05a8b6",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
label="Add To Do"
|
||||
labelStyle={styles.btnLabel}
|
||||
onPress={() => setChoreDialogVisible(true)}
|
||||
iconSource={() => (
|
||||
<NavToDosIcon
|
||||
color={"white"}
|
||||
width={23}
|
||||
style={styles.btnIcon}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity onPress={() => setShow(false)}>
|
||||
<Text style={styles.bottomText} text70>
|
||||
Go back to calendar
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</Card>
|
||||
</Dialog>
|
||||
<AddChoreDialog
|
||||
isVisible={choreDialogVisible}
|
||||
setIsVisible={setChoreDialogVisible}
|
||||
/>
|
||||
<ManuallyAddEventModal
|
||||
show={showManualInputModal}
|
||||
close={() => setShowManualInputModal(false)}
|
||||
/>
|
||||
<UploadImageDialog
|
||||
show={showUploadDialog}
|
||||
setShow={setShowUploadDialog}
|
||||
/>
|
||||
</>
|
||||
</ToDosContextProvider>
|
||||
);
|
||||
<TouchableOpacity onPress={() => setShow(false)}>
|
||||
<Text style={styles.bottomText} text70>
|
||||
Go back to calendar
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</Card>
|
||||
</Dialog>
|
||||
<AddChoreDialog
|
||||
isVisible={choreDialogVisible}
|
||||
setIsVisible={setChoreDialogVisible}
|
||||
/>
|
||||
<UploadImageDialog
|
||||
show={showUploadDialog}
|
||||
setShow={setShowUploadDialog}
|
||||
/>
|
||||
</>
|
||||
</ToDosContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
modalTitle: {
|
||||
fontSize: 22,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
marginBottom: 16,
|
||||
},
|
||||
bottomText: {
|
||||
marginTop: 20,
|
||||
color: "#999999",
|
||||
fontSize: 13.53,
|
||||
fontFamily: "Poppins_500Medium",
|
||||
},
|
||||
dialogCard: {
|
||||
paddingHorizontal: 40,
|
||||
paddingTop: 35,
|
||||
paddingBottom: 20,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 20,
|
||||
},
|
||||
btnLabel: {
|
||||
fontSize: 15,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
},
|
||||
btnIcon: { marginRight: 10 },
|
||||
modalTitle: {
|
||||
fontSize: 22,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
marginBottom: 16,
|
||||
},
|
||||
bottomText: {
|
||||
marginTop: 20,
|
||||
color: "#999999",
|
||||
fontSize: 13.53,
|
||||
fontFamily: "Poppins_500Medium",
|
||||
},
|
||||
dialogCard: {
|
||||
paddingHorizontal: 40,
|
||||
paddingTop: 35,
|
||||
paddingBottom: 20,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 20,
|
||||
},
|
||||
btnLabel: {
|
||||
fontSize: 15,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
},
|
||||
btnIcon: {marginRight: 10},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user