changes

src/components/CreateDiary.js

@@ -1,11 +1,63 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+function CreateDiary({ setDiaryCreated, credentials }) {
+  const [date, setDate] = useState('');
+
+  function generateRandomString() {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 6; i++) {
+        const randomIndex = Math.floor(Math.random() * characters.length);
+        result += characters.charAt(randomIndex);
+    }
+    return result;
+  }
+
+  const handleDiaryCreation = async () => {
+    const diaryId = generateRandomString();
+    const fetchUrl = `${process.env.NEXT_PUBLIC_LAMBDA_URL}/insertDiary`;
+    console.log('Sending request to:', fetchUrl);
+
+    try {
+      const response = await fetch(fetchUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          diaryId: diaryId,
+          startDate: date,
+          connected: false,
+          user1: credentials,
+        }),
+      });
+
+      console.log('API response:', response);
+
+      if (!response.ok) {
+        console.error('Failed to create diary:', response.status);
+        return;  // Stop further execution if there's an error
+      }
+
+      // Handle success response here
+      console.log('Diary created successfully!');
+    } catch (error) {
+      console.error('Error during diary creation:', error);
+    }
+  };
+
+
 
-function CreateDiary({ onCreateDiary, credential }) {
-  console.log(credential);
   return (
     <div className='DiaryMain'>
       <h2>Create Diary</h2>
-      <button onClick={onCreateDiary} className='BasicButton'>Create Diary</button>
+      <form onSubmit={handleDiaryCreation}>
+        <div className='date-input-container'>
+        <h4>Our journey began at &nbsp;&nbsp;</h4>
+        <input type='date' value={date} onChange={(e) => setDate(e.target.value)} required/>
+        </div>
+        <button type='submit' className='BasicButton'>Create Diary</button>
+      </form>
     </div>
   );
 }

src/components/auth/GoogleLoginComponent.js

@@ -17,7 +17,8 @@ const OAuthCallback = ({ setIsRegistered, setLoading, setCredentials }) => {
   };
 
   const fetchTokensFromBackend = async (googleToken) => {
-    fetch(process.env.NEXT_PUBLIC_LAMBDA_URL, {
+    const fetchUrl = process.env.NEXT_PUBLIC_LAMBDA_URL+`/dear-diary-cognito-verification`
+    fetch(fetchUrl, {
       method: 'POST',
       mode: 'cors',
       headers: {
@@ -27,14 +28,15 @@ const OAuthCallback = ({ setIsRegistered, setLoading, setCredentials }) => {
     })
       .then(response => {
         if (!response.ok) {
+          setError(response.error);
           throw new Error(`HTTP error! status: ${response.status}`);
         }
         return response.json();
       })
       .then(data => {
         setIsRegistered(true)
-        const credentials = data.credentials;
-        setCredentials(credentials);
+        console.log(data.email);
+        setCredentials(data.email);
       })
       .catch(error => {
         console.error('Error fetching data:', error);

src/pages/index.js

@@ -13,7 +13,7 @@ export default function Home() {
   const [diaryConnected, setDiaryConnected] = useState(true);
   const [showReadDiary, setShowReadDiary] = useState(false);
   const [showWriteDiary, setShowWriteDiary] = useState(false); // State for WriteDiary visibility
-  const [credential, setCredentials] = useState('');
+  const [credentials, setCredentials] = useState('');
 
   const [diaryInfo, setDiaryInfo] = useState({
     name1: '',
@@ -23,7 +23,6 @@ export default function Home() {
   });
 
   const handleLogin = () => setIsRegistered(true);
-  const handleDiaryCreation = () => setDiaryCreated(true);
   const handleDiaryConnection = () => setDiaryConnected(true);
 
   return (
@@ -32,7 +31,7 @@ export default function Home() {
         {!isRegistered ? (
           <Auth onRegister={handleLogin} setIsRegistered={setIsRegistered} setCredentials={setCredentials}/>
         ) : !diaryCreated ? (
-          <CreateDiary onCreateDiary={handleDiaryCreation} credential={credential} />
+          <CreateDiary setDiaryCreated={setDiaryCreated} credentials={credentials} />
         ) : !diaryConnected ? (
           <WaitingForConnection onConnectDiary={handleDiaryConnection} />
         ) : showWriteDiary ? (  // Conditionally render WriteDiary

src/styles/index.css

@@ -201,3 +201,23 @@ html, body {
 h2 {
   text-align: center;
 }
+
+.date-input-container {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.date-input-container input[type="date"] {
+  padding: 10px;
+  font-size: 1em;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  width: 200px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.date-input-container input[type="date"]:focus {
+  border-color: #4b0082;
+  box-shadow: 0 0 10px rgba(0, 86, 179, 0.3);
+}