From 8db1d5879ada99b7ef23f9d128502adbadf778da Mon Sep 17 00:00:00 2001 From: Frank Date: Sun, 25 Aug 2024 01:05:35 +0800 Subject: [PATCH 1/3] fix: conflict --- src/App.css | 11 ++++++++++- src/components/MainContent.tsx | 29 ++++------------------------- src/pages/Dashboard.tsx | 2 +- src/pages/Profile.tsx | 28 ++++++++++++++++++++++++++++ src/pages/Settings.tsx | 32 ++++++++++++++++++++++++++++++++ 5 files changed, 75 insertions(+), 27 deletions(-) create mode 100644 src/pages/Profile.tsx create mode 100644 src/pages/Settings.tsx diff --git a/src/App.css b/src/App.css index bd6213e..cf68634 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,12 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); + +.outfit-font { + font-family: "Outfit", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} \ No newline at end of file diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx index 8056e11..459257b 100644 --- a/src/components/MainContent.tsx +++ b/src/components/MainContent.tsx @@ -1,38 +1,17 @@ import { useContentStore } from "../stores/useContentStore.ts"; -import { useProfileQuery } from "../api/user"; -import { useAuth } from "../context/AuthContext.tsx"; import { MainContent as MC } from "../data-objects/enum"; -import ReactCountryFlag from "react-country-flag"; +import Profile from "../pages/Profile.tsx"; +import Settings from "../pages/Settings.tsx"; const MainContent = () => { const { currentContent } = useContentStore(); - const { accessToken } = useAuth(); - const { data, isPending } = useProfileQuery(accessToken ?? ""); - const srcImage = "/assets/images/man.png"; return (
- {currentContent === MC.PROFILE && ( -
- {!isPending && data && ( -
- -
-

Profile

-

- {data?.display_name ?? "John Doe"} -

-

- {data?.followers?.total ?? 100} Followers -

- -
-
- )} -
- )} + {currentContent === MC.PROFILE && } + {currentContent === MC.SETTINGS && }
); }; diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 23203fa..fb08a03 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -6,7 +6,7 @@ import ExpandContent from "../components/ExpandContent.tsx"; const Dashboard = () => { return ( -
+
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx new file mode 100644 index 0000000..8ab6d90 --- /dev/null +++ b/src/pages/Profile.tsx @@ -0,0 +1,28 @@ +import ReactCountryFlag from "react-country-flag"; +import { useAuth } from "../context/AuthContext.tsx"; +import { useProfileQuery } from "../api/user"; + +const Profile = () => { + const { accessToken } = useAuth(); + const { data, isPending } = useProfileQuery(accessToken ?? ""); + const srcImage = "/assets/images/man.png"; + return ( +
+ {!isPending && data && ( +
+ +
+

Profile

+

+ {data?.display_name ?? "John Doe"} +

+

{data?.followers?.total ?? 100} Followers

+ +
+
+ )} +
+ ); +}; + +export default Profile; diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx new file mode 100644 index 0000000..89be71c --- /dev/null +++ b/src/pages/Settings.tsx @@ -0,0 +1,32 @@ +import SearchIcon from "@mui/icons-material/Search"; + +const Settings = () => { + return ( +
+
+

Settings

+ +
+
+

Language

+
+

+ Choose language - Changes will be applied after restarting the app +

+ +
+
+
+ ); +}; + +export default Settings; From ce7e5afe48e2b1e08eb895ea3c853b09a45a67d5 Mon Sep 17 00:00:00 2001 From: Frank Date: Sun, 25 Aug 2024 21:56:57 +0800 Subject: [PATCH 2/3] feat: settings --- src/App.css | 5 +- src/components/MainContent.tsx | 2 +- src/pages/Dashboard.tsx | 4 +- src/pages/Profile.tsx | 30 +++--- src/pages/Settings.tsx | 171 ++++++++++++++++++++++++++++-- src/pages/tests/Profile.test.tsx | 45 ++++++++ src/pages/tests/Settings.test.tsx | 45 ++++++++ 7 files changed, 268 insertions(+), 34 deletions(-) create mode 100644 src/pages/tests/Profile.test.tsx create mode 100644 src/pages/tests/Settings.test.tsx diff --git a/src/App.css b/src/App.css index cf68634..144946f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,8 @@ -@tailwind base; +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');@tailwind base; + @tailwind components; @tailwind utilities; -@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap'); - .outfit-font { font-family: "Outfit", sans-serif; font-optical-sizing: auto; diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx index 459257b..c8af596 100644 --- a/src/components/MainContent.tsx +++ b/src/components/MainContent.tsx @@ -8,7 +8,7 @@ const MainContent = () => { return (
{currentContent === MC.PROFILE && } {currentContent === MC.SETTINGS && } diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index fb08a03..81f3a7b 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -6,9 +6,9 @@ import ExpandContent from "../components/ExpandContent.tsx"; const Dashboard = () => { return ( -
+
-
+
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 8ab6d90..3455133 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,26 +1,22 @@ import ReactCountryFlag from "react-country-flag"; -import { useAuth } from "../context/AuthContext.tsx"; -import { useProfileQuery } from "../api/user"; const Profile = () => { - const { accessToken } = useAuth(); - const { data, isPending } = useProfileQuery(accessToken ?? ""); const srcImage = "/assets/images/man.png"; return ( -
- {!isPending && data && ( -
- -
-

Profile

-

- {data?.display_name ?? "John Doe"} -

-

{data?.followers?.total ?? 100} Followers

- -
+
+
+ +
+

Profile

+

John Doe

+

1K Followers

+
- )} +
); }; diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 89be71c..dd74506 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -2,28 +2,177 @@ import SearchIcon from "@mui/icons-material/Search"; const Settings = () => { return ( -
+
-

Settings

+

+ Settings +

-
+

Language

Choose language - Changes will be applied after restarting the app

+
+
+
+

Explicit Content

+
+

Allow playback of explicit-rated content

+ +
+
+
+

Autoplay

+
+

+ Enjoy nonstop listening. When your audio ends, we'll play you + something similar +

+ +
+
+
+

Audio Quality

+
+

Streaming quality

+ +
+
+

Download

+
+
+

+ Auto adjust quality - Recommended setting: On +

+ +
+
+

+ Normalize volume - Set the same volume level for all songs and + podcast s +

+ +
+
+

+ Volume level - Adjust the volume for your environment. Loud may{" "} + diminish audio quality. No effect on audio quality in Normal or + Quiet +

+ +
+
+
+

Your library

+
+

Show local files

+ +
+
+
+

Display

+
+
+

+ Show the now-playing panel on click of play +

+ +
+
+

Show announcements about new releases

+ +
+
+

+ Show desktop notifications when the song changes +

+ +
+
+

See what your friends are playing

+ +
+
+
+
+

Social

+
+
+

Publish my new playlists on my profile

+ +
+
+

Start a private session

+ +
+
+

Share my listening activity on Spotify

+ +
+
+

+ Show my recently played artists on my public profile +

+ +
+
+
+
+

Playback

+
+
+

Crossfade songs

+ +
+
+

+ Automix - Allow seamless transition between songs on select + playlists +

+ +
+
+

+ Mono audio - Makes left and right speakers play the same audio +

+ +
+
+

+ Show my recently played artists on my public profile +

+ +
+
); diff --git a/src/pages/tests/Profile.test.tsx b/src/pages/tests/Profile.test.tsx new file mode 100644 index 0000000..80748e3 --- /dev/null +++ b/src/pages/tests/Profile.test.tsx @@ -0,0 +1,45 @@ +import { render, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import { describe, it, expect } from "vitest"; +import { BrowserRouter } from "react-router-dom"; +import { AuthContext } from "../../context/AuthContext"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import Profile from "../Profile.tsx"; + +describe("Profile Component", () => { + const mockAuthContext = { + accessToken: "mockAccessToken", + login: async () => {}, + logout: () => {}, + refreshToken: "mockRefresh", + }; + const profileComponent = () => { + const queryClient = new QueryClient(); + render( + + + + + + + , + , + ); + }; + it("renders without crashing", () => { + profileComponent(); + expect(screen.getByTestId("profile-card-element")).toBeInTheDocument(); + }); + + it("contains a profile image", () => { + profileComponent(); + expect(screen.getByTestId("profile-img-element")).toBeInTheDocument(); + }); +}); diff --git a/src/pages/tests/Settings.test.tsx b/src/pages/tests/Settings.test.tsx new file mode 100644 index 0000000..85aec45 --- /dev/null +++ b/src/pages/tests/Settings.test.tsx @@ -0,0 +1,45 @@ +import { render, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import { describe, it, expect } from "vitest"; +import { BrowserRouter } from "react-router-dom"; +import { AuthContext } from "../../context/AuthContext"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import Settings from "../Settings.tsx"; + +describe("Settings Component", () => { + const mockAuthContext = { + accessToken: "mockAccessToken", + login: async () => {}, + logout: () => {}, + refreshToken: "mockRefresh", + }; + const settingsComponent = () => { + const queryClient = new QueryClient(); + render( + + + + + + + , + , + ); + }; + it("renders without crashing", () => { + settingsComponent(); + expect(screen.getByTestId("settings-element")).toBeInTheDocument(); + }); + + it("contains a profile image", () => { + settingsComponent(); + expect(screen.getByTestId("lanaguage-select-element")).toBeInTheDocument(); + }); +}); From 0ca5976278a74c47edf431d90bab58f513fe78fb Mon Sep 17 00:00:00 2001 From: Frank Date: Sun, 25 Aug 2024 22:01:40 +0800 Subject: [PATCH 3/3] fix: sonar cloud --- src/pages/Profile.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 3455133..6fbd4c5 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -6,6 +6,7 @@ const Profile = () => {