Events-No-Redux

.github/workflows/main.yml

@@ -6,6 +6,7 @@ jobs:
   deploy:
     name: Deploy app
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v2
       - uses: superfly/flyctl-actions/setup-flyctl@master

Dockerfile

@@ -1,5 +1,5 @@
 # base node image
-FROM node:16-bullseye-slim as base
+FROM node:18-bullseye-slim as base
 
 # Install openssl for Prisma
 RUN apt-get update && apt-get install -y openssl

app/components/AccountModal.tsx

@@ -1,8 +1,6 @@
 import { z } from 'zod'
 import Box from '@mui/material/Box'
-import type { ChangeEvent } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import type { BoxProps } from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import Button from '@mui/material/Button'
 import Avatar from '@mui/material/Avatar'
@@ -27,6 +25,10 @@ import { useApp } from '~/hooks/useApp'
 import TextIcon from '~/components/TextIcon'
 import useFileUpload from '~/hooks/useFileUpload'
 import HeaderTitle from '~/components/HeaderTitle'
+
+import type { ChangeEvent } from 'react'
+import type { BoxProps } from '@mui/material/Box'
+
 import type { ResourceType } from '~/services/s3.server'
 import type { BoxStyles, SessionAccount } from '~/interfaces/types'
 
@@ -58,6 +60,8 @@ export const ProfileSchema = z.object({
     .nullable(),
 })
 
+type Profile = z.infer<typeof ProfileSchema>
+
 export const PasswordSchema = z
   .object({
     password: z
@@ -116,7 +120,7 @@ function Edit({ account, handleClose }: EditProps) {
   })
 
   const handleUpdateProfile = useCallback(
-    (data) => {
+    (data: any) => {
       if (!profileFetcher) return
 
       const values = ProfileSchema.parse(data)
@@ -137,7 +141,7 @@ function Edit({ account, handleClose }: EditProps) {
   )
 
   const handleUpdatePassword = useCallback(
-    (data) => {
+    (data: any) => {
       if (!passwordFetcher) return
 
       const values = PasswordSchema.parse(data)
@@ -412,8 +416,8 @@ export default function AccountModal() {
     }
   }, [avatarFetcher, filePath, isUploaded])
 
-  const handleWantToEdit = () => setWantToEdit(true)
-  const handleStopEditing = () => setWantToEdit(false)
+  const handleWantToEdit = useCallback(() => setWantToEdit(true), [])
+  const handleStopEditing = useCallback(() => setWantToEdit(false), [])
 
   const handleSelectAvatar = useCallback(() => {
     inputref.current?.click()

app/components/AlbumThumbnail.tsx

@@ -1,14 +1,14 @@
 import Box from '@mui/material/Box'
 import { Link } from '@remix-run/react'
-import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
 import type { BoxProps } from '@mui/material/Box'
 import { PauseCircleOutline, PlayCircleOutline } from '@mui/icons-material'
 
-import { PhotonImage } from './PhotonImage'
 import colors from '../utils/colors'
 import AppRoutes from '~/app-routes'
-import type AppStateInterface from '~/interfaces/AppStateInterface'
+import { PhotonImage } from './PhotonImage'
+import { usePlayer } from '~/hooks/usePlayer'
+
 import type { AlbumThumbnailData, BoxStyles } from '~/interfaces/types'
 
 const styles: BoxStyles = {
@@ -71,9 +71,9 @@ type Props = {
 }
 
 function AlbumThumbnail({ album, sx }: Props) {
-  const { isPlaying, list: playyingList } = useSelector(
-    ({ player }: AppStateInterface) => player
-  )
+  const {
+    playerState: { isPlaying, list: playyingList },
+  } = usePlayer()
 
   return (
     <Box>
@@ -110,7 +110,7 @@ function AlbumThumbnail({ album, sx }: Props) {
       <Box component="h3" sx={styles.title}>
         {album.title}
       </Box>
-      <Box component="p" sx={styles.details}>
+      <Box sx={styles.details}>
         <Link
           prefetch="intent"
           to={AppRoutes.artist.detailPage(album.artist.hash)}

app/components/AlbumTracksTable.tsx

@@ -1,21 +1,44 @@
 import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
 import Table from '@mui/material/Table'
+import { Link } from '@remix-run/react'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 
 import colors from '../utils/colors'
-import { useSelector } from 'react-redux'
-import type AppStateInterface from '../interfaces/AppStateInterface'
-import { makeSoundFromTrack } from '../utils/helpers'
-import type ListInterface from '../interfaces/ListInterface'
-import type { AlbumDetail, BoxStyles } from '~/interfaces/types'
+import { makeSoundFromTrack } from '~/utils/helpers'
+import type { AlbumDetail, BoxStyles, ListInterface } from '~/interfaces/types'
 import theme from '~/mui/theme'
 import PlayPause from './PlayPause'
 import AppRoutes from '~/app-routes'
-import { Link } from '@remix-run/react'
-import { withStyles } from '@mui/styles'
+import { usePlayer } from '~/hooks/usePlayer'
+
+const PREFIX = 'StyledTableCell'
+
+const classes = {
+  head: `${PREFIX}-head`,
+  body: `${PREFIX}-body`,
+}
+
+const StyledTable = styled(Table)(({ theme }) => ({
+  [`& .${classes.head}`]: {
+    color: colors.grey,
+    textTransform: 'uppercase',
+    textAlign: 'left',
+    paddingLeft: 0,
+  },
+
+  [`& .${classes.body}`]: {
+    fontSize: 14,
+    color: colors.white,
+    border: 'none',
+    paddingLeft: 1,
+    paddingRight: 1,
+    textOverflow: 'ellipsis',
+  },
+}))
 
 const styles: BoxStyles = {
   table: {
@@ -30,43 +53,79 @@ const styles: BoxStyles = {
   },
 }
 
-export const StyledTableCell = withStyles((theme) => ({
-  head: {
+export const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`& .${classes.head}`]: {
     color: colors.grey,
     textTransform: 'uppercase',
     textAlign: 'left',
     paddingLeft: 0,
   },
-  body: {
+
+  [`& .${classes.body}`]: {
     fontSize: 14,
     color: colors.white,
     border: 'none',
     paddingLeft: 1,
     paddingRight: 1,
     textOverflow: 'ellipsis',
   },
-}))(TableCell)
+}))
 
 type Props = {
   album: NonNullable<AlbumDetail>
   list: ListInterface
 }
 
 export default function AlbumTracksTable({ album, list }: Props) {
-  const { currentSound } = useSelector(
-    (appState: AppStateInterface) => appState.player
-  )
+  const {
+    playerState: { currentSound },
+  } = usePlayer()
 
   return (
-    <Table sx={styles.table} size="small">
+    <StyledTable sx={styles.table} size="small">
       <TableHead>
         <TableRow>
-          <StyledTableCell>#</StyledTableCell>
-          <StyledTableCell>&nbsp;</StyledTableCell>
-          <StyledTableCell>Title</StyledTableCell>
+          <StyledTableCell
+            classes={{
+              head: classes.head,
+              body: classes.body,
+            }}
+          >
+            #
+          </StyledTableCell>
+          <StyledTableCell
+            classes={{
+              head: classes.head,
+              body: classes.body,
+            }}
+          >
+            &nbsp;
+          </StyledTableCell>
+          <StyledTableCell
+            classes={{
+              head: classes.head,
+              body: classes.body,
+            }}
+          >
+            Title
+          </StyledTableCell>
 
-          <StyledTableCell>Play</StyledTableCell>
-          <StyledTableCell>Download</StyledTableCell>
+          <StyledTableCell
+            classes={{
+              head: classes.head,
+              body: classes.body,
+            }}
+          >
+            Play
+          </StyledTableCell>
+          <StyledTableCell
+            classes={{
+              head: classes.head,
+              body: classes.body,
+            }}
+          >
+            Download
+          </StyledTableCell>
           {/* <StyledTableCell>By</StyledTableCell> */}
         </TableRow>
       </TableHead>
@@ -85,16 +144,34 @@ export default function AlbumTracksTable({ album, list }: Props) {
                   album.tracks.length - 1 === index ? '' : '1px solid white',
               }}
             >
-              <StyledTableCell style={{ width: '4%' }}>
+              <StyledTableCell
+                style={{ width: '4%' }}
+                classes={{
+                  head: classes.head,
+                  body: classes.body,
+                }}
+              >
                 {track.number}
               </StyledTableCell>
-              <StyledTableCell style={{ width: '10%', minWidth: '60px' }}>
+              <StyledTableCell
+                style={{ width: '10%', minWidth: '60px' }}
+                classes={{
+                  head: classes.head,
+                  body: classes.body,
+                }}
+              >
                 <PlayPause
                   sound={makeSoundFromTrack({ ...track, artist: album.artist })}
                   list={list}
                 />
               </StyledTableCell>
-              <StyledTableCell style={{ width: '90%', color }}>
+              <StyledTableCell
+                style={{ width: '90%', color }}
+                classes={{
+                  head: classes.head,
+                  body: classes.body,
+                }}
+              >
                 <Box
                   component={Link}
                   prefetch="intent"
@@ -106,10 +183,22 @@ export default function AlbumTracksTable({ album, list }: Props) {
                 </Box>
               </StyledTableCell>
 
-              <StyledTableCell style={{ width: '1.5%', color }}>
+              <StyledTableCell
+                style={{ width: '1.5%', color }}
+                classes={{
+                  head: classes.head,
+                  body: classes.body,
+                }}
+              >
                 {track.playCount}
               </StyledTableCell>
-              <StyledTableCell style={{ width: '1.5%', color }}>
+              <StyledTableCell
+                style={{ width: '1.5%', color }}
+                classes={{
+                  head: classes.head,
+                  body: classes.body,
+                }}
+              >
                 {track.downloadCount}
               </StyledTableCell>
               {/* <StyledTableCell style={{ width: '35%', color }}>
@@ -125,6 +214,6 @@ export default function AlbumTracksTable({ album, list }: Props) {
           )
         })}
       </TableBody>
-    </Table>
+    </StyledTable>
   )
 }

app/components/ClientOnly.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+
+import type { FC, PropsWithChildren } from 'react'
+
+let isHydrating = true
+
+const ClientOnly: FC<PropsWithChildren> = ({ children }) => {
+  let [isHydrated, setIsHydrated] = useState(!isHydrating)
+
+  useEffect(() => {
+    isHydrating = false
+    setIsHydrated(true)
+  }, [])
+
+  return isHydrated ? <>{children}</> : null
+}
+
+export default ClientOnly

app/components/Content.tsx

@@ -1,28 +1,21 @@
-import { useEffect } from 'react'
+import { useRef } from 'react'
 import Box from '@mui/material/Box'
-import { type FC, useRef } from 'react'
-import { useSelector } from 'react-redux'
-import type { BoxProps } from '@mui/material'
-import { useLocation } from '@remix-run/react'
 
-import type AppStateInterface from '~/interfaces/AppStateInterface'
+import { usePlayer } from '~/hooks/usePlayer'
+
+import type { FC, PropsWithChildren } from 'react'
+
+import type { BoxProps } from '@mui/material'
 
-type Props = {} & BoxProps
+type Props = PropsWithChildren<{} & BoxProps>
 
 const Content: FC<Props> = (props) => {
-  const currentTrack = useSelector(
-    ({ player }: AppStateInterface) => player.currentSound
-  )
-  const { pathname } = useLocation()
+  const {
+    playerState: { currentSound: currentTrack },
+  } = usePlayer()
 
   const mainRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (mainRef.current) {
-      mainRef.current.scrollTo(0, 0)
-    }
-  }, [pathname])
-
   return (
     <Box
       id="main-content"