add dark mode, alert, confirm components b00tc4mp#68

NerinaHctz · Aug 8, 2024 · 677b4ba · 677b4ba
1 parent d5d7fe1
commit 677b4ba
Show file tree

Hide file tree

Showing 30 changed files with 472 additions and 398 deletions.
diff --git a/staff/nerina-castillo/ponies/app/.vite/deps/_metadata.json b/staff/nerina-castillo/ponies/app/.vite/deps/_metadata.json
@@ -0,0 +1,8 @@
+{
+  "hash": "5703c339",
+  "configHash": "22b1cf26",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "90f4ce25",
+  "optimized": {},
+  "chunks": {}
+}
diff --git a/staff/nerina-castillo/ponies/app/.vite/deps/package.json b/staff/nerina-castillo/ponies/app/.vite/deps/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/staff/nerina-castillo/ponies/app/index.html b/staff/nerina-castillo/ponies/app/index.html
@@ -5,11 +5,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Home</title>
+
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
-    <link rel="stylesheet" href="index.css">
 </head>
 
-<body>
+<body class="dark:bg-slate-800">
     <div id="root"></div>
 
 

diff --git a/staff/nerina-castillo/ponies/app/tailwind.config.js b/staff/nerina-castillo/ponies/app/tailwind.config.js
@@ -16,6 +16,7 @@ export default {
     },
   },
   plugins: [],
+  darkMode: 'selector'
 }
 
 
diff --git a/staff/nerina-castillo/ponies/app/view/App.jsx b/staff/nerina-castillo/ponies/app/view/App.jsx
@@ -1,16 +1,27 @@
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import { Context } from './context'
 
-import Login from './Login'
-import Register from './Register'
-import Home from './Home'
+import Login from './login'
+import Register from './register'
+import Home from './home'
+import Alert from './common/Alert'
 
 import logic from '../logic'
 
-const App = () => {
+export default function App() {
     console.debug('App -> call')
 
     const navigate = useNavigate()
 
+    const [theme, setTheme] = useState(localStorage.theme)
+    const [alertMessage, setAlertMessage] = useState(null)
+
+    useEffect(() => {
+        document.documentElement.className = theme
+        localStorage.theme = theme
+    }, [theme])
+
     const handleLogin = () => {
         console.debug('App -> handleLogin')
 
@@ -41,11 +52,15 @@ const App = () => {
         navigate('/login')
     }
 
-    return <Routes>
-        <Route path="/login" element={logic.isUserLoggedIn() ? <Navigate to="/" /> : <Login onLogin={handleLogin} onRegisterClick={handleRegisterClick} />} />
-        <Route path="/register" element={logic.isUserLoggedIn() ? <Navigate to="/" /> : <Register onRegister={handleRegister} onLoginClick={handleLoginClick} />} />
-        <Route path="/*" element={logic.isUserLoggedIn() ? <Home onLogout={handleLogout} /> : <Navigate to="/login" />} />
-    </Routes>
-}
+    const handleAlertAccept = () => setAlertMessage(null)
 
-export default App
+    return <Context.Provider value={{ theme, setTheme, alert: setAlertMessage }}>
+        <Routes>
+            <Route path="/login" element={logic.isUserLoggedIn() ? <Navigate to="/" /> : <Login onLogin={handleLogin} onRegisterClick={handleRegisterClick} />} />
+            <Route path="/register" element={logic.isUserLoggedIn() ? <Navigate to="/" /> : <Register onRegister={handleRegister} onLoginClick={handleLoginClick} />} />
+            <Route path="/*" element={logic.isUserLoggedIn() ? <Home onLogout={handleLogout} /> : <Navigate to="/login" />} />
+        </Routes>
+
+        {alertMessage && <Alert message={alertMessage} onAccept={handleAlertAccept} />}
+    </Context.Provider>
+}
diff --git a/staff/nerina-castillo/ponies/app/view/common/Alert.jsx b/staff/nerina-castillo/ponies/app/view/common/Alert.jsx
@@ -0,0 +1,17 @@
+import Button from '../library/Button'
+import Paragraph from '../library/Paragraph'
+import Container from '../library/Container'
+
+export default function Alert({ message, onAccept }) {
+    return <>
+        <Container className="fixed w-screen top-0 h-screen bg-black opacity-50">
+        </Container>
+
+        <Container className="fixed w-screen top-0 h-screen flex items-center justify-center">
+            <Container className="p-4 border bg-white dark:bg-black dark:text-white flex-col">
+                <Paragraph>{message}</Paragraph>
+                <Button onClick={onAccept}>Accept</Button>
+            </Container>
+        </Container>
+    </>
+}
diff --git a/staff/nerina-castillo/ponies/app/view/common/Confirm.jsx b/staff/nerina-castillo/ponies/app/view/common/Confirm.jsx
@@ -0,0 +1,18 @@
+import Button from '../library/Button'
+import Paragraph from '../library/Paragraph'
+import Container from '../library/Container'
+
+export default function Confirm({ message, onAccept, onCancel }) {
+    return <>
+        <Container className="fixed w-screen top-0 h-screen bg-black opacity-50">
+        </Container>
+
+        <Container className="fixed w-screen top-0 h-screen flex items-center justify-center">
+            <Container className="p-4 border bg-white dark:bg-black dark:text-white flex-col">
+                <Paragraph>{message}</Paragraph>
+                <Button onClick={onCancel}>Cancel</Button>
+                <Button onClick={onAccept}>Ok</Button>
+            </Container>
+        </Container>
+    </>
+}
diff --git a/staff/nerina-castillo/ponies/app/view/components/Paragraph.jsx b/staff/nerina-castillo/ponies/app/view/components/Paragraph.jsx
diff --git a/staff/nerina-castillo/ponies/app/view/context.js b/staff/nerina-castillo/ponies/app/view/context.js
@@ -0,0 +1,5 @@
+import { useContext as useReactContext, createContext } from "react"
+
+export const Context = createContext()
+
+export default function useContext() { return useReactContext(Context) }
diff --git a/staff/nerina-castillo/ponies/app/view/home/Avatar.jsx b/staff/nerina-castillo/ponies/app/view/home/Avatar.jsx
@@ -1,4 +1,4 @@
-import Image from "../components/Image";
+import Image from "../library/Image";
 
 export default function Avatar({ url }) {
     return <Image src={url} className="w-8 h-8 rounded-full clip-path-40" />

diff --git a/staff/nerina-castillo/ponies/app/view/home/CreatePost.jsx b/staff/nerina-castillo/ponies/app/view/home/CreatePost.jsx
@@ -1,14 +1,14 @@
 import logic from '../../logic'
 
-import Heading from '../components/Heading'
-import Form from '../components/Form'
-import Input from '../components/Input'
-import Label from '../components/Label'
-import Button from '../components/Button'
-import Container from '../components/Container'
+import Heading from '../library/Heading'
+import Form from '../library/Form'
+import Input from '../library/Input'
+import Label from '../library/Label'
+import Button from '../library/Button'
+import Container from '../library/Container'
 
 
-function CreatePost({ onPostCreated, onCancelCreatePost }) {
+export default function CreatePost({ onPostCreated, onCancelCreatePost }) {
     console.debug('CreatePost -> call')
 
     const handleCreatePostSubmit = event => {
@@ -45,7 +45,7 @@ function CreatePost({ onPostCreated, onCancelCreatePost }) {
         onCancelCreatePost()
     }
 
-    return <section className="fixed bottom-0 start-0 w-full bg-[white] px-[.5rem] box-border">
+    return <section className="fixed bottom-0 start-0 w-full bg-[white] px-[.5rem] box-border dark:bg-slate-800 dark:text-white">
         <Heading level="4">Create Post</Heading>
 
         <Form className={"Form"} onSubmit={handleCreatePostSubmit}>
@@ -65,5 +65,3 @@ function CreatePost({ onPostCreated, onCancelCreatePost }) {
         </Form>
     </section>
 }
-
-export default CreatePost
diff --git a/staff/nerina-castillo/ponies/app/view/home/Footer.jsx b/staff/nerina-castillo/ponies/app/view/home/Footer.jsx
@@ -2,10 +2,10 @@ import { useState } from 'react'
 
 import CreatePost from './CreatePost'
 
-import Button from '../components/Button'
+import Button from '../library/Button'
 
 
-const Footer = ({ onPostCreated }) => {
+export default function Footer({ onPostCreated }) {
     console.debug('Footer -> call')
 
     const [createPostVisible, setCreatePostVisible] = useState(false)
@@ -30,7 +30,7 @@ const Footer = ({ onPostCreated }) => {
     }
 
 
-    return <footer className="fixed bottom-0 start-0 w-full flex justify-center bg-[white] py-2 px-0 shadow-[0_4px_8px_rgba(0,0,0,0.2)] z-10">
+    return <footer className="fixed bottom-0 start-0 w-full flex justify-center bg-[white] py-2 px-0 shadow-[0_4px_8px_rgba(0,0,0,0.2)] z-10 dark:bg-slate-800">
         <Button className=" bg-gradient-to-r from-purple-600 to-cyan-400  text-[white] rounded-[5px] border-[none] shadow-[0_4px_8px_rgba(0,0,0,0.2)]  " onClick={handleCreatePostClick}>+</Button>
 
         {createPostVisible && <CreatePost
@@ -42,5 +42,3 @@ const Footer = ({ onPostCreated }) => {
 }
 
 
-
-export default Footer
diff --git a/staff/nerina-castillo/ponies/app/view/home/Header.jsx b/staff/nerina-castillo/ponies/app/view/home/Header.jsx
@@ -2,15 +2,19 @@ import logic from '../../logic'
 
 import { useState, useEffect } from 'react'
 
-import Button from '../components/Button'
-import Paragraph from '../components/Paragraph'
+import Button from '../library/Button'
+import Paragraph from '../library/Paragraph'
 
+import useContext from '../context'
 
-const Header = ({ onHomeClick, onPoniesClick, onFavsClick, onLogout }) => {
+
+export default function Header({ onHomeClick, onPoniesClick, onFavsClick, onLogout }) {
     console.debug('Header -> call')
 
     const [name, setName] = useState(null)
 
+    const { theme, setTheme } = useContext()
+
     useEffect(() => {
         console.debug('Header -> useEffect')
 
@@ -61,15 +65,16 @@ const Header = ({ onHomeClick, onPoniesClick, onFavsClick, onLogout }) => {
         }
     }
 
+    const handleSwitchTheme = () => setTheme(theme === 'dark' ? 'light' : 'dark')
 
-    return <header className="fixed start-0 top-0 w-full flex justify-around items-center  bg-[white] box-border shadow-[0_4px_8px_rgba(0,0,0,0.2)] py-2 px-0 z-10">
+
+    return <header className="fixed start-0 top-0 w-full flex justify-around items-center  bg-[white] box-border shadow-[0_4px_8px_rgba(0,0,0,0.2)] py-2 px-0 z-10 dark:bg-slate-800 dark:text-white">
         <Paragraph>Hello, {name}!</Paragraph>
         <Button onClick={handleHomeClick} >🏚️</Button>
         <Button onClick={handlePoniesClick} >Following</Button>
         <Button onClick={handleFavsClick} >💫</Button>
+        <Button onClick={handleSwitchTheme} >{theme === 'dark' ? '☀️' : '🌑'}</Button>
         <Button className={"bg-gradient-to-r from-purple-600 to-cyan-400  text-[white] rounded-[5px] border-[none] shadow-[0_4px_8px_rgba(0,0,0,0.2)] mr-px-[.5rem]"} onClick={handleLogout} >Logout</Button>
     </header>
 }
 
-
-export default Header
diff --git a/staff/nerina-castillo/ponies/app/view/home/Post.jsx b/staff/nerina-castillo/ponies/app/view/home/Post.jsx
@@ -4,40 +4,45 @@ import formatTime from '../../util/formatTime'
 
 import { useState } from 'react'
 
-import Button from '../components/Button'
-import Input from '../components/Input'
-import Label from '../components/Label'
-import Form from '../components/Form'
-import Time from '../components/Time'
-import Image from '../components/Image'
-import Paragraph from '../components/Paragraph'
-import Heading from '../components/Heading'
-import Container from '../components/Container'
+import Button from '../library/Button'
+import Input from '../library/Input'
+import Label from '../library/Label'
+import Form from '../library/Form'
+import Time from '../library/Time'
+import Image from '../library/Image'
+import Paragraph from '../library/Paragraph'
+import Heading from '../library/Heading'
+import Container from '../library/Container'
+import Confirm from '../common/Confirm'
 
 import Avatar from './Avatar'
 
-const Post = ({ post, onPostDeleted, onPostEdited, onPostFavToggled, onPostLikeToggled, onUserFollowToggled }) => {
+export default function Post({ post, onPostDeleted, onPostEdited, onPostFavToggled, onPostLikeToggled, onUserFollowToggled }) {
     console.debug('Post -> call')
 
     const [editPostVisible, setEditPostVisible] = useState(false)
+    const [confirmMessage, setConfirmMessage] = useState(null)
 
-    const handleDeletePostClick = () => {
-        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 handleDeletePostClick = () => setConfirmMessage('Delete Post?')
+
+    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 = () => setConfirmMessage(null)
+
     const handleEditPostClick = () => {
         console.debug('Post -> handleEditPost')
 
@@ -134,7 +139,7 @@ const Post = ({ post, onPostDeleted, onPostEdited, onPostFavToggled, onPostLikeT
         }
     }
 
-    return <article className="shadow-[1px_1px_10px_1px_rgba(0,0,0,0.2)]">
+    return <article className="shadow-[1px_1px_10px_1px_rgba(0,0,0,0.2)] dark:bg-slate-800">
         <Container className='flex px-0 justify-between m-[.5rem] items-center '>
             <Avatar url={post.author.avatar} />
 
@@ -145,7 +150,7 @@ const Post = ({ post, onPostDeleted, onPostEdited, onPostFavToggled, onPostLikeT
 
         <Image src={post.image} title={post.title} alt={post.alt} />
 
-        <Paragraph>{post.caption}</Paragraph>
+        <Paragraph className="dark:text-white">{post.caption}</Paragraph>
 
         <Container>
             <Button onClick={handleLikePostClick}>{(post.like ? '❤️' : '🤍') + ' ' + post.likes.length + ' like' + (post.likes.length === 1 ? '' : 's')}</Button>
@@ -167,9 +172,8 @@ const Post = ({ post, onPostDeleted, onPostEdited, onPostFavToggled, onPostLikeT
             <Button className={"bg-gradient-to-r from-purple-600 to-cyan-400  text-[white] rounded-[10px] border-[none] shadow-[0_4px_8px_rgba(0,0,0,0.2)] px-[.2rem] mt-[1rem] "} type={"button"} onClick={handleCancelEditPostClick} >Cancel</Button>
         </Form>}
 
+        {confirmMessage && <Confirm message={confirmMessage} onAccept={handleDeletePostAccept} onCancel={handleDeletePostCancel}></Confirm>}
     </article>
 
 }
 
-
-export default Post
diff --git a/staff/nerina-castillo/ponies/app/view/home/PostList.jsx b/staff/nerina-castillo/ponies/app/view/home/PostList.jsx
@@ -4,10 +4,10 @@ import { useSearchParams } from 'react-router-dom'
 import { useState, useEffect } from 'react'
 
 import Post from './Post'
-import Form from '../components/Form'
-import Label from '../components/Label'
-import Input from '../components/Input'
-import Button from '../components/Button'
+import Form from '../library/Form'
+import Label from '../library/Label'
+import Input from '../library/Input'
+import Button from '../library/Button'
 
 const PostList = ({ refreshStamp }) => {
     console.debug('PostList -> call')

diff --git a/staff/nerina-castillo/ponies/app/view/home/Search.jsx b/staff/nerina-castillo/ponies/app/view/home/Search.jsx
@@ -1,9 +1,9 @@
 import { useSearchParams } from 'react-router-dom'
 
-import Form from '../components/Form'
-import Label from '../components/Label'
-import Input from '../components/Input'
-import Button from '../components/Button'
+import Form from '../library/Form'
+import Label from '../library/Label'
+import Input from '../library/Input'
+import Button from '../library/Button'
 
 export default () => {
     const [searchParams, setSeachParams] = useSearchParams()