useSelectors to createSelectors

package.json

@@ -13,7 +13,6 @@
     "@testing-library/user-event": "^13.5.0",
     "array-move": "^4.0.0",
     "craco-plugin-scoped-css": "^1.1.1",
-    "node-sass": "^7.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-dropzone": "^14.2.2",
@@ -25,6 +24,7 @@
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.6",
+    "sass": "^1.53.0",
     "validator": "^13.7.0",
     "web-vitals": "^2.1.4"
   },

src/Components/Player/Player.jsx

@@ -21,14 +21,20 @@ import RepeatIcon from "../../assets/repeat_icon.svg";
 import VolumeUpIcon from "../../assets/volume_up_icon.svg";
 import VolumeStopIcon from "../../assets/volume_stop_icon.svg";
 import { secondsToHMS } from "../../utils";
+import { createSelector } from "reselect";
 
 const whiteFilter = `invert(100%) sepia(0%) saturate(7500%) hue-rotate(116deg)
 brightness(109%) contrast(109%)`;
 const darkFilter = `invert(48%) sepia(3%) saturate(4%) hue-rotate(326deg) brightness(110%) contrast(78%)`;
 
+const playerState = createSelector(
+    (store) => store.audio,
+    (audio) => audio
+);
+
 const Player = () => {
     const dispatch = useDispatch();
-    const state = useSelector((store) => store.audio);
+    const state = useSelector(playerState);
 
     const title = state.track
         ? state.track.id3.title ||

src/Components/ProfileData/ProfileData.jsx

@@ -22,16 +22,21 @@ import {
 } from "../../redux/actions/creators/audio";
 import { useEffect } from "react";
 import { actionGetProfileData } from "../../redux/actions/creators/profile";
-import { jwtDecode } from "../../utils/jwtDecoder";
 import { actionGetPlaylistsCount } from "../../redux/actions/creators/playlists";
+import { createSelector } from "reselect";
+
+const tracksState = createSelector((store) => store.tracks, tracks => tracks);
+const profileState = createSelector((store) => store.profile, profile => profile);
+const playlistsState = createSelector((store) => store.playlists, playlists => playlists);
 
 const ProfileData = ({ avatarChanging, buttonsVisible }) => {
     const dispatch = useDispatch();
-    const tracks = useSelector((store) => store.tracks);
-    const profile = useSelector((store) => store.profile);
-    const playlists = useSelector((store) => store.playlists);
     const navigate = useNavigate();
 
+    const tracks = useSelector(tracksState);
+    const profile = useSelector(profileState);
+    const playlists = useSelector(playlistsState);
+
     useEffect(() => {
         dispatch(actionGetProfileData());
         dispatch(actionGetTracksCount());

src/Components/SearchBar/SearchBar.jsx

@@ -9,6 +9,7 @@ import {
 } from "../../redux/actions/creators/tracks";
 import { removeAudioExtension } from "../../utils/regex";
 import { actionAddTrackToPlaylist } from "../../redux/actions/creators/playlists";
+import { createSelector } from "reselect";
 
 const theme = createTheme({
     palette: {
@@ -16,9 +17,14 @@ const theme = createTheme({
     },
 });
 
+const tracks = createSelector(
+    (store) => store.tracks,
+    (tracks) => tracks
+);
+
 const SearchBar = ({ playlistId }) => {
     const dispatch = useDispatch();
-    const state = useSelector((store) => store.tracks);
+    const state = useSelector(tracks);
     const [options, setOptions] = useState([]);
 
     const onOpenHandler = () => {

src/Components/Tab/Tab.jsx

@@ -1,14 +1,16 @@
-import React, { useState } from "react";
+import React from "react";
 import { history } from "../../utils/history";
-import './style.scoped.scss';
+import "./style.scoped.scss";
 
 const Tab = ({ label, icon, url }) => {
-    const [isActive, setIsActive] = useState(history.location.pathname === url);
+    const isActive = history.location.pathname === url;
 
     return (
         <div
             className="tab"
-            style={{ background: isActive ? "rgba(255, 255, 255, 0.1)" : "none" }}
+            style={{
+                background: isActive ? "rgba(255, 255, 255, 0.1)" : "none",
+            }}
         >
             <img className="image" src={icon} alt="icon" />
             <p className="text">{label}</p>

src/Components/Tab/style.js

@@ -1,31 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-    display: flex;
-    width: 99%;
-    margin: 0 0 5px -10px;
-    padding: 5px 0 5px 10px;
-    display: flex;
-    align-items: center;
-    transition: 0.2s;
-    border-radius: 0 3px 3px 0;
-    background: ${({ active }) =>
-        active ? "rgba(255, 255, 255, 0.1)" : "none"};
-
-    &:hover {
-        cursor: pointer;
-        background: rgba(255, 255, 255, 0.1);
-    }
-`;
-
-export const Text = styled.p`
-    font-size: 14px;
-    margin-left: 10px;
-`;
-
-export const Image = styled.img`
-    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(116deg)
-        brightness(109%) contrast(109%);
-    width: 20px;
-    height: 20px;
-`;

src/Pages/Home/styles.js

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-`;
-
-export const Main = styled.div`
-    display: flex;
-    flex-grow: 1;
-`;
-
-export const Content = styled.main`
-    width: 80%;
-`;

src/Pages/PlaylistItem/PlaylistItem.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import { createSelector } from "reselect";
 import {
     LeftBar,
     Player,
@@ -11,10 +12,15 @@ import {
 import { actionGetPlaylistById } from "../../redux/actions/creators/playlists";
 import "./style.scoped.scss";
 
+const currentPlaylist = createSelector(
+    (store) => store.playlists.currentPlaylist,
+    (currentPlaylist) => currentPlaylist
+);
+
 const PlaylistItem = () => {
     const { id } = useParams(); // playlistID
     const dispatch = useDispatch();
-    const playlist = useSelector((store) => store.playlists.currentPlaylist);
+    const playlist = useSelector(currentPlaylist);
 
     useEffect(() => {
         dispatch(actionGetPlaylistById(id));

src/Pages/Playlists/Playlists.jsx

@@ -14,11 +14,17 @@ import {
     actionGetPlaylists,
 } from "../../redux/actions/creators/playlists";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import { createSelector } from "reselect";
+
+const playlistsState = createSelector(
+    (store) => store.playlists,
+    (playlists) => playlists
+);
 
 const Playlists = () => {
     const navigate = useNavigate();
     const dispatch = useDispatch();
-    const state = useSelector((store) => store.playlists);
+    const state = useSelector(playlistsState);
 
     const [searchParams] = useSearchParams();
 

src/Pages/Playlists/styles.js

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-`;
-
-export const Main = styled.div`
-    display: flex;
-    flex-grow: 1;
-`;
-
-export const Content = styled.main`
-    width: 80%;
-`;

src/Pages/Profile/styles.js

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-`;
-
-export const Main = styled.div`
-    display: flex;
-    flex-grow: 1;
-`;
-
-export const Content = styled.main`
-    width: 80%;
-
-    button {
-        background: red;
-    }
-`;

src/Pages/Queue/Queue.jsx

@@ -31,7 +31,6 @@ const Queue = () => {
     const dispatch = useDispatch();
 
     const onSortEnd = ({ oldIndex, newIndex }) => {
-        // const
         dispatch(
             actionSetQueue({
                 ...queue,

src/Pages/Queue/styles.js

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-`;
-
-export const Main = styled.div`
-    display: flex;
-    flex-grow: 1;
-`;
-
-export const Content = styled.main`
-    width: 80%;
-`;

src/Pages/Register/Register.jsx

@@ -16,6 +16,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import MuiAlert from "@mui/material/Alert";
 import Snackbar from "@mui/material/Snackbar";
 import validator from "validator";
+import { createSelector } from "reselect";
 
 const theme = createTheme({
     palette: {
@@ -27,10 +28,15 @@ const Alert = React.forwardRef(function Alert(props, ref) {
     return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
 });
 
+const authState = createSelector(
+    (state) => state.auth,
+    (auth) => auth
+);
+
 const Register = () => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
-    const { status, authToken } = useSelector((state) => state.auth);
+    const { status, authToken } = useSelector(authState);
 
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");

src/Pages/Tracks/Tracks.jsx

@@ -23,11 +23,17 @@ import {
 } from "../../redux/actions/creators/tracks";
 import store from "../../redux/store";
 import { actionPlay, actionSetQueue } from "../../redux/actions/creators/audio";
+import { createSelector } from "reselect";
+
+const tracksState = createSelector(
+    (store) => store.tracks,
+    (tracks) => tracks
+);
 
 const Tracks = () => {
     const list = useRef(null);
     const dispatch = useDispatch();
-    const state = useSelector((store) => store.tracks);
+    const state = useSelector(tracksState);
 
     useEffect(() => {
         dispatch(actionGetTracksCount());

src/Pages/Tracks/styles.js

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-`;
-
-export const Main = styled.div`
-    display: flex;
-    flex-grow: 1;
-`;
-
-export const Content = styled.main`
-    width: 80%;
-`;

src/Pages/Upload/Upload.jsx

@@ -7,6 +7,7 @@ import {
     actionUploadOpen,
     actionUploadTracks,
 } from "../../redux/actions/creators/upload";
+import { createSelector } from "reselect";
 
 const baseStyle = {
     flex: 1,
@@ -39,10 +40,14 @@ const rejectStyle = {
     borderColor: "#ff1744",
 };
 
+const uploadState = createSelector(
+    (store) => store.upload,
+    (upload) => upload
+);
+
 const Upload = () => {
     const {
         acceptedFiles,
-        fileRejections,
         getRootProps,
         getInputProps,
         isFocused,
@@ -70,7 +75,7 @@ const Upload = () => {
     );
 
     const dispatch = useDispatch();
-    const state = useSelector((store) => store.upload);
+    const state = useSelector(uploadState);
 
     return (
         <div className="upload">