add confirm & alert compos & integrate them in app (alert only in hom…

…e); b00tc4mp#136
Eduardolans · Aug 2, 2024 · de476be · de476be
1 parent e214354
commit de476be
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 18 deletions.
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/Home.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/Home.jsx
@@ -10,6 +10,7 @@ import Footer from './components/Footer'
 import CreatePostForm from './components/CreatePostForm'
 import Hello from './components/Hello'
 import Search from './components/Search'
+import Alert from './components/Alert'
 
 import Button from '../components/core/Button'
 import Heading from '../components/core/Heading'
@@ -26,7 +27,9 @@ function Home({ onUserLoggedOut }) {
     const [view, setView] = useState('')
     const [postListRefreshStamp, setPostListRefreshStamp] = useState(0)
 
-    const navigate = useNavigate()
+    // const navigate = useNavigate()
+
+    const [message, setMessage] = useState(null)
 
     const handleLogout = () => {
         logic.logoutUser()
@@ -47,7 +50,9 @@ function Home({ onUserLoggedOut }) {
                 .catch(error => {
                     console.error(error)
 
-                    alert(error.message)
+                    // alert(error.message + " " + "HELL")
+
+                    setMessage(error.message)
                 })
 
         } catch (error) {
@@ -73,6 +78,8 @@ function Home({ onUserLoggedOut }) {
     //     navigate('/about')
     // }
 
+    const handleAlertAccept = () => setMessage(null)
+
     return <View>
         <Header>
 
@@ -110,6 +117,8 @@ function Home({ onUserLoggedOut }) {
         </View>
 
         <Footer onCreatePostClick={handleCreatePostClick} />
+
+        {message && <Alert message={message} onAccept={handleAlertAccept} />}
     </View>
 }
 

diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/Alert/index.css b/staff/eduardo-sanchez/socialcode/app/src/views/components/Alert/index.css
@@ -0,0 +1,37 @@
+@tailwind components;
+
+@layer components {
+    /* .Alert {
+        @apply p-[.4rem] bg-[red] text-[1rem] border-[1px] border-[var(--first-color)];
+        ;
+    } */
+
+    .Alert {
+        @apply fixed top-20 left-0 w-full h-full flex justify-end;
+    }
+
+    .AlertBox {
+        @apply p-[.4rem] bg-yellow-300 text-[1rem] border-[1px] border-red-500 w-[100px] h-[100px];
+    }
+
+    /* 
+    .Alert {
+       @apply fixed top-0 left-0 w-full h-full flex justify-center items-center;
+   }
+
+   .AlertBox {
+       @apply p-[.4rem] bg-[var(--second-color)] text-[1rem] border-[1px] border-[var(--first-color)] w-[200px] h-[200px];
+   }
+    
+
+    .AlertBox--warn {
+        @apply bg-yellow-300;
+    }
+
+    .AlertBox--error {
+        @apply bg-red-500;
+    }
+     */
+
+
+}
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/Alert/index.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/components/Alert/index.jsx
@@ -0,0 +1,15 @@
+import './index.css'
+
+export default ({ message, onAccept, level = 'warn' }) => <div className="Alert">
+    <div className={`AlertBox AlertBox-${level}`}>
+        <p>{message}</p>
+        <button className="Button" onClick={onAccept}>Accept</button>
+    </div>
+</div>
+
+// export default ({ message, onAccept, level = 'warn' }) => <div class="Alert">
+//     <div class={`AlertBox AlertBox-${level}`}>
+//         <p>{message}</p>
+//         <button class="Button" onClick={onAccept}>Accept</button>
+//     </div>
+// </div>
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/Confirm/index.css b/staff/eduardo-sanchez/socialcode/app/src/views/components/Confirm/index.css
@@ -0,0 +1,15 @@
+@tailwind components;
+
+@layer components {
+    /* .Confirm {
+        @apply fixed top-0 left-0 w-full h-full flex justify-center items-center;
+    } */
+
+    /* .ConfirmBox {
+        @apply p-[.4rem] bg-[var(--second-color)] text-[1rem] border-[1px] border-[var(--first-color)] w-[200px] h-[200px];
+    } */
+
+    .Confirm {
+        @apply p-[.4rem] bg-[var(--second-color)] text-[1rem] border-[1px] border-[var(--first-color)];
+    }
+}
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/Confirm/index.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/components/Confirm/index.jsx
@@ -0,0 +1,16 @@
+import './index.css'
+
+export default ({ message, onAccept, onCancel }) => <div className="Confirm">
+    <p>{message}</p>
+    <button className="Button" onClick={onCancel} >Cancel</button>
+    <button className="Button" onClick={onAccept} >Confirm</button>
+</div>
+
+
+// export default ({ message, onAccept, onCancel }) => <div class="Confirm">
+//     <div class="ConfirmBox">
+//         <p>{message}</p>
+//         <button class="Button" onClick={onCancel}>Cancel</button>
+//         <button class="Button" onClick={onAccept}>Confirm</button>
+//     </div>
+// </div>
diff --git a/staff/eduardo-sanchez/socialcode/app/src/views/components/Post.jsx b/staff/eduardo-sanchez/socialcode/app/src/views/components/Post.jsx
@@ -3,29 +3,37 @@ import Heading from '../../components/core/Heading'
 import Button from '../../components/core/Button'
 import Text from '../../components/core/Text'
 import Time from '../../components/core/Time'
+
 import View from '../../components/library/View'
+import Confirm from './Confirm'
 
 import logic from '../../logic'
+import { useState } from 'react'
 
 function Post({ post, onPostDeleted, onPostLikeToggled }) {
     console.log('Post -> render')
 
-    const handleDeletePost = () => {
-        if (confirm('Delete post?'))
-            try {
-                logic.deletePost(post.id)
-                    .then(() => onPostDeleted())
-                    .catch(error => {
-                        console.error(error)
-
-                        alert(error.message)
-                    })
-            } catch (error) {
-                console.error(error)
-
-                alert(error.message)
-            }
-    }
+    const [confirmDeleteVisible, setConfirmDeleteVisible] = useState(false)
+
+    const handleDeletePost = () => setConfirmDeleteVisible(true)
+
+
+    // const handleDeletePost = () => {
+    //     if (confirm('Delete post?'))
+    //         try {
+    //             logic.deletePost(post.id)
+    //                 .then(() => onPostDeleted())
+    //                 .catch(error => {
+    //                     console.error(error)
+
+    //                     alert(error.message)
+    //                 })
+    //         } catch (error) {
+    //             console.error(error)
+
+    //             alert(error.message)
+    //         }
+    // }
 
     const handleToggleLikePost = () => {
         try {
@@ -43,6 +51,25 @@ function Post({ post, onPostDeleted, onPostLikeToggled }) {
         }
     }
 
+    const handleDeletePostAccept = () => {
+        try {
+            logic.deletePost(post.id)
+                .then(() => onPostDeleted())
+                .catch(error => {
+                    console.error(error)
+
+                    alert(error.message)
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    const handleDeletePostCancel = () => setConfirmDeleteVisible(false)
+
+
     return <View className="Post" tag="article" align="">
         <View className="Post-Header">
             <Text className="Author">{post.author.username}</Text>
@@ -63,6 +90,8 @@ function Post({ post, onPostDeleted, onPostLikeToggled }) {
 
             {post.author.id === logic.getUserId() && <Button onClick={handleDeletePost}>Delete</Button>}
         </View>
+        {confirmDeleteVisible && <Confirm message="Delete this post?" onAccept={handleDeletePostAccept} onCancel={handleDeletePostCancel} />}
+
     </View >
 }