feat: protect wallpaper page for unsubscribed user

src/components/App/index.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react'
-import { Routes, Route, Navigate, Outlet, useLocation } from 'react-router-dom'
+import {
+  Routes, Route, Navigate, Outlet, useLocation
+} from 'react-router-dom'
 import { useAuth } from '../../auth'
 import { useSelector } from 'react-redux'
 import { selectors } from '../../store'
-import routes, { hasNavigation } from '../../routes'
+import routes, { hasNavigation, getRouteBy } from '../../routes'
 import BirthdayPage from '../BirthdayPage'
 import BirthtimePage from '../BirthtimePage'
 import CreateProfilePage from '../CreateProfilePage'
@@ -31,7 +33,7 @@ function App(): JSX.Element {
         <Route element={<PrivateOutlet />}>
           <Route path={routes.client.subscription()} element={<SubscriptionPage />} />
           <Route path={routes.client.paymentMethod()} element={<PaymentPage />} />
-          <Route path={routes.client.wallpaper()} element={<WallpaperPage />} />
+          <Route path={routes.client.wallpaper()} element={<ProtectWallpaperPage />} />
         </Route>
         <Route path="*" element={<NotFoundPage />} />
       </Route>
@@ -65,13 +67,12 @@ function SkipStep(): JSX.Element {
 
 function MainPage(): JSX.Element {
   const status = useSelector(selectors.selectStatus)
-  const pageMapper = {
-    'lead': routes.client.birthday(),
-    'registred': routes.client.subscription(),
-    'subscribed': routes.client.wallpaper(),
-    'unsubscribed': routes.client.subscription(),
-  }
-  return <Navigate to={pageMapper[status]} replace={true} />
+  return <Navigate to={getRouteBy(status)} replace={true} />
+}
+
+function ProtectWallpaperPage(): JSX.Element {
+  const status = useSelector(selectors.selectStatus)
+  return status === 'subscribed' ? <WallpaperPage /> : <Navigate to={getRouteBy(status)} replace={true} />
 }
 
 export default App

src/routes.ts

@@ -1,3 +1,5 @@
+import type { UserStatus } from "./types"
+
 const host = ''
 const apiHost = 'https://aura.wit.life'
 const prefix = 'api/v1'
@@ -45,4 +47,18 @@ export const withNavigationRoutes = [routes.client.wallpaper()]
 export const hasNavigation = (path: string) => withNavigationRoutes.includes(path)
 export const hasNoNavigation = (path: string) => !hasNavigation(path)
 
+export const getRouteBy = (status: UserStatus): string => {
+  switch (status) {
+    case 'lead':
+      return routes.client.birthday()
+    case 'registred':
+    case 'unsubscribed':
+      return routes.client.subscription()
+    case 'subscribed':
+      return routes.client.wallpaper()
+    default:
+      throw new Error(`Unknown user status, received status is "${status}"`)
+  }
+}
+
 export default routes

src/store/status.ts

@@ -1,7 +1,6 @@
 import { createSlice, createSelector } from '@reduxjs/toolkit'
 import type { PayloadAction } from '@reduxjs/toolkit'
-
-type UserStatus = 'lead' | 'registred' | 'subscribed' | 'unsubscribed'
+import type { UserStatus } from '../types'
 
 const initialState = 'lead' as UserStatus
 

src/types.ts

@@ -23,3 +23,4 @@ export interface SignupForm {
 }
 
 export type AppConfig = typeof config
+export type UserStatus = 'lead' | 'registred' | 'subscribed' | 'unsubscribed'