CodeYourFuture · SaadiaELF · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "@chakra-ui/icons": "^2.0.15",
+    "@chakra-ui/react": "^2.4.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "framer-motion": "^8.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1",
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>CYF Chat</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "cyf-chat",
+    "short_name": "cyf-chat",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/src/App.css b/src/App.css
@@ -1,33 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,19 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import "./App.css";
+import Home from "./pages/Home";
+import Messages from "./pages/Messages";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/messages" element={<Messages />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { Link as ReachLink } from "react-router-dom";
+import {
+  ChakraProvider,
+  Card,
+  CardHeader,
+  CardBody,
+  Link,
+  Heading,
+  Image,
+  Center,
+  Stack,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Textarea,
+  Button,
+  FormControl,
+  FormLabel,
+} from "@chakra-ui/react";
+import { AtSignIcon } from "@chakra-ui/icons";
+
+function Home() {
+  const [userData, setUserData] = useState({
+    from: "",
+    text: "",
+  });
+
+  // Handle inputs change
+  function handleInputChange(event) {
+    const updatedUserData = {
+      ...userData,
+      [event.target.name]: event.target.value,
+    };
+    setUserData(updatedUserData);
+  }
+
+  // Create new message to API
+  function createMessage(e) {
+    if (userData.from && userData.text) {
+      fetch(`https://saadiaelf-chat-server.glitch.me/messages`, {
+        method: "POST",
+        body: JSON.stringify(userData),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          console.log("Success:", data);
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+        });
+    } else {
+      e.preventDefault();
+    }
+  }
+  return (
+    <ChakraProvider>
+      <Center>
+        <Card
+          size="lg"
+          width="5xl"
+          m="4"
+          direction={{ base: "column", sm: "row" }}
+          overflow="hidden"
+          variant="outline"
+        >
+          <Image
+            objectFit="cover"
+            maxW={{ base: "100%", sm: "500px" }}
+            src="https://images.pexels.com/photos/1111369/pexels-photo-1111369.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+            alt="Pink Background With Speech Bubble"
+          />
+          <CardBody>
+            <CardHeader>
+              <Heading size="xl">CYF Chat</Heading>
+            </CardHeader>
+            <FormControl isRequired>
+              <Stack pl="5" spacing={2}>
+                <FormLabel>Username</FormLabel>
+                <InputGroup>
+                  <InputLeftElement
+                    pointerEvents="none"
+                    children={<AtSignIcon color="gray.300" />}
+                  />
+                  <Input
+                    name="from"
+                    type="text"
+                    placeholder="Username"
+                    onChange={handleInputChange}
+                  />
+                </InputGroup>
+                <FormLabel>Message</FormLabel>
+                <Textarea
+                  name="text"
+                  placeholder="Add message"
+                  size="sm"
+                  onChange={handleInputChange}
+                />
+                <Center>
+                  <Link as={ReachLink} to="/messages">
+                    <Button
+                      colorScheme="pink"
+                      type="submit"
+                      onClick={createMessage}
+                    >
+                      Post Message
+                    </Button>
+                  </Link>
+                </Center>
+              </Stack>
+            </FormControl>
+
+            <Link color="red.600" as={ReachLink} to="/messages">
+              View latest messages
+            </Link>
+          </CardBody>
+        </Card>
+      </Center>
+    </ChakraProvider>
+  );
+}
+
+export default Home;