diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 63376e9..90e46e2 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -12,7 +12,7 @@ import { selectUsers, setLoggedIn, } from 'src/store/features/slice/userSlice'; - +// import * as Api from 'src/services/utils' export interface DroppedCard { id: string; cellId: string; @@ -20,6 +20,8 @@ export interface DroppedCard { export default function App() { let { loggedIn } = useAppSelector(selectUsers); + + const dispatch = useAppDispatch(); const navigate = useNavigate(); @@ -38,19 +40,20 @@ export default function App() { }); } - const [members, setMembers] = useState('') - console.log('members: ', members); + // const [members, setMembers] = useState('') + + // useEffect(() => { + // dispatch(fetchGetMembers()) + // .then((data) => { + // setMembers(data) + // console.log('data: ', data); + // } ) + // .catch((error) => { + // console.error(error) + // }) + // }, []) + - useEffect(() => { - Api.getMembers() - .then((data) => { - setMembers(data) - console.log('data: ', data); - } ) - .catch((error) => { - console.error(error) - }) - }, []) // ДНД const [droppedCards, setDroppedCards] = useState([]); diff --git a/src/components/Filter/Filter.module.scss b/src/components/Filter/Filter.module.scss index 0b8c3e5..ce641e8 100644 --- a/src/components/Filter/Filter.module.scss +++ b/src/components/Filter/Filter.module.scss @@ -4,11 +4,12 @@ right: 10px; border-radius: 0 0 0 16px; width: 354px; - height: 100%; + height: 100vh; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12); background: #fff; padding: 56px 48px; z-index: 3; + overflow-y: auto; } .container { diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index cb28054..e505969 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -1,12 +1,14 @@ import styles from 'src/components/Filter/Filter.module.scss'; -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; import useOutsideClick from 'src/hooks/useOutsideClick'; import { Input } from 'antd'; import { CloseOutlined } from '@ant-design/icons'; import Card from 'src/ui/Card/Card'; -import { cardsList } from 'src/services/mock'; +// import { cardsList } from 'src/services/mock'; import { DroppedCard } from '../App/App'; import FilterList from 'src/ui/FilterList/FilterList'; +import { fetchGetMembers, selectMembers } from 'src/store/features/slice/membersSlice'; +import { useAppDispatch, useAppSelector } from 'src/store/hooks'; interface FilterProps { isFilterOpen: boolean; @@ -21,12 +23,19 @@ export default function Filter({ onDragStart, droppedCards, }: FilterProps) { + const dispatch = useAppDispatch(); + const { members } = useAppSelector(selectMembers); + console.log('members: ', members); + + useEffect(() => { + dispatch(fetchGetMembers()); + }, [dispatch]); + const ref = useRef(null); useOutsideClick(ref, () => { setIsFilterOpen(false); }); - console.log('droppedCards: ', droppedCards); return (
@@ -37,11 +46,11 @@ export default function Filter({
- {cardsList.map((card, index) => ( + {members.map((card, index) => ( { @@ -8,28 +7,34 @@ const getResponseData = (res: Response) => { return res.json() } -const headers = { - // authorization: `Bearer ${TOKEN}`, - Accept: 'application/json', - 'Content-Type': 'application/json', -} +// const headers = { +// // authorization: `Bearer ${TOKEN}`, +// Accept: 'application/json', +// 'Content-Type': 'application/json', +// } -export const registration = ({email, password}: RegisterDataProps) => { - return fetch(`${BASE_URL}/token/`, { - method: 'POST', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - email, - password, - }), - }).then(getResponseData) -} +// export const registration = ({email, password}: RegisterDataProps) => { +// return fetch(`${BASE_URL}/token/`, { +// method: 'POST', +// headers: { +// Accept: 'application/json', +// 'Content-Type': 'application/json', +// }, +// body: JSON.stringify({ +// email, +// password, +// }), +// }).then(getResponseData) +// } export const getMembers = () => { - return fetch(`${BASE_URL}/members/`, { + const TOKEN = localStorage.getItem('token'); + const headers = { + authorization: `Bearer ${TOKEN}`, + Accept: 'application/json', + 'Content-Type': 'application/json', + }; + return fetch(`${BASE_URL}/v1/members/`, { method: 'GET', headers, }).then(getResponseData); diff --git a/src/store/api.ts b/src/store/api.ts index c00da2e..6280f5f 100644 --- a/src/store/api.ts +++ b/src/store/api.ts @@ -1,5 +1,11 @@ export const BASE_URL = 'https://gazprom.hopto.org/api'; import { RegisterDataProps } from 'src/services/types'; +const TOKEN = localStorage.getItem('token'); +const headers = { + authorization: `Bearer ${TOKEN}`, + Accept: 'application/json', + 'Content-Type': 'application/json', +}; type RequestOptionsType = RequestInit & { headers: Record; @@ -9,11 +15,11 @@ export const checkResponse = (response: Response) => { if (response.ok) { return response.json(); } - return response - .json() - .then((data) => { - return Promise.reject(`Ошибка ${response.status}: ${data.message || 'Неизвестная ошибка'}`); - }); + return response.json().then((data) => { + return Promise.reject( + `Ошибка ${response.status}: ${data.message || 'Неизвестная ошибка'}` + ); + }); }; const request = (endpoint: string, options?: RequestOptionsType) => @@ -30,3 +36,12 @@ export const registration = async ({ email, password }: RegisterDataProps) => { }; return await request('/token/', options); }; + +export const getMembers = async () => { + const options: RequestOptionsType = { + method: 'GET', + headers, + }; + + return await request('/v1/members/', options); +}; diff --git a/src/store/features/slice/membersSlice.ts b/src/store/features/slice/membersSlice.ts new file mode 100644 index 0000000..b77a5ab --- /dev/null +++ b/src/store/features/slice/membersSlice.ts @@ -0,0 +1,45 @@ +import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; +import { membersProps } from 'src/services/types'; +import { getMembers } from 'src/store/api'; +import { RootStore } from 'src/store/store'; + +export interface StateType { + members: membersProps[]; + isLoading: boolean; + error: string | null | unknown; +} + +const initialState: StateType = { + members: [], + isLoading: false, + error: null, +}; + +export const fetchGetMembers = createAsyncThunk('fetch/members', async () => { + const response = await getMembers(); + return response; +}); + +const membersSlice = createSlice({ + name: 'members', + initialState, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchGetMembers.pending, (state) => { + state.isLoading = true; + }) + .addCase(fetchGetMembers.fulfilled, (state, action) => { + state.members = action.payload; + state.isLoading = false; + state.error = null; + }) + .addCase(fetchGetMembers.rejected, (state, action) => { + state.isLoading = false; + state.error = action.error.message; + }); + }, +}); + +export const membersReducer = membersSlice.reducer; +export const selectMembers = (state: RootStore) => state.members; diff --git a/src/store/features/slice/userSlice.ts b/src/store/features/slice/userSlice.ts index 89507cb..67b1371 100644 --- a/src/store/features/slice/userSlice.ts +++ b/src/store/features/slice/userSlice.ts @@ -16,7 +16,7 @@ const initialState: StateType = { error: null, loggedIn: false, }; - +// фетч добавить export const registerUser = createAsyncThunk( 'fetch/user', async ({ email, password }: RegisterDataProps) => { diff --git a/src/store/store.ts b/src/store/store.ts index 61cd501..e25c621 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,8 +1,9 @@ import { configureStore } from '@reduxjs/toolkit'; import { userReducer } from 'src/store/features/slice/userSlice'; +import { membersReducer } from './features/slice/membersSlice'; export const store = configureStore({ - reducer: { user: userReducer }, + reducer: { user: userReducer, members: membersReducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }), });