Merge pull request #629 from systemli/Move-contexts-and-add-Tests

♻️ Move contexts and add Tests

src/App.tsx

@@ -2,15 +2,15 @@ import { FC } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import { AuthProvider } from './components/useAuth'
+import { AuthProvider } from './contexts/AuthContext'
 import HomeView from './views/HomeView'
 import LoginView from './views/LoginView'
 import SettingsView from './views/SettingsView'
 import TickerView from './views/TickerView'
 import UsersView from './views/UsersView'
 import ProtectedRoute from './components/ProtectedRoute'
 import NotFoundView from './views/NotFoundView'
-import { FeatureProvider } from './components/useFeature'
+import { FeatureProvider } from './contexts/FeatureContext'
 import ThemeProvider from './theme/ThemeProvider'
 import '../leaflet.config.js'
 

src/components/ProtectedRoute.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import { Navigate, RouteProps } from 'react-router'
-import useAuth, { Roles } from './useAuth'
+import useAuth from '../contexts/useAuth'
+import { Roles } from '../contexts/AuthContext'
 
 type Props = RouteProps & {
   role: Roles

src/components/message/MessageForm.tsx

@@ -4,7 +4,7 @@ import { Ticker } from '../../api/Ticker'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import MessageFormCounter from './MessageFormCounter'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { Upload } from '../../api/Upload'
 import UploadButton from './UploadButton'
 import AttachmentsPreview from './AttachmentsPreview'

src/components/message/MessageList.tsx

@@ -3,7 +3,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
 import { Ticker } from '../../api/Ticker'
 import { useMessageApi } from '../../api/Message'
 import Message from './Message'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import ErrorView from '../../views/ErrorView'
 import Loader from '../Loader'
 import { Button, CircularProgress } from '@mui/material'

src/components/message/MessageModalDelete.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Message, useMessageApi } from '../../api/Message'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import Modal from '../common/Modal'
 
 interface Props {

src/components/message/UploadButton.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconButton } from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import { useUploadApi, Upload } from '../../api/Upload'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { faImages } from '@fortawesome/free-solid-svg-icons'
 import palette from '../../theme/palette'
 

src/components/navigation/UserDropdown.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useState } from 'react'
 import { AccountCircle } from '@mui/icons-material'
 import { IconButton, Menu, MenuItem } from '@mui/material'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import UserChangePasswordModalForm from '../user/UserChangePasswordModalForm'
 
 const UserDropdown: FC = () => {

src/components/settings/InactiveSettingsCard.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useSettingsApi } from '../../api/Settings'
 import ErrorView from '../../views/ErrorView'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import Loader from '../Loader'
 import { Box, Button, Card, CardContent, Divider, Grid, Typography } from '@mui/material'
 import { Stack } from '@mui/system'

src/components/settings/InactiveSettingsForm.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import { InactiveSetting, Setting, useSettingsApi } from '../../api/Settings'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { FormGroup, Grid, TextField } from '@mui/material'
 
 interface Props {

src/components/settings/RefreshIntervalCard.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useSettingsApi } from '../../api/Settings'
 import ErrorView from '../../views/ErrorView'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { Box, Button, Card, CardContent, Divider, Stack, Typography } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencil } from '@fortawesome/free-solid-svg-icons'

src/components/settings/RefreshIntervalForm.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import { RefreshIntervalSetting, Setting, useSettingsApi } from '../../api/Settings'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { FormGroup, Grid, TextField } from '@mui/material'
 
 interface Props {

src/components/ticker/MastodonCard.tsx

@@ -3,7 +3,7 @@ import { faMastodon } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import MastodonModalForm from './MastodonModalForm'
 import { Box, Button, Card, CardActions, CardContent, Divider, Link, Stack, Typography } from '@mui/material'
 import { faBan, faGear, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'

src/components/ticker/MastodonForm.tsx

@@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { Ticker, TickerMastodonFormData, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 
 interface Props {
   callback: () => void

src/components/ticker/TelegramCard.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Box, Button, Card, CardActions, CardContent, Divider, Link, Stack, Typography } from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import TelegramModalForm from './TelegramModalForm'
 
 interface Props {

src/components/ticker/TelegramForm.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { Checkbox, FormControlLabel, FormGroup, Grid, TextField, Typography } from '@mui/material'
 
 interface Props {

src/components/ticker/Ticker.tsx

@@ -9,7 +9,7 @@ import { Alert, Box, Button, Card, CardContent, Grid, Stack, Typography } from '
 import TickerModalForm from './TickerModalForm'
 import TickerDangerZoneCard from './TickerDangerZoneCard'
 import TickerUsersCard from './TickerUsersCard'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 
 interface Props {
   ticker: Model

src/components/ticker/TickerList.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
-import { AuthProvider } from '../useAuth'
+import { AuthProvider } from '../../contexts/AuthContext'
 import TickerList from './TickerList'
 import TickerListItems from './TickerListItems'
 

src/components/ticker/TickerListItem.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Ticker } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { colors, IconButton, MenuItem, Popover, TableCell, TableRow, Typography } from '@mui/material'
 import { MoreVert } from '@mui/icons-material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

src/components/ticker/TickerListItems.test.tsx

@@ -3,7 +3,7 @@ import { GetTickersQueryParams } from '../../api/Ticker'
 import TickerListItems from './TickerListItems'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { MemoryRouter } from 'react-router'
-import { AuthProvider } from '../useAuth'
+import { AuthProvider } from '../../contexts/AuthContext'
 import sign from 'jwt-encode'
 
 describe('TickerListItems', function () {

src/components/ticker/TickerListItems.tsx

@@ -2,7 +2,7 @@ import { CircularProgress, Stack, TableBody, TableCell, TableRow, Typography } f
 import { FC } from 'react'
 import { GetTickersQueryParams, useTickerApi } from '../../api/Ticker'
 import TickerListItem from './TickerListItem'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { useQuery } from '@tanstack/react-query'
 import { Navigate } from 'react-router'
 

src/components/ticker/TickerModalDelete.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import Modal from '../common/Modal'
 
 interface Props {

src/components/ticker/TickerResetModal.tsx

@@ -1,6 +1,6 @@
 import { FC, useCallback } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { useQueryClient } from '@tanstack/react-query'
 import Modal from '../common/Modal'
 

src/components/ticker/TickerUserModalDelete.tsx

@@ -2,7 +2,7 @@ import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import { User } from '../../api/User'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import Modal from '../common/Modal'
 
 interface Props {

src/components/ticker/TickerUsersCard.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import TickerUserList from './TickerUserList'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import Loader from '../Loader'
 import ErrorView from '../../views/ErrorView'
 import { Button, Card, CardContent, Typography } from '@mui/material'

src/components/ticker/TickerUsersForm.test.tsx

@@ -5,10 +5,12 @@ import { render, screen } from '@testing-library/react'
 import TickerUsersForm from './TickerUsersForm'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router'
+import { AuthProvider } from '../../contexts/AuthContext'
 
 describe('TickerUsersForm', () => {
   beforeEach(() => {
-    fetch.resetMocks()
+    fetchMock.resetMocks()
   })
 
   function setup(defaultValue: Array<User>, ticker: Ticker, onSubmit: () => void) {
@@ -21,7 +23,11 @@ describe('TickerUsersForm', () => {
     })
     return render(
       <QueryClientProvider client={client}>
-        <TickerUsersForm defaultValue={defaultValue} onSubmit={onSubmit} ticker={ticker} />
+        <MemoryRouter>
+          <AuthProvider>
+            <TickerUsersForm defaultValue={defaultValue} onSubmit={onSubmit} ticker={ticker} />
+          </AuthProvider>
+        </MemoryRouter>
       </QueryClientProvider>
     )
   }
@@ -35,7 +41,7 @@ describe('TickerUsersForm', () => {
       id: 1,
       email: '[email protected]',
     } as User
-    fetch.mockResponseOnce(
+    fetchMock.mockResponseOnce(
       JSON.stringify({
         data: {
           users: [user],

src/components/ticker/TickerUsersForm.tsx

@@ -3,7 +3,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import { User, useUserApi } from '../../api/User'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { Box, Chip, FormControl, InputLabel, MenuItem, OutlinedInput, Select, SelectChangeEvent, useTheme } from '@mui/material'
 
 interface Props {

src/components/ticker/TickersDropdown.test.tsx

@@ -4,10 +4,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Ticker } from '../../api/Ticker'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
+import { AuthProvider } from '../../contexts/AuthContext'
+import { MemoryRouter } from 'react-router'
 
 describe('TickersDropdown', () => {
   beforeEach(() => {
-    fetch.resetMocks()
+    fetchMock.resetMocks()
   })
 
   function setup(defaultValue: Array<Ticker>, onChange: (tickers: Array<Ticker>) => void) {
@@ -20,7 +22,11 @@ describe('TickersDropdown', () => {
     })
     return render(
       <QueryClientProvider client={client}>
-        <TickersDropdown defaultValue={defaultValue} name="tickers" onChange={onChange} />
+        <MemoryRouter>
+          <AuthProvider>
+            <TickersDropdown defaultValue={defaultValue} name="tickers" onChange={onChange} />
+          </AuthProvider>
+        </MemoryRouter>
       </QueryClientProvider>
     )
   }
@@ -30,7 +36,7 @@ describe('TickersDropdown', () => {
       id: 1,
       title: 'Ticker 1',
     }
-    fetch.mockResponseOnce(
+    fetchMock.mockResponseOnce(
       JSON.stringify({
         data: {
           tickers: [ticker],

src/components/ticker/TickersDropdown.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react'
 import { Box, Chip, FormControl, InputLabel, MenuItem, OutlinedInput, Select, SelectChangeEvent, SxProps, useTheme } from '@mui/material'
 import { GetTickersQueryParams, Ticker, useTickerApi } from '../../api/Ticker'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 
 interface Props {
   name: string

src/components/ticker/form/Domain.tsx

@@ -1,7 +1,7 @@
 import { TextField } from '@mui/material'
 import { FC } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
-import useAuth from '../../useAuth'
+import useAuth from '../../../contexts/useAuth'
 
 const Domain: FC = () => {
   const { control } = useFormContext()

src/components/ticker/form/TickerForm.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect } from 'react'
 import { Ticker, useTickerApi } from '../../../api/Ticker'
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
-import useAuth from '../../useAuth'
+import useAuth from '../../../contexts/useAuth'
 import LocationSearch, { Result } from '../LocationSearch'
 import { MapContainer, Marker, TileLayer } from 'react-leaflet'
 import { Alert, Button, FormGroup, Grid, Stack, Typography } from '@mui/material'

src/components/user/UserChangePasswordForm.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Alert, FormGroup, Grid, TextField } from '@mui/material'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { useUserApi } from '../../api/User'
 
 interface Props {

src/components/user/UserChangePasswordModalForm.test.tsx

@@ -2,9 +2,9 @@ import { render, screen } from '@testing-library/react'
 import UserChangePasswordModalForm from './UserChangePasswordModalForm'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { MemoryRouter } from 'react-router'
-import { AuthProvider } from '../useAuth'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
+import { AuthProvider } from '../../contexts/AuthContext'
 
 describe('UserChangePasswordModalForm', () => {
   beforeEach(() => {

src/components/user/UserForm.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { User, useUserApi } from '../../api/User'
 import { useQueryClient } from '@tanstack/react-query'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { FormControlLabel, Checkbox, FormGroup, TextField, Typography, Grid, Divider } from '@mui/material'
 import TickersDropdown from '../ticker/TickersDropdown'
 import { Ticker } from '../../api/Ticker'

src/components/user/UserList.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import UserListItems from './UserListItems'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import { useUserApi } from '../../api/User'
 import ErrorView from '../../views/ErrorView'
 import { Table, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'

src/components/user/UserModalDelete.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { User, useUserApi } from '../../api/User'
-import useAuth from '../useAuth'
+import useAuth from '../../contexts/useAuth'
 import Modal from '../common/Modal'
 
 interface Props {