Merge pull request #3 from wojnet/cleaning-up

Cleaning up

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

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"
 	}
 }

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>
 	);
 }

src/components/Article.jsx → src/components/Article/Article.jsx

@@ -2,13 +2,13 @@ import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { useState, useEffect } from "react";
 import axios from "axios";
-import { axiosJWT } from "../helpers/Helpers";
-import HeartIcon from "./HeartIcon";
+import { axiosJWT } from "../../helpers/Helpers";
+import ArticleHeartIcon from "./ArticleHeartIcon";
 import CommentsIcon from "./CommentsIcon";
-import UserSample from "../assets/userSample.png"
+import UserSample from "../../assets/userSample.png"
 import Comment from "./Comment";
 import OptionsList from "./OptionsList";
-import ImageGrid from "./ImageGrid";
+import ImageGrid from "../ImageGrid";
 
 const Article = ({ id, postVisibleName, utcDate, text, postUsername, images, profilePictureUrl, username, isMobile, grade, setImageWindowState, isLogged }) => {
 
@@ -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>
     );

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;

src/components/Comment.jsx → src/components/Article/Comment.jsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { useState } from "react";
-import { axiosJWT } from "../helpers/Helpers";
+import { axiosJWT } from "../../helpers/Helpers";
 import OptionsList from "./OptionsList";
 
 const Comment = ({ id, userId, text, date, profilePictureUrl, commentUsername, visibleName, username, loadComments, grade }) => {

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":

src/components/Credits.jsx

@@ -1,11 +1,27 @@
+import GIF from "../assets/27715574_MotionElements_subscribe-like-share_converted_667376-256x144-3s-q3.gif"
+
 const Credits = ({ username }) => {
+    const TextStyle = {
+        maxWidth: "400px",
+        textAlign: "center"
+    }
+
     return(
         <div className="Credits">
             <h1>HELLO {username.toUpperCase()}!</h1>
-            <p style={{ maxWidth: "400px", textAlign: "center" }}>Bangerify is a project by <a style={{ color: "var(--gradeCreator)" }} href="https://github.com/wojnet" target="_blank">@wojnet</a> - junior Front-End (hobbyist Back-End) Developer made with passion. It is updated almost everyday so bugs are being eliminated.</p>
-            <p style={{ maxWidth: "400px", textAlign: "center" }}>Big thanks to helping & motivating people: </p>
-            <p style={{ maxWidth: "400px", textAlign: "center" }}><b>My brother</b> <a style={{ color: "var(--gradeGigachad)" }} href="http://bangerify.com/profile/kachungus" target="_blank">@kachungus</a>, <a style={{ color: "var(--gradeHeadAdmin)" }} href="http://bangerify.com/profile/kn1ght" target="_blank">@kn1ght</a> (he made that wholesome cookie), and my IT teacher <b style={{ color: "var(--gradeMod)" }}>David</b>.</p>
-            <p>Wanna contact with me? <a style={{ marginLeft: "15px", color: "#000", boxShadow: "0 0 10px #0001" }} className="Button1" href="https://wojciechglid.netlify.app/" target="_blank">MY PORTFOLIO PAGE</a></p>
+            <img src={GIF} alt="funny gif" className="FunnyGif" />
+
+            <p style={TextStyle}>Bangerify is a social media application project made by passionate developer team:</p>
+
+            <p style={TextStyle}><a style={{ color: "var(--gradeCreator)", textDecoration: "underline", textDecorationStyle: "dotted", textUnderlineOffset: 4 }} href="https://github.com/wojnet" target="_blank">@wojnet</a> - Front-end & Back-end</p>
+
+            <p style={TextStyle}><a 
+                    style={{ color: "var(--gradeHeadadmin)", textDecoration: "underline", textDecorationStyle: "dotted", textUnderlineOffset: 4 }}
+                    href="https://github.com/dKasperek" target="_blank"
+                >@dKasperek</a> - iOS version</p>
+
+            {/* <p style={TextStyle}><b>My brother</b> <a style={{ color: "var(--gradeGigachad)" }} href="http://bangerify.com/profile/kachungus" target="_blank">@kachungus</a>, <a style={{ color: "var(--gradeHeadAdmin)" }} href="http://bangerify.com/profile/kn1ght" target="_blank">@kn1ght</a> (he made that wholesome cookie), and my IT teacher <b style={{ color: "var(--gradeMod)" }}>David</b>.</p> */}
+            <p>Wanna contact us? <a style={{ marginLeft: "15px", color: "#000", boxShadow: "0 0 10px #0001" }} className="Button1" href="https://wojciechglid.netlify.app/" target="_blank">WOJCIECH PORTFOLIO PAGE</a></p>
         </div>
     )
 }

src/components/Mainboard.jsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { axiosJWT } from "../helpers/Helpers";
-import Article from "./Article";
+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);
         }