From aa8324616bfb1fddd6b538d59d2045b372467a73 Mon Sep 17 00:00:00 2001 From: wojnet Date: Sun, 8 Oct 2023 10:49:15 +0200 Subject: [PATCH 1/2] testing branching --- ...e-share_converted_667376-256x144-3s-q3.gif | Bin 0 -> 6391 bytes src/components/{ => Article}/Article.jsx | 8 +++--- src/components/{ => Article}/Comment.jsx | 2 +- src/components/{ => Article}/CommentsIcon.jsx | 0 src/components/{ => Article}/OptionsList.jsx | 0 src/components/Credits.jsx | 24 +++++++++++++++--- src/components/Mainboard.jsx | 2 +- src/components/{ => Profile}/Bio.jsx | 2 +- src/components/{ => Profile}/Profile.jsx | 8 +++--- src/components/Wrapper.jsx | 2 +- src/index.css | 14 ++++++++++ 11 files changed, 46 insertions(+), 16 deletions(-) create mode 100644 src/assets/27715574_MotionElements_subscribe-like-share_converted_667376-256x144-3s-q3.gif rename src/components/{ => Article}/Article.jsx (97%) rename src/components/{ => Article}/Comment.jsx (98%) rename src/components/{ => Article}/CommentsIcon.jsx (100%) rename src/components/{ => Article}/OptionsList.jsx (100%) rename src/components/{ => Profile}/Bio.jsx (97%) rename src/components/{ => Profile}/Profile.jsx (98%) diff --git a/src/assets/27715574_MotionElements_subscribe-like-share_converted_667376-256x144-3s-q3.gif b/src/assets/27715574_MotionElements_subscribe-like-share_converted_667376-256x144-3s-q3.gif new file mode 100644 index 0000000000000000000000000000000000000000..2d73a8a7cb8924697b3468bfa830272c97f9efe9 GIT binary patch literal 6391 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 { diff --git a/src/components/Comment.jsx b/src/components/Article/Comment.jsx similarity index 98% rename from src/components/Comment.jsx rename to src/components/Article/Comment.jsx index ff663ea..3def23f 100644 --- a/src/components/Comment.jsx +++ b/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 }) => { diff --git a/src/components/CommentsIcon.jsx b/src/components/Article/CommentsIcon.jsx similarity index 100% rename from src/components/CommentsIcon.jsx rename to src/components/Article/CommentsIcon.jsx diff --git a/src/components/OptionsList.jsx b/src/components/Article/OptionsList.jsx similarity index 100% rename from src/components/OptionsList.jsx rename to src/components/Article/OptionsList.jsx diff --git a/src/components/Credits.jsx b/src/components/Credits.jsx index e4322c7..d11f3fb 100644 --- a/src/components/Credits.jsx +++ b/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(

HELLO {username.toUpperCase()}!

-

Bangerify is a project by @wojnet - junior Front-End (hobbyist Back-End) Developer made with passion. It is updated almost everyday so bugs are being eliminated.

-

Big thanks to helping & motivating people:

-

My brother @kachungus, @kn1ght (he made that wholesome cookie), and my IT teacher David.

-

Wanna contact with me? MY PORTFOLIO PAGE

+ funny gif + +

Bangerify is a social media application project made by passionate developer team:

+ +

@wojnet - Front-end & Back-end

+ +

@dKasperek - iOS version

+ + {/*

My brother @kachungus, @kn1ght (he made that wholesome cookie), and my IT teacher David.

*/} +

Wanna contact us? WOJCIECH PORTFOLIO PAGE

) } diff --git a/src/components/Mainboard.jsx b/src/components/Mainboard.jsx index 696f98b..4e419c6 100644 --- a/src/components/Mainboard.jsx +++ b/src/components/Mainboard.jsx @@ -1,7 +1,7 @@ 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"; diff --git a/src/components/Bio.jsx b/src/components/Profile/Bio.jsx similarity index 97% rename from src/components/Bio.jsx rename to src/components/Profile/Bio.jsx index 678faa5..cd70ea2 100644 --- a/src/components/Bio.jsx +++ b/src/components/Profile/Bio.jsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { axiosJWT } from "../helpers/Helpers"; +import { axiosJWT } from "../../helpers/Helpers"; import ReactMarkdown from "react-markdown"; const Bio = ({ isChangingBio, setIsChangingBio, bio, changedBio, setChangedBio }) => { diff --git a/src/components/Profile.jsx b/src/components/Profile/Profile.jsx similarity index 98% rename from src/components/Profile.jsx rename to src/components/Profile/Profile.jsx index f2edc9e..3a6185d 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile/Profile.jsx @@ -1,11 +1,11 @@ import { useState, useEffect } from "react"; import { useParams, useNavigate } from "react-router-dom"; import axios from "axios"; -import { axiosJWT } from "../helpers/Helpers"; -import Article from "./Article"; -import UserSample from "../assets/userSample.png" +import { axiosJWT } from "../../helpers/Helpers"; +import Article from "../Article/Article"; +import UserSample from "../../assets/userSample.png" import Bio from "./Bio"; -import { AWSUploadFile } from "../helpers/AWS"; +import { AWSUploadFile } from "../../helpers/AWS"; import { Helmet } from "react-helmet"; const Profile = ({ username, imageWindowState, setImageWindowState }) => { diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx index 6ab859a..bc8cba8 100644 --- a/src/components/Wrapper.jsx +++ b/src/components/Wrapper.jsx @@ -1,7 +1,7 @@ import { Routes, Route } from "react-router-dom"; import Mainboard from "./Mainboard"; import Authentication from "./Authentication"; -import Profile from "./Profile"; +import Profile from "./Profile/Profile"; import Credits from "./Credits" import BadUrl from "./BadUrl"; import { useEffect } from "react"; diff --git a/src/index.css b/src/index.css index a612126..657067f 100644 --- a/src/index.css +++ b/src/index.css @@ -835,6 +835,20 @@ input, textarea { align-self: center; } +.FunnyGif { + animation: FunnyGif 3s ease infinite; +} + +@keyframes FunnyGif { + 0% { + transform: scale(0.8); + } 50% { + transform: scale(1); + } 100% { + transform: scale(0.8); + } +} + @media only screen and (max-width: 600px) { .Article--Date { display: none; From fed9f89b1eaba20fa6f2059f4c40a4ff3ad20ecd Mon Sep 17 00:00:00 2001 From: wojnet Date: Mon, 9 Oct 2023 14:54:50 +0200 Subject: [PATCH 2/2] added debug window and made some redux code --- src/CHANGELOG.md => CHANGELOG.md | 5 ++ package-lock.json | 36 +++++++++- package.json | 4 +- src/App.jsx | 58 +++++++++------- src/components/Article/Article.jsx | 6 +- .../ArticleHeartIcon.jsx} | 6 +- src/components/Authentication.jsx | 8 +-- src/components/Mainboard.jsx | 18 +---- .../{Modal => Modals}/ConfirmEmail.jsx | 0 .../{Modal => Modals}/CookieAlert.jsx | 0 .../{Modal => Modals}/CreatePost.jsx | 0 .../{Modal => Modals}/ImageWindow.jsx | 0 .../{Modal => Modals}/ResendEmail.jsx | 0 src/components/Navbar.jsx | 23 +++---- src/components/NavbarMobile.jsx | 2 +- src/features/debugWindow/DebugWindow.jsx | 67 +++++++++++++++++++ src/features/debugWindow/addDebugLine.js | 0 src/features/debugWindow/debugWindowSlice.js | 24 +++++++ src/globalSlice.js | 22 ++++++ src/helpers/Helpers.js | 8 ++- src/index.css | 9 ++- src/index.js | 8 ++- src/settings/globalSettingsSlice.js | 18 +++++ src/store.js | 6 ++ 24 files changed, 255 insertions(+), 73 deletions(-) rename src/CHANGELOG.md => CHANGELOG.md (75%) rename src/components/{HeartIcon.jsx => Article/ArticleHeartIcon.jsx} (62%) rename src/components/{Modal => Modals}/ConfirmEmail.jsx (100%) rename src/components/{Modal => Modals}/CookieAlert.jsx (100%) rename src/components/{Modal => Modals}/CreatePost.jsx (100%) rename src/components/{Modal => Modals}/ImageWindow.jsx (100%) rename src/components/{Modal => Modals}/ResendEmail.jsx (100%) create mode 100644 src/features/debugWindow/DebugWindow.jsx create mode 100644 src/features/debugWindow/addDebugLine.js create mode 100644 src/features/debugWindow/debugWindowSlice.js create mode 100644 src/globalSlice.js create mode 100644 src/settings/globalSettingsSlice.js diff --git a/src/CHANGELOG.md b/CHANGELOG.md similarity index 75% rename from src/CHANGELOG.md rename to CHANGELOG.md index 6ec37f8..a0fd0d8 100644 --- a/src/CHANGELOG.md +++ b/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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b7ec76b..3c49f69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,13 +12,15 @@ "@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" }, "devDependencies": { "buffer": "^5.7.1", @@ -2114,6 +2116,15 @@ "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" }, + "node_modules/floating-window-ui": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/floating-window-ui/-/floating-window-ui-1.3.6.tgz", + "integrity": "sha512-uAnAPhYCJRUfoULVj2tiROIY9DelAjyVWsQ9pZ7fhh6lWzZlM3pPTOsndDrM5f15Ub+syRcVFid6PhougodkOw==", + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/follow-redirects": { "version": "1.15.2", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", @@ -4030,6 +4041,18 @@ "node": ">= 4" } }, + "node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/uvu": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz", @@ -5497,6 +5520,12 @@ "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" }, + "floating-window-ui": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/floating-window-ui/-/floating-window-ui-1.3.6.tgz", + "integrity": "sha512-uAnAPhYCJRUfoULVj2tiROIY9DelAjyVWsQ9pZ7fhh6lWzZlM3pPTOsndDrM5f15Ub+syRcVFid6PhougodkOw==", + "requires": {} + }, "follow-redirects": { "version": "1.15.2", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", @@ -6676,6 +6705,11 @@ "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==", "dev": true }, + "uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" + }, "uvu": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz", diff --git a/package.json b/package.json index f1ef28b..3bef359 100644 --- 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 index 936377e..d8122c9 100644 --- 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 ( - - -
+ +
- - Bangerify - - + + Bangerify + + - - + + - { !isMobile ? : } + { !isMobile ? : } - + - { !isMobile && } -
- - + { !isMobile && } +
+ ); } \ No newline at end of file diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index ad32297..73c88df 100644 --- 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
- + setIsCommentInputOpen(true)} />
@@ -185,7 +185,7 @@ const Article = ({ id, postVisibleName, utcDate, text, postUsername, images, pro } { comments } - {/* { commentsData.map((e, i) => ) } */} + {/* { commentsData.map((e, i) => ) } */} ); diff --git a/src/components/HeartIcon.jsx b/src/components/Article/ArticleHeartIcon.jsx similarity index 62% rename from src/components/HeartIcon.jsx rename to src/components/Article/ArticleHeartIcon.jsx index b29348b..9745a9c 100644 --- a/src/components/HeartIcon.jsx +++ b/src/components/Article/ArticleHeartIcon.jsx @@ -1,10 +1,10 @@ -const HeartIcon = ({ number, click, isLiked }) => { +const ArticleHeartIcon = ({ number, click, isLiked }) => { return( -
+
❤

{number}

); } -export default HeartIcon; \ No newline at end of file +export default ArticleHeartIcon; \ No newline at end of file diff --git a/src/components/Authentication.jsx b/src/components/Authentication.jsx index 6ae28ae..e38f375 100644 --- 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 index 4e419c6..75888c0 100644 --- 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 b/src/components/Modals/ConfirmEmail.jsx similarity index 100% rename from src/components/Modal/ConfirmEmail.jsx rename to src/components/Modals/ConfirmEmail.jsx diff --git a/src/components/Modal/CookieAlert.jsx b/src/components/Modals/CookieAlert.jsx similarity index 100% rename from src/components/Modal/CookieAlert.jsx rename to src/components/Modals/CookieAlert.jsx diff --git a/src/components/Modal/CreatePost.jsx b/src/components/Modals/CreatePost.jsx similarity index 100% rename from src/components/Modal/CreatePost.jsx rename to src/components/Modals/CreatePost.jsx diff --git a/src/components/Modal/ImageWindow.jsx b/src/components/Modals/ImageWindow.jsx similarity index 100% rename from src/components/Modal/ImageWindow.jsx rename to src/components/Modals/ImageWindow.jsx diff --git a/src/components/Modal/ResendEmail.jsx b/src/components/Modals/ResendEmail.jsx similarity index 100% rename from src/components/Modal/ResendEmail.jsx rename to src/components/Modals/ResendEmail.jsx diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index c84fee9..ffdb36c 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,6 +1,8 @@ -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"; @@ -8,12 +10,15 @@ 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 ); diff --git a/src/components/NavbarMobile.jsx b/src/components/NavbarMobile.jsx index 3ae4a34..9cea9db 100644 --- a/src/components/NavbarMobile.jsx +++ b/src/components/NavbarMobile.jsx @@ -59,7 +59,7 @@ const NavbarMobile = ({ isLogged, setIsLogged, updateIsLogged, path, setPath, us Credits { isLogged && handleLogout(updateIsLogged)} style={{ marginBottom: "20px" }}>Logout } { isLogged &&

Logged in as {username}

} -

© 2022 Bangerify. All rights reserved.

+

© 2023 Bangerify. All rights reserved.

diff --git a/src/features/debugWindow/DebugWindow.jsx b/src/features/debugWindow/DebugWindow.jsx new file mode 100644 index 0000000..0341fd6 --- /dev/null +++ b/src/features/debugWindow/DebugWindow.jsx @@ -0,0 +1,67 @@ +import Window from "floating-window-ui"; +import { useEffect } from "react"; +import { useRef } from "react"; +import { useSelector } from "react-redux"; + +const DebugWindow = () => { + const listElement = useRef(); + + const observer = new MutationObserver(function(mutations) { + listElement.current.scrollTop = listElement.current.scrollHeight; + }); + + const listStyle = { + height: "100%", + width: "90%", + display: "flex", + flexDirection: "column", + overflowY: "auto" + } + + const lines = useSelector((state) => state.debug.lines); + const linesElements = lines.map((e) =>

{e.name}

); + + const handleResize = () => { + alert(1); + } + + useEffect(() => { + observer.observe(listElement.current, { + attributes: true, + childList: true, + subtree: true + }); + + return () => { + observer.disconnect(); + } + }, []); + + return ( + +
    + { linesElements } +
+ + ); +} + +export default DebugWindow; \ No newline at end of file diff --git a/src/features/debugWindow/addDebugLine.js b/src/features/debugWindow/addDebugLine.js new file mode 100644 index 0000000..e69de29 diff --git a/src/features/debugWindow/debugWindowSlice.js b/src/features/debugWindow/debugWindowSlice.js new file mode 100644 index 0000000..c344e04 --- /dev/null +++ b/src/features/debugWindow/debugWindowSlice.js @@ -0,0 +1,24 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { v4 as uuidv4 } from "uuid"; + +const initialState = { + lines: [] +}; + +const debugWindowSlice = createSlice({ + name: "debug", + initialState, + reducers: { + addDebugLine: (state, action) => { + let { lines } = state; + lines.push({ + id: uuidv4(), + name: action.payload.name + }); + state = { ...state, lines }; + }, + } +}); + +export const { addDebugLine } = debugWindowSlice.actions; +export default debugWindowSlice.reducer; \ No newline at end of file diff --git a/src/globalSlice.js b/src/globalSlice.js new file mode 100644 index 0000000..b64860a --- /dev/null +++ b/src/globalSlice.js @@ -0,0 +1,22 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + isLogged: false, + username: "" +} + +const globalSlice = createSlice({ + name: "global", + initialState, + reducers: { + setIsLogged: (state, action) => { + state.isLogged = action.payload; + }, + setUsername: (state, action) => { + state.username = action.payload; + } + } +}); + +export const { setIsLogged, setUsername } = globalSlice.actions; +export default globalSlice.reducer; \ No newline at end of file diff --git a/src/helpers/Helpers.js b/src/helpers/Helpers.js index 090287c..a1edf8f 100644 --- a/src/helpers/Helpers.js +++ b/src/helpers/Helpers.js @@ -1,11 +1,15 @@ import axios from "axios"; +import { useDispatch } from "react-redux"; +import { addDebugLine } from "../features/debugWindow/debugWindowSlice"; -export async function refreshToken(_config) { +export async function refreshToken(config) { try { + const dispatch = useDispatch(); const res = await axios.post(`${process.env.BACKEND_URL}/api/token/refresh`, { token: localStorage.getItem("refreshToken") }); localStorage.setItem("accessToken", res.data.accessToken); localStorage.setItem("refreshToken", res.data.refreshToken); - _config.headers["authorization"] = "Bearer " + res.data.accessToken; + dispatch(addDebugLine({ name: "refreshed token?????" })); + config.headers["authorization"] = "Bearer " + res.data.accessToken; // return res.data; } catch(err) { diff --git a/src/index.css b/src/index.css index 657067f..731e250 100644 --- a/src/index.css +++ b/src/index.css @@ -579,7 +579,7 @@ input, textarea { vertical-align: middle; } -.HeartIcon { +.ArticleHeartIcon { margin-top: 15px; display: flex; gap: 10px; @@ -689,8 +689,13 @@ input, textarea { justify-content: center; gap: 7px; padding: 10px; - transition: left 500ms ease; z-index: 1000; + cursor: pointer; + transition: left 500ms ease, opacity 300ms ease; +} + +.Burger:hover { + opacity: 0.6; } .Burger > div { diff --git a/src/index.js b/src/index.js index 633ee02..24cbb77 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,12 @@ import * as ReactDOMClient from 'react-dom/client'; +import { Provider } from "react-redux"; +import store from "./store"; import { App } from "./App"; const root = ReactDOMClient.createRoot(document.querySelector("#root")); -root.render(); \ No newline at end of file +root.render( + + + +); \ No newline at end of file diff --git a/src/settings/globalSettingsSlice.js b/src/settings/globalSettingsSlice.js new file mode 100644 index 0000000..614d674 --- /dev/null +++ b/src/settings/globalSettingsSlice.js @@ -0,0 +1,18 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + isDebugWindowOpen: false +} + +const globalSettingsSlice = createSlice({ + name: "globalSettings", + initialState, + reducers: { + toggleDebugWindow: (state) => { + state.isDebugWindowOpen = !state.isDebugWindowOpen; + } + } +}); + +export const { toggleDebugWindow } = globalSettingsSlice.actions; +export default globalSettingsSlice.reducer; \ No newline at end of file diff --git a/src/store.js b/src/store.js index e2e456c..66112fb 100644 --- a/src/store.js +++ b/src/store.js @@ -1,8 +1,14 @@ import { configureStore } from "@reduxjs/toolkit"; +import globalSettingsReducer from "./settings/globalSettingsSlice"; +import globalReducer from "./globalSlice"; +import debugReducer from "./features/debugWindow/debugWindowSlice"; import postsReducer from "./features/posts/postsSlice"; const store = configureStore({ reducer: { + globalSettings: globalSettingsReducer, + global: globalReducer, + debug: debugReducer, posts: postsReducer } });