Fetching Google API Data (#3)

* add header component * trying to fetch api dynamically * update query * rending data(menu info) frontend * do some cleanup * add key to map function * commentout category props * fetch googleapi backend * add google mock api code * fetching google Api from frontend * add google api info * add contact page * change file name * delete commentout code * change let to const Co-authored-by: Chris Jaure <chrisjaure@gmail.com> * change parameter author to review Co-authored-by: Chris Jaure <chrisjaure@gmail.com> Co-authored-by: Chris Jaure <chrisjaure@gmail.com>
priyaraj7 · Nov 4, 2022 · 5d84e64 · 5d84e64
1 parent c7ada34
commit 5d84e64
Show file tree

Hide file tree

Showing 16 changed files with 1,678 additions and 3 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -1,11 +1,16 @@
 import "./App.css";
 import { ChakraProvider } from "@chakra-ui/react";
-import Customer from "./component/customerPage/Customer.js";
+
+import CustomerPage from "./component/customer/CustomerPage.js";
+
+
 
 function App() {
   return (
     <ChakraProvider>
-      <Customer />
+
+      <CustomerPage />
+
     </ChakraProvider>
   );
 }

diff --git a/client/src/api/categoryApi.js b/client/src/api/categoryApi.js
@@ -0,0 +1,6 @@
+export const getAllItem = async (id) => {
+  const response = await fetch(`/api/${id}`);
+  const result = await response.json();
+
+  return result;
+};
diff --git a/client/src/api/googleApi.js b/client/src/api/googleApi.js
@@ -0,0 +1,6 @@
+export const getReviews = async () => {
+  const response = await fetch(`/place/reviews`);
+  const result = await response.json();
+
+  return result;
+};
diff --git a/client/src/component/customer/ContactPage.js b/client/src/component/customer/ContactPage.js
@@ -0,0 +1,134 @@
+import {
+  Container,
+  Flex,
+  Box,
+  Heading,
+  Text,
+  Button,
+  VStack,
+  Wrap,
+  WrapItem,
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Textarea,
+  Link,
+} from "@chakra-ui/react";
+import { MdPhone, MdLocationOn, MdOutlineEmail } from "react-icons/md";
+import { BsPerson, BsPhone } from "react-icons/bs";
+
+function ContactPage() {
+  return (
+    <Container bg="gray.50" maxW="full" mt={0} centerContent overflow="hidden">
+      <Flex>
+        <Box
+          bg="gray.100"
+          borderRadius="lg"
+          m={{ sm: 4, md: 16, lg: 10 }}
+          p={{ sm: 5, md: 5, lg: 16 }}
+        >
+          <Box p={4}>
+            <Wrap spacing={{ base: 20, sm: 3, md: 5, lg: 20 }}>
+              <WrapItem>
+                <Box>
+                  <Heading>Contact</Heading>
+                  <Text mt={{ sm: 3, md: 3, lg: 5 }} color="gray.500">
+                    Fill up the form below to contact
+                  </Text>
+                  <Box py={{ base: 5, sm: 5, md: 8, lg: 10 }}>
+                    <VStack pl={0} spacing={3} alignItems="flex-start">
+                      <Button
+                        size="md"
+                        // height="48px"
+                        // width="200px"
+                        variant="ghost"
+                        // color="#DCE2FF"
+                        _hover={{ border: "2px solid #1C6FEB" }}
+                        leftIcon={<MdPhone color="#1970F1" size="20px" />}
+                      >
+                        +91-988888888
+                      </Button>
+
+                      <Button
+                        as={Link}
+                        size="md"
+                        variant="ghost"
+                        _hover={{ border: "2px solid #1C6FEB" }}
+                        href="https://maps.google.com/?cid=5149673375893793708"
+                        leftIcon={<MdLocationOn color="#1970F1" size="20px" />}
+                      >
+                        Ujire, Karnataka 574240, India
+                      </Button>
+                    </VStack>
+                  </Box>
+                </Box>
+              </WrapItem>
+              <WrapItem>
+                <Box bg="white" borderRadius="lg">
+                  <Box m={8} color="#0B0E3F">
+                    <VStack spacing={5}>
+                      <FormControl id="name">
+                        <FormLabel>Your Name</FormLabel>
+                        <InputGroup borderColor="#E0E1E7">
+                          <InputLeftElement
+                            pointerEvents="none"
+                            children={<BsPerson color="gray.800" />}
+                          />
+                          <Input type="text" size="md" />
+                        </InputGroup>
+                      </FormControl>
+                      <FormControl id="name">
+                        <FormLabel>Mail</FormLabel>
+                        <InputGroup borderColor="#E0E1E7">
+                          <InputLeftElement
+                            pointerEvents="none"
+                            children={<MdOutlineEmail color="gray.800" />}
+                          />
+                          <Input type="text" size="md" />
+                        </InputGroup>
+                      </FormControl>
+                      <FormControl id="phone">
+                        <FormLabel>Phone Number</FormLabel>
+                        <InputGroup borderColor="#E0E1E7">
+                          <InputLeftElement
+                            pointerEvents="none"
+                            children={<BsPhone color="gray.800" />}
+                          />
+                          <Input type="text" size="md" />
+                        </InputGroup>
+                      </FormControl>
+                      <FormControl id="name">
+                        <FormLabel>Message</FormLabel>
+                        <Textarea
+                          borderColor="gray.300"
+                          _hover={{
+                            borderRadius: "gray.300",
+                          }}
+                          placeholder="message"
+                        />
+                      </FormControl>
+                      <FormControl id="name" float="right">
+                        <Button
+                          variant="solid"
+                          bg="#0D74FF"
+                          color="white"
+                          _hover={{}}
+                        >
+                          Send Message
+                        </Button>
+                      </FormControl>
+                    </VStack>
+                  </Box>
+                </Box>
+              </WrapItem>
+            </Wrap>
+          </Box>
+        </Box>
+      </Flex>
+    </Container>
+  );
+}
+
+export default ContactPage;
diff --git a/client/src/component/customer/CustomerPage.js b/client/src/component/customer/CustomerPage.js
@@ -0,0 +1,17 @@
+import Header from "./Header.js";
+import Menu from "./Menu.js";
+import ReviewPage from "./ReviewPage.js";
+import ContactPage from "./ContactPage";
+
+function CustomerPage() {
+  return (
+    <>
+      <Header />
+      <Menu />
+      <ContactPage />
+      <ReviewPage />
+    </>
+  );
+}
+
+export default CustomerPage;