From dac43247d8bf5af354349c6c069c0e98b1e498ca Mon Sep 17 00:00:00 2001
From: Ryan Wantouw <wantouwr@gmail.com>
Date: Fri, 23 Aug 2024 10:37:31 +0800
Subject: [PATCH] feats/upload photo on new post

---
 src/ss_frontend/src/components/HomePost.jsx   | 10 +--
 .../src/components/MiddleHomePart.jsx         | 18 +++---
 .../src/components/ProfileSidebar.jsx         |  2 +-
 src/ss_frontend/src/components/TextInput.jsx  | 62 ++++++++++++-------
 src/testing_motoko/main.mo                    |  0
 5 files changed, 56 insertions(+), 36 deletions(-)
 create mode 100644 src/testing_motoko/main.mo

diff --git a/src/ss_frontend/src/components/HomePost.jsx b/src/ss_frontend/src/components/HomePost.jsx
index 48d2f3e..6c698de 100644
--- a/src/ss_frontend/src/components/HomePost.jsx
+++ b/src/ss_frontend/src/components/HomePost.jsx
@@ -19,11 +19,11 @@ const HomePost = ({ postId, choosePost }) => {
                     </div>
                     <p className='text-base '>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque labore sit velit laborum adipisci tenetur, quas assumenda culpa ipsa quasi explicabo cum nostrum facere est tempora corrupti, obcaecati, porro dolor!</p>
                     <div className='w-full flex justify-start gap-4 p-4 overflow-x-scroll'>
-                        <img className='max-w-52 max-h-36  px rounded-lg' src={blank} alt="" />
-                        <img className='max-w-52 max-h-36  px rounded-lg' src={blank} alt="" />
-                        <img className='max-w-52 max-h-36  px rounded-lg' src={blank} alt="" />
-                        <img className='max-w-52 max-h-36  px rounded-lg' src={blank} alt="" />
-                        <img className='max-w-52 max-h-36  px rounded-lg' src={blank} alt="" />
+                        <img className='max-w-52 max-h-36  rounded-lg' src={blank} alt="" />
+                        <img className='max-w-52 max-h-36  rounded-lg' src={blank} alt="" />
+                        <img className='max-w-52 max-h-36  rounded-lg' src={blank} alt="" />
+                        <img className='max-w-52 max-h-36  rounded-lg' src={blank} alt="" />
+                        <img className='max-w-52 max-h-36  rounded-lg' src={blank} alt="" />
                     </div>
                 </div>
             </div>
diff --git a/src/ss_frontend/src/components/MiddleHomePart.jsx b/src/ss_frontend/src/components/MiddleHomePart.jsx
index b7c8337..948215b 100644
--- a/src/ss_frontend/src/components/MiddleHomePart.jsx
+++ b/src/ss_frontend/src/components/MiddleHomePart.jsx
@@ -1,15 +1,19 @@
 import React from 'react'
 import TextInput from './TextInput'
 import HomePost from './HomePost'
+import { useAuth } from '../hooks/UseAuth'
 
-const MiddleHomePart = ({setCurrPost}) => {
+const MiddleHomePart = ({ setCurrPost }) => {
+  const { isAuthenticated } = useAuth();
   return (
-    <div className='w-1/2 h-full '>
-        <TextInput />
-        <div className='mt-5 flex flex-col gap-6'>
-            <HomePost choosePost={setCurrPost} postId={"dummy"}/>
-            <HomePost choosePost={setCurrPost} postId={"dummy"}/>
-        </div>
+    <div className='w-1/2 h-full flex flex-col justify-start'>
+      {
+        isAuthenticated && <TextInput />
+      }
+      <div className=' flex flex-col gap-6'>
+        <HomePost choosePost={setCurrPost} postId={"dummy"} />
+        <HomePost choosePost={setCurrPost} postId={"dummy"} />
+      </div>
     </div>
   )
 }
diff --git a/src/ss_frontend/src/components/ProfileSidebar.jsx b/src/ss_frontend/src/components/ProfileSidebar.jsx
index 96e86ea..03cb973 100644
--- a/src/ss_frontend/src/components/ProfileSidebar.jsx
+++ b/src/ss_frontend/src/components/ProfileSidebar.jsx
@@ -17,7 +17,7 @@ const ProfileSidebar = () => {
   useEffect(() => {
     console.log(data);
     
-    if (!isLoading) {
+    if (!isLoading && data != undefined) {
       if (data.ok) {
         setUsername(data.ok.username);
         setName(data.ok.name)
diff --git a/src/ss_frontend/src/components/TextInput.jsx b/src/ss_frontend/src/components/TextInput.jsx
index a3991d6..d83dad6 100644
--- a/src/ss_frontend/src/components/TextInput.jsx
+++ b/src/ss_frontend/src/components/TextInput.jsx
@@ -15,7 +15,7 @@ const TextInput = () => {
       return;
     }
 
-    console.log(inputText);
+    console.log(inputText)
 
     try {
       const response = await fetch(
@@ -50,6 +50,8 @@ const TextInput = () => {
           const url = await uploadImage(file, setLoading);
           if (url) {
             setImages((prevImages) => [...prevImages, url]);
+            console.log(images);
+
           } else {
             throw new Error("Failed to upload image.");
           }
@@ -69,28 +71,42 @@ const TextInput = () => {
   };
 
   return (
-    <div className="flex justify-between items-center gap-5">
-      <input
-        type="text"
-        placeholder="Type here"
-        className="input input-bordered pt-6 pb-6 w-full"
-        value={inputText}
-        onChange={(e) => setInputText(e.target.value)}
-      />
-      <input
-        type="file"
-        ref={fileInputRef}
-        style={{ display: "none" }}
-        onChange={handleImage}
-      />
-      <LuImagePlus
-        className="text-4xl cursor-pointer"
-        onClick={handleImageClick}
-      />
-      <HiOutlinePaperAirplane
-        className="text-4xl cursor-pointer"
-        onClick={handleSend}
-      />
+    <div className="mb-5">
+      <h1 className="pl-[1rem] text-xl font-medium">Any project you wanna share?</h1>
+      <div className="flex justify-between items-center gap-5">
+        <input
+          type="text"
+          placeholder="Type here"
+          className="input  pt-6 pb-6 w-full focus:outline-none focus:border-transparent"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+        />
+        <input
+          type="file"
+          ref={fileInputRef}
+          style={{ display: "none" }}
+          onChange={handleImage}
+        />
+        <LuImagePlus
+          className="text-4xl cursor-pointer"
+          onClick={handleImageClick}
+        />
+        <HiOutlinePaperAirplane
+          className="text-4xl cursor-pointer"
+          onClick={handleSend}
+        />
+      </div>
+      {images.length != 0 &&
+        <div className="items-center w-full flex justify-start gap-4 p-4 overflow-x-scroll">
+          {images.map((imageUrl) => {
+            return(
+            <div className="">
+              <img src={imageUrl} className="max-w-52 max-h-36 rounded-lg" alt="" />
+            </div>
+            )
+          })}
+        </div>
+      }
     </div>
   );
 };
diff --git a/src/testing_motoko/main.mo b/src/testing_motoko/main.mo
new file mode 100644
index 0000000..e69de29