snacksndaqs/client/src/components/pastTripsModal.tsx at main · Kieran-Hulsman/snacksndaqs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import {
    Button,
    Box,
    Heading,
    Text,
    List,
    ListItem,
    Divider,
    Flex,
    Center,
    useColorModeValue,
    useTheme,
    useDisclosure,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    useColorMode
  } from "@chakra-ui/react";
  import { Trip } from "../interfaces/connectInterfaces";
  import { formatDate } from "../utils/commonFunctions";
  import { ThemeButton } from "./themeButton";

  export interface PastTripsModalProps {
    isOpen: boolean;
    onClose: () => void;
    trips: Trip[];
  }

  export const PastTripsModal = ({
    isOpen,
    onClose,
    trips,
  }: PastTripsModalProps) => {
    return (
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Past trips</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            {
                trips.map((trip, index) => {
                    return (
                        <>
                        <Heading fontSize="2xl" mb={2}>{trip.city}, {trip.c_name}</Heading>
                        <Text>
                        <strong>Start Date:</strong>{" "}
                        {formatDate(trip.start_date)}
                        </Text>
                        <Text>
                        <strong>End Date:</strong> {formatDate(trip.end_date)}
                        </Text>
                        <Text>
                        <strong>Bio:</strong> {trip.bio}
                        </Text>
                        {trip?.itinerary?.length > 0 ? (
                        <List spacing={3} mt={3}>
                            {trip.itinerary.map((activity, index) => (
                            <ListItem key={index}>
                                <Text>
                                <strong>Activity {activity.a_no}:</strong>{" "}
                                {activity.a_description}
                                </Text>
                                <Text>
                                <strong>Date:</strong> {formatDate(activity.dte)}
                                </Text>
                            </ListItem>
                            ))}
                        </List>
                        ) : (
                        <Text>No Plans Made Yet :(</Text>
                        )}
                        {index < trips.length-1 && (<Divider mt={4} mb={4} />)}
                        </>
                    );
                })
            }
          </ModalBody>

          <ModalFooter>
            <ThemeButton onClick={onClose}>Close</ThemeButton>
          </ModalFooter>
        </ModalContent>
      </Modal>
    );
  }