[build] connect, create diary

src/api/connectDiary.js

@@ -0,0 +1,31 @@
+export const connectDiary = async ({ diaryId, credentials }) => {
+    console.log("createDiary diary info for user:", credentials, diaryId);
+    const fetchUrl = `${process.env.NEXT_PUBLIC_LAMBDA_URL}/connect-diary`;
+
+    try {
+      const response = await fetch(fetchUrl, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          diaryId: diaryId,
+          connected: true,
+          user2: credentials,
+          }),
+      });
+
+      if (!response.ok) {
+      console.error('Failed to create diary:', response.status);
+      return null;
+      }
+
+      console.log('Diary created successfully!');
+      return await response.json(); // Return the response if needed
+    } catch (error) {
+      console.error('Error during diary creation:', error);
+      return null; // Handle errors gracefully
+    }
+  };
+

src/components/CreateDiary.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { createDiary } from '../api/createDiary';
+import { connectDiary } from '../api/connectDiary';
 
-function Diary() {
-  const [selectedAccordion, setSelectedAccordion] = useState(''); // To track which accordion is selected
+function Diary({ setDiaryCreated, credentials }) {
+  const [selectedAccordion, setSelectedAccordion] = useState(""); // To track which accordion is selected
   const [date, setDate] = useState('');
   const [loading, setLoading] = useState(false);
-  const [credentials, setCredentials] = useState(""); // Replace with your credentials state
-  const [diaryCreated, setDiaryCreated] = useState(false);
+  const [diaryId, setDiaryId] = useState("");
 
   // Function to generate a random diary ID
   function generateRandomString() {
@@ -29,11 +29,14 @@ function Diary() {
   };
 
   // Handle Connect Diary button click
-  const handleConnectDiary = () => {
-    // Logic for connecting the diary (this can be modified to match your implementation)
-    console.log('Connecting to diary...');
+  const handleConnectDiary = async (e) => {  // Add async here
+    setLoading(true);
+    e.preventDefault();  // Ensure e is passed in
+    const response = await connectDiary({diaryId, credentials});
+    setDiaryCreated(true);
   };
 
+
   return (
     <div className="DiaryMain">
       <div>
@@ -83,8 +86,8 @@ function Diary() {
               <input 
                 type="text" 
                 placeholder="Enter diary ID" 
-                value={credentials} 
-                onChange={(e) => setCredentials(e.target.value)} 
+                value={diaryId}
+                onChange={(e) => setDiaryId(e.target.value)}
               />
               <button 
                 onClick={handleConnectDiary} 

src/components/DiaryHome.js

@@ -53,6 +53,7 @@ export default function DiaryHome({ credentials }) {
 
   useEffect(() => {
     if (diaryCreated) {
+      console.log('Diary has been successfully created. Fetching diary info...');
       getDiaryInfo();
     }
   }, [diaryCreated]);