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/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 0000000..2d73a8a Binary files /dev/null and b/src/assets/27715574_MotionElements_subscribe-like-share_converted_667376-256x144-3s-q3.gif differ diff --git a/src/components/Article.jsx b/src/components/Article/Article.jsx similarity index 95% rename from src/components/Article.jsx rename to src/components/Article/Article.jsx index 7613648..73c88df 100644 --- a/src/components/Article.jsx +++ b/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
- + 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/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/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/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..75888c0 100644 --- a/src/components/Mainboard.jsx +++ b/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); } 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/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/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 a612126..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 { @@ -835,6 +840,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; 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 } });