added debug window and made some redux code

wojnet · Oct 9, 2023 · fed9f89 · fed9f89
1 parent aa83246
commit fed9f89
Show file tree

Hide file tree

Showing 24 changed files with 255 additions and 73 deletions.
diff --git a/src/CHANGELOG.md → CHANGELOG.md b/src/CHANGELOG.md → CHANGELOG.md
@@ -15,3 +15,8 @@
 
 ## 02-04-2023#2
 - fixed bio images
+
+## 08-10-2023
+- fixed redirection after login
+- did first github actions yay
+- changed folder structure
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,12 +21,14 @@
 		"@reduxjs/toolkit": "^1.9.3",
 		"axios": "^1.2.1",
 		"cross-env": "^7.0.3",
+		"floating-window-ui": "^1.3.6",
 		"jwt-decode": "^3.1.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-helmet": "^6.1.0",
 		"react-markdown": "^8.0.4",
 		"react-redux": "^8.0.5",
-		"react-router-dom": "^6.5.0"
+		"react-router-dom": "^6.5.0",
+		"uuid": "^9.0.1"
 	}
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,19 +1,20 @@
 import { useState, useEffect } from "react";
 import { BrowserRouter } from "react-router-dom";
 import jwtDecode from "jwt-decode";
+import { useDispatch, useSelector } from "react-redux";
 import axios from "axios";
 import { refreshToken, axiosJWT } from "./helpers/Helpers";
-import store from "./store";
-import { Provider } from "react-redux";
 import Navbar from "./components/Navbar";
 import NavbarMobile from "./components/NavbarMobile";
 import Wrapper from "./components/Wrapper";
 import RightPanel from "./components/RightPanel"
 import { Helmet } from "react-helmet";
-import CookieAlert from "./components/Modal/CookieAlert";
-import ImageWindow from "./components/Modal/ImageWindow";
+import CookieAlert from "./components/Modals/CookieAlert";
+import ImageWindow from "./components/Modals/ImageWindow";
+import { addDebugLine } from "./features/debugWindow/debugWindowSlice";
 
 export const App = () => {
+	const dispatch = useDispatch();
 
 	// MOBILE STYLE CONFIG
 	const navbarThreshold = 800;
@@ -23,6 +24,7 @@ export const App = () => {
 	const [isCreatePostOpen, setIsCreatePostOpen] = useState(false);
 	const [imageWindowState, setImageWindowState] = useState({ isOpen: false, images: [], index: 0 });
 	const [isCookiesModalOpen, setIsCookiesModalOpen] = useState(false);
+
 
 	// POSTS
 	const [isLogged, setIsLogged] = useState(false);
@@ -54,34 +56,42 @@ export const App = () => {
 	}
 
 	const updateIsLogged = () => {
-		if (localStorage.getItem("accessToken")) {
+		dispatch(addDebugLine({ name: "- updateIsLogged()" }));
+		if (localStorage.getItem("accessToken") && !isLogged) {
 			axios.get(`${process.env.BACKEND_URL}/api/auth/isLogged`, { //! IT WAS AXIOSJWT PREVIOUSLY THEN AXIOS AND NOW AXIOSJWT AGAIN
 				headers: { authorization: "Bearer " + localStorage.getItem("accessToken") }
 			})
 			.then(res => {
 				setIsLogged(res.data.isLogged);
 				setUsername(res.data.username);
+				dispatch(addDebugLine({ name: `Logged in as ${res.data.username}` }));
 			})
 			.catch(err => console.log(err));
-		} else {
+		} else if (isLogged) {
 			localStorage.setItem("accessToken", "");
 			localStorage.setItem("refreshToken", "");
 			setIsLogged(false);
 			setUsername("");
+			dispatch(addDebugLine({ name: "Logged out" }));
 		}	
 	}
 
 	const allowCookies = () => {
-		console.log("ALLOWED COOKIES");
 		document.cookie = "cookiesAllowed=1";
         document.cookie = "theme=0";
 	}
 
+	const onWindowResize = () => {
+		setIsMobile(window.innerWidth > navbarThreshold ? false : true);
+	}
+
 	useEffect(() => {
 		updateIsLogged();
-		window.addEventListener("resize", () => {
-			setIsMobile(window.innerWidth > navbarThreshold ? false : true);
-		});
+		window.addEventListener("resize", onWindowResize);
+
+		return () => {
+			window.removeEventListener("resize", onWindowResize);
+		}
 	}, []);
 
 	axiosJWT.interceptors.request.use(async (config) => {
@@ -102,25 +112,23 @@ export const App = () => {
 	}, err => Promise.reject(err));
 
 	return (
-		<Provider store={store}>
-			<BrowserRouter>
-				<div className="App">
+		<BrowserRouter>
+			<div className="App">
 
-					<Helmet>
-						<title>Bangerify</title>
-						<meta name="description" content="React application" />
-					</Helmet>
+				<Helmet>
+					<title>Bangerify</title>
+					<meta name="description" content="React application" />
+				</Helmet>
 
-					<CookieAlert isModalOpen={isCookiesModalOpen} setIsModalOpen={setIsCookiesModalOpen} allowCookies={allowCookies} />
-					<ImageWindow imageWindowState={imageWindowState} setImageWindowState={setImageWindowState} />
+				<CookieAlert isModalOpen={isCookiesModalOpen} setIsModalOpen={setIsCookiesModalOpen} allowCookies={allowCookies} />
+				<ImageWindow imageWindowState={imageWindowState} setImageWindowState={setImageWindowState} />
 
-					{ !isMobile ? <Navbar isLogged={isLogged} setIsLogged={setIsLogged} updateIsLogged={updateIsLogged} path={path} setPath={setPath} username={username} theme={theme} setTheme={setTheme} /> : <NavbarMobile isLogged={isLogged} setIsLogged={setIsLogged} updateIsLogged={updateIsLogged} path={path} setPath={setPath} username={username} theme={theme} setTheme={setTheme} /> }
+				{ !isMobile ? <Navbar isLogged={isLogged} setIsLogged={setIsLogged} updateIsLogged={updateIsLogged} path={path} setPath={setPath} username={username} theme={theme} setTheme={setTheme} /> : <NavbarMobile isLogged={isLogged} setIsLogged={setIsLogged} updateIsLogged={updateIsLogged} path={path} setPath={setPath} username={username} theme={theme} setTheme={setTheme} /> }
 
-					<Wrapper path={path} setPath={setPath} isLogged={isLogged} loadedPosts={loadedPosts} setLoadedPosts={setLoadedPosts} username={username} isCreatePostOpen={isCreatePostOpen} setIsCreatePostOpen={setIsCreatePostOpen} imageWindowState={imageWindowState} setImageWindowState={setImageWindowState} postOrder={postOrder} setPostOrder={setPostOrder} mostLikedPosts={mostLikedPosts} setMostLikedPosts={setMostLikedPosts} />
+				<Wrapper path={path} setPath={setPath} isLogged={isLogged} loadedPosts={loadedPosts} setLoadedPosts={setLoadedPosts} username={username} isCreatePostOpen={isCreatePostOpen} setIsCreatePostOpen={setIsCreatePostOpen} imageWindowState={imageWindowState} setImageWindowState={setImageWindowState} postOrder={postOrder} setPostOrder={setPostOrder} mostLikedPosts={mostLikedPosts} setMostLikedPosts={setMostLikedPosts} />
 
-					{ !isMobile && <RightPanel /> }
-				</div>
-			</BrowserRouter>
-		</Provider>
+				{ !isMobile && <RightPanel /> }
+			</div>
+		</BrowserRouter>
 	);
 }
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
@@ -3,7 +3,7 @@ import ReactMarkdown from "react-markdown";
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { axiosJWT } from "../../helpers/Helpers";
-import HeartIcon from "../HeartIcon";
+import ArticleHeartIcon from "./ArticleHeartIcon";
 import CommentsIcon from "./CommentsIcon";
 import UserSample from "../../assets/userSample.png"
 import Comment from "./Comment";
@@ -174,7 +174,7 @@ const Article = ({ id, postVisibleName, utcDate, text, postUsername, images, pro
 
 
             <section className="Article--Numbers">
-                <HeartIcon number={likes + addedLikes} click={like} isLiked={isLiked} />
+                <ArticleHeartIcon number={likes + addedLikes} click={like} isLiked={isLiked} />
                 <CommentsIcon number={commentsData.length} click={() => setIsCommentInputOpen(true)} />
             </section>
 
@@ -185,7 +185,7 @@ const Article = ({ id, postVisibleName, utcDate, text, postUsername, images, pro
             </section> }
 
             { comments }
-            {/* { commentsData.map((e, i) => <HeartIcon />) } */}
+            {/* { commentsData.map((e, i) => <ArticleHeartIcon />) } */}
 
         </article>
     );

diff --git a/src/components/HeartIcon.jsx → src/components/Article/ArticleHeartIcon.jsx b/src/components/HeartIcon.jsx → src/components/Article/ArticleHeartIcon.jsx
@@ -1,10 +1,10 @@
-const HeartIcon = ({ number, click, isLiked }) => {
+const ArticleHeartIcon = ({ number, click, isLiked }) => {
     return(
-        <div style={{ WebkitUserSelect: "none", msUserSelect: "none", userSelect: "none" }} className="HeartIcon" onClick={click}>
+        <div style={{ WebkitUserSelect: "none", msUserSelect: "none", userSelect: "none" }} className="ArticleHeartIcon" onClick={click}>
             <span style={{ color: isLiked ? `var(--heartColor)` : "var(--gray)", pointerEvents: "none" }}>❤</span>
             <p style={{ pointerEvents: "none" }}>{number}</p>
         </div>
     );
 }
 
-export default HeartIcon;
+export default ArticleHeartIcon;
diff --git a/src/components/Authentication.jsx b/src/components/Authentication.jsx
@@ -1,9 +1,8 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
-import { axiosJWT } from "../helpers/Helpers";
-import ConfirmEmail from "./Modal/ConfirmEmail";
-import ResendEmail from "./Modal/ResendEmail";
+import ConfirmEmail from "./Modals/ConfirmEmail";
+import ResendEmail from "./Modals/ResendEmail";
 import TinyLogo from "../assets/tinyLogo.png"
 
 const Authentication = () => {
@@ -31,7 +30,8 @@ const Authentication = () => {
                         const refreshToken = res.data.refreshToken;
                         localStorage.setItem("accessToken", accessToken);
                         localStorage.setItem("refreshToken", refreshToken);;
-                        navigate("/");
+                        // navigate("/"); PREVIOUS
+                        navigate(-1);
                     } else {
                         switch(res.data.type) {
                             case "wrong username":

diff --git a/src/components/Mainboard.jsx b/src/components/Mainboard.jsx
@@ -4,7 +4,7 @@ import { axiosJWT } from "../helpers/Helpers";
 import Article from "./Article/Article";
 import Semaphore from "../helpers/Semaphore";
 // import UpperBar from "./UpperBar";
-import CreatePost from "./Modal/CreatePost";
+import CreatePost from "./Modals/CreatePost";
 import Cat from "../assets/cat.png";
 
 const Mainboard = ({ isLogged, loadedPosts, setLoadedPosts, username, isCreatePostOpen, setIsCreatePostOpen, imageWindowState, setImageWindowState, postOrder, setPostOrder, mostLikedPosts, setMostLikedPosts }) => {
@@ -54,9 +54,6 @@ const Mainboard = ({ isLogged, loadedPosts, setLoadedPosts, username, isCreatePo
                     result = mostLikedPosts.posts;
                 }
 
-                // console.log(mostLikedPosts.index);
-                // console.log(result.slice(mostLikedPosts.index, mostLikedPosts.index + 20 < result.length ? mostLikedPosts.index + 20 : result.length - 1));
-
                 await axios.post(`${process.env.BACKEND_URL}/api/getPostsById`, { list: result.slice(mostLikedPosts.index, mostLikedPosts.index + 20 < result.length ? mostLikedPosts.index + 20 : result.length - 1) })
                     .then(res => {
                         if (mostLikedPosts.index + 20 >= result.length) {
@@ -109,30 +106,17 @@ const Mainboard = ({ isLogged, loadedPosts, setLoadedPosts, username, isCreatePo
         }
     }
 
-    const wait = async (ms) => {
-		const message = await axios.get(`${process.env.BACKEND_URL}/api/test/wait/${ms}`)
-            .then(res => res.data)
-            .catch(err => console.error(err));
-        console.log(message);
-	}
-
 	useEffect(() => {
 		resetLoadedPosts();
 	}, [postOrder]);
 
 
     useEffect(() => {
-        console.log("M A I N B O A R D");
         const scrollEventListener = window.addEventListener("scroll", (e) => {
             e.preventDefault();
             handlePostLoading()();
         });
 
-        semaphore.executeIfPossible(wait, 1000);
-        semaphore.executeIfPossible(wait, 1000);
-        semaphore.executeIfPossible(wait, 1000);
-        semaphore.executeIfPossible(wait, 1000);
-
         return () => {
             window.removeEventListener("scroll", scrollEventListener);
         }

diff --git a/src/components/Modal/ConfirmEmail.jsx → src/components/Modals/ConfirmEmail.jsx b/src/components/Modal/ConfirmEmail.jsx → src/components/Modals/ConfirmEmail.jsx
diff --git a/src/components/Modal/CookieAlert.jsx → src/components/Modals/CookieAlert.jsx b/src/components/Modal/CookieAlert.jsx → src/components/Modals/CookieAlert.jsx
diff --git a/src/components/Modal/CreatePost.jsx → src/components/Modals/CreatePost.jsx b/src/components/Modal/CreatePost.jsx → src/components/Modals/CreatePost.jsx
diff --git a/src/components/Modal/ImageWindow.jsx → src/components/Modals/ImageWindow.jsx b/src/components/Modal/ImageWindow.jsx → src/components/Modals/ImageWindow.jsx
diff --git a/src/components/Modal/ResendEmail.jsx → src/components/Modals/ResendEmail.jsx b/src/components/Modal/ResendEmail.jsx → src/components/Modals/ResendEmail.jsx
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,19 +1,24 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
-import { axiosJWT } from "../helpers/Helpers";
+import { useDispatch, useSelector } from "react-redux";
+import { toggleDebugWindow } from "../settings/globalSettingsSlice";
+import DebugWindow from "../features/debugWindow/DebugWindow";
 import Logo from "../assets/bangerifyLogo.svg";
 import LogoWhite from "../assets/bangerifyLogoWhite.svg";
 import handleLogout from "../helpers/Logout";
 
 const Navbar = ({ isLogged, setIsLogged, updateIsLogged, path, setPath, username, theme, setTheme, updateTheme }) => {
 
     const location = useLocation();
+    const dispatch = useDispatch();
+    const isDebugWindowOpen = useSelector((state) => state.globalSettings.isDebugWindowOpen);
 
     const updatePathState = () => {
         setPath(location.pathname);
     }
 
     useEffect(updatePathState, []);
+
     useEffect(() => {
         updatePathState();
         updateIsLogged();
@@ -29,25 +34,17 @@ const Navbar = ({ isLogged, setIsLogged, updateIsLogged, path, setPath, username
         <nav className="Navbar">
             <img src={theme ? LogoWhite : Logo} className="Navbar--Logo" alt="Bangerify logo" />
             <ul>
-                <Link to="/" style={ path === "/" ? selectedStyle : {} } onClick={() => {
-                    if (path === "/") {
-                        window.location.reload();
-                    }
-                }}>Mainboard</Link>
+                <Link to="/" style={ path === "/" ? selectedStyle : {} }>Mainboard</Link>
                 { isLogged && <a href={`/profile/${username}`} style={ path === "/profile/"+username ? selectedStyle : {} }>Profile</a> }
                 { !isLogged && <Link to="/authenticate" style={ path === "/authenticate" ? selectedStyle : {} }>Login</Link> }
 
-                {/* <img style={{ width: "25px", marginTop: "20px", cursor: "pointer" }} src={theme ? Moon : Sun} alt="Theme change button" onClick={() => {
-                    setTheme(prev => !prev);
-                    updateTheme();
-                }} /> */}
-
             </ul>
+            { isDebugWindowOpen && <DebugWindow /> }
             <div className="Navbar--Bottom">
                 <Link to="/credits" style={ path === "/credits" ? selectedStyle : {} }>Credits</Link>
                 { isLogged && <Link to="/" onClick={() => handleLogout(updateIsLogged)} style={{ marginBottom: "20px" }}>Logout</Link> }
                 { isLogged && <p>Logged in as {username}</p> }
-                <p>© 2022 Bangerify. All rights reserved.</p>
+                <p style={{ userSelect: "none", cursor: "pointer" }} onClick={() => dispatch(toggleDebugWindow())}>© 2023 Bangerify. All rights reserved.</p>
             </div>
         </nav>
     );