diff --git a/src/api/user.ts b/src/api/user.ts index 7bde006..b62139a 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -12,6 +12,11 @@ export const getUserAPI = async () => { return response.data; }; +export const getUserDetailedAPI = async () => { + const response = await axios.get("/user-service/user-detailed"); + return response.data; +}; + // POST export const loginAPI = async (email: string, password: string) => { diff --git a/src/components/AddNewDropdown/AddNewDropedown.tsx b/src/components/AddNewDropdown/AddNewDropdown.tsx similarity index 100% rename from src/components/AddNewDropdown/AddNewDropedown.tsx rename to src/components/AddNewDropdown/AddNewDropdown.tsx diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx index db0db94..0f38f40 100644 --- a/src/components/FileItem/FileItem.tsx +++ b/src/components/FileItem/FileItem.tsx @@ -176,7 +176,7 @@ const FileItem: React.FC = memo((props) => { "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[130px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white ", elementSelected || elementMultiSelected ? "border-[#3c85ee]" - : "border-[#ebe9f9]" + : "border-gray-third" )} onClick={fileClick} onContextMenu={onContextMenu} diff --git a/src/components/FolderItem/FolderItem.tsx b/src/components/FolderItem/FolderItem.tsx index 5f0ea35..1d7df3b 100644 --- a/src/components/FolderItem/FolderItem.tsx +++ b/src/components/FolderItem/FolderItem.tsx @@ -88,7 +88,7 @@ const FolderItem: React.FC = memo((props) => { return (
{ "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[130px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white", elementSelected || elementMultiSelected ? "border-[#3c85ee]" - : "border-[#ebe9f9]" + : "border-gray-third" )} onClick={quickItemClick} onContextMenu={onContextMenu} diff --git a/src/components/RightSection/RightSection.tsx b/src/components/RightSection/RightSection.tsx index 234251d..d3be7e2 100644 --- a/src/components/RightSection/RightSection.tsx +++ b/src/components/RightSection/RightSection.tsx @@ -80,7 +80,7 @@ const RightSection = memo(() => { return (
diff --git a/src/components/SettingsPage/SettingsPage.tsx b/src/components/SettingsPage/SettingsPage.tsx new file mode 100644 index 0000000..8585b6c --- /dev/null +++ b/src/components/SettingsPage/SettingsPage.tsx @@ -0,0 +1,105 @@ +import { useEffect, useState } from "react"; +import ChevronOutline from "../../icons/ChevronOutline"; +import Header from "../Header/Header"; +import classNames from "classnames"; +import AccountIcon from "../../icons/AccountIcon"; +import TuneIcon from "../../icons/TuneIcon"; +import { useNavigate } from "react-router-dom"; +import SettingsPageAccount from "./SettingsPageAccount"; +import { getUserDetailedAPI } from "../../api/user"; +import Spinner from "../Spinner/Spinner"; +import Swal from "sweetalert2"; +import SettingsPageGeneral from "./SettingsPageGeneral"; + +const SettingsPage = () => { + const [user, setUser] = useState(null); + const [tab, setTab] = useState("account"); + const navigate = useNavigate(); + + const goHome = () => { + window.location.assign("/home"); + }; + + const getUser = async () => { + try { + const userResponse = await getUserDetailedAPI(); + setUser(userResponse); + } catch (e) { + console.log("Loading user details error", e); + const result = await Swal.fire({ + title: "Error loading user account", + text: "There was an error loading your account, would you like to logout?", + icon: "warning", + showCancelButton: true, + confirmButtonColor: "#3085d6", + cancelButtonColor: "#d33", + confirmButtonText: "Yes, logout", + }); + if (result.value) { + } else { + navigate("/home"); + } + } + }; + + useEffect(() => { + getUser(); + }, []); + + if (!user) { + return ( +
+ +
+ ); + } + + return ( +
+
+
+
+ + +

HOME

+ +
+
setTab("account")} + > + +

Account

+
+
setTab("general")} + > + +

General

+
+
+
+
+ {tab === "account" && } + {tab === "general" && } +
+
+
+ ); +}; + +export default SettingsPage; diff --git a/src/components/SettingsPage/SettingsPageAccount.tsx b/src/components/SettingsPage/SettingsPageAccount.tsx new file mode 100644 index 0000000..6efb06e --- /dev/null +++ b/src/components/SettingsPage/SettingsPageAccount.tsx @@ -0,0 +1,44 @@ +import React from "react"; + +interface SettingsPageAccountProps { + user: { + _id: string; + email: string; + }; +} + +const SettingsPageAccount: React.FC = ({ user }) => { + return ( +
+
+

Account

+
+
+
+

Email

+

{user.email}

+
+
+

Change password

+

+ Change +

+
+
+

Logout account

+

+ Logout +

+
+
+

Logout all account

+

+ Logout all +

+
+
+
+ ); +}; + +export default SettingsPageAccount; diff --git a/src/components/SettingsPage/SettingsPageGeneral.tsx b/src/components/SettingsPage/SettingsPageGeneral.tsx new file mode 100644 index 0000000..91ae8d0 --- /dev/null +++ b/src/components/SettingsPage/SettingsPageGeneral.tsx @@ -0,0 +1,98 @@ +import { useEffect, useState } from "react"; + +const SettingsPageGeneral = () => { + const [listViewStyle, setListViewStyle] = useState("list"); + const [sortBy, setSortBy] = useState("date"); + const [orderBy, setOrderBy] = useState("descending"); + + const fileListStyleChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setListViewStyle(value); + if (value === "grid") { + window.localStorage.setItem("grid-mode", "true"); + } else { + window.localStorage.removeItem("grid-mode"); + } + }; + + const sortByChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSortBy(value); + if (value === "name") { + window.localStorage.setItem("sort-name", "true"); + } else { + window.localStorage.removeItem("sort-name"); + } + }; + + const orderByChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setOrderBy(value); + + if (value === "ascending") { + window.localStorage.setItem("order-asc", "true"); + } else { + window.localStorage.removeItem("order-asc"); + } + }; + + useEffect(() => { + const gridModeLocalStorage = window.localStorage.getItem("grid-mode"); + const gridModeEnabled = gridModeLocalStorage === "true"; + + const sortByLocalStorage = window.localStorage.getItem("sort-name"); + const sortByNameEnabled = sortByLocalStorage === "true"; + + const orderByLocalStorage = window.localStorage.getItem("order-asc"); + const orderByAscendingEnabled = orderByLocalStorage === "true"; + + setListViewStyle(gridModeEnabled ? "grid" : "list"); + setSortBy(sortByNameEnabled ? "name" : "date"); + setOrderBy(orderByAscendingEnabled ? "ascending" : "descending"); + }, []); + + return ( +
+
+

General settings

+
+
+
+

File list style

+ +
+
+

Sort by

+ +
+
+

Order by

+ +
+
+
+ ); +}; + +export default SettingsPageGeneral; diff --git a/src/icons/AccountIcon.tsx b/src/icons/AccountIcon.tsx new file mode 100644 index 0000000..1d3a976 --- /dev/null +++ b/src/icons/AccountIcon.tsx @@ -0,0 +1,15 @@ +type AccountIconType = React.SVGAttributes; + +const AccountIcon: React.FC = (props) => { + return ( + + account-box + + + ); +}; + +export default AccountIcon; diff --git a/src/icons/TuneIcon.tsx b/src/icons/TuneIcon.tsx new file mode 100644 index 0000000..c3b7bf8 --- /dev/null +++ b/src/icons/TuneIcon.tsx @@ -0,0 +1,15 @@ +type TuneIconType = React.SVGAttributes; + +const TuneIcon: React.FC = (props) => { + return ( + + tune + + + ); +}; + +export default TuneIcon; diff --git a/src/routers/AppRouter.jsx b/src/routers/AppRouter.jsx index dd20545..bd4ee69 100755 --- a/src/routers/AppRouter.jsx +++ b/src/routers/AppRouter.jsx @@ -16,6 +16,7 @@ import uuid from "uuid"; import ResetPasswordPage from "../components/ResetPasswordPage"; import SettingsPage from "../components/SettingsPage"; import Homepage from "../components/Homepage/Homepage"; +import SettingsPage2 from "../components/SettingsPage/SettingsPage"; // export const history = createHistory(); @@ -103,6 +104,15 @@ const AppRouter = () => { } /> } /> } /> + + + + } + /> ); diff --git a/tailwind.config.js b/tailwind.config.js index 61e4ea6..826e280 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,8 @@ module.exports = { "primary-hover": "#326bcc", "white-hover": "#f6f5fd", "gray-primary": "#637381", + "gray-secondary": "#e8eef2", + "gray-third": "#ebe9f9", }, }, screens: {