+
+ `,
+ category: [Categories.OnlyImage]
+ },
{
name: 'Steam Card',
previewImage:
diff --git a/src/common/locales/en/descripts.ts b/src/common/locales/en/descripts.ts
index 5b5d8ce..c9cad51 100644
--- a/src/common/locales/en/descripts.ts
+++ b/src/common/locales/en/descripts.ts
@@ -151,5 +151,9 @@ export const descripts: Record
+ {list.map((item, index) => (
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/profileCard/index.tsx b/src/components/profileCard/index.tsx
index 31c0812..4b19e2e 100644
--- a/src/components/profileCard/index.tsx
+++ b/src/components/profileCard/index.tsx
@@ -18,15 +18,16 @@ const ProfileCard: FC clickPage(index)}
+ >
+ {item}
+
+ ))}
+
- {ProfileCardList.map((item, index) => (
-
+ <>
+
+ {list.map((item, index) => (
+
+
);
};
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
index e6d8264..937760d 100644
--- a/src/components/tabs/index.tsx
+++ b/src/components/tabs/index.tsx
@@ -18,7 +18,7 @@ const Tabs = () => {
};
return (
-
+
{tabOptions.map((item, index) => (
{
return newState;
};
+/**
+ * change page
+ */
+export const changePage = (oldState: ListState, currentPage: number) => {
+ const newState = {
+ ...oldState,
+ currentPage
+ };
+ storage.set(CURRENT_PAGE_KEY, currentPage);
+ return newState;
+};
+
/**
* get localStorage data
*/
@@ -108,12 +121,14 @@ export const initStorage = (oldState: ListState) => {
const categoryActivityStorage =
storage.get(CATEGORY_ACTIVITY_STORAGE_KEY) || Categories.All;
const currentTabStorage = storage.get(CURRENT_TAB_KEY) || tabOptions[0].title;
+ const currentPageStorage = storage.get(CURRENT_PAGE_KEY) || 0;
const newState = {
...oldState,
categoryActivity: categoryActivityStorage,
likes: likesStorage,
language: languageStorage,
- currentTab: currentTabStorage.toLowerCase()
+ currentTab: currentTabStorage.toLowerCase(),
+ currentPage: currentPageStorage
};
return newState;
};
diff --git a/src/context/list/index.tsx b/src/context/list/index.tsx
index 593a1d9..78b0f4f 100644
--- a/src/context/list/index.tsx
+++ b/src/context/list/index.tsx
@@ -32,7 +32,8 @@ export const ListProvider: FC<{ children: ReactNode }> = ({ children }) => {
currentData: null,
likes: [],
language: 'en',
- currentTab: tabOptions[0].title
+ currentTab: tabOptions[0].title,
+ currentPage: 0
});
useEffect(() => {
diff --git a/src/context/list/reducer.ts b/src/context/list/reducer.ts
index 49f43d9..b421ea5 100644
--- a/src/context/list/reducer.ts
+++ b/src/context/list/reducer.ts
@@ -6,7 +6,8 @@ import {
updateLikes,
changeLanguage,
changeTabs,
- initStorage
+ initStorage,
+ changePage
} from './actions';
export interface ListState {
@@ -16,6 +17,7 @@ export interface ListState {
likes: string[];
language: string;
currentTab: string;
+ currentPage: number;
}
export interface ListAction {
@@ -33,7 +35,8 @@ export const ACTION_TYPE = {
HIDE_MODAL: 'hidenModal',
UPDATE_LIKES: 'updateLikes',
CHANGE_LANGUAGE: 'changeLanguage',
- CHANGE_TAB: 'changeTab'
+ CHANGE_TAB: 'changeTab',
+ CHANGE_PAGE: 'changePage'
};
export const listReducer: ListReducer = (state, action) => {
@@ -52,6 +55,8 @@ export const listReducer: ListReducer = (state, action) => {
return changeTabs(state, action.payload);
case ACTION_TYPE.INIT_STORAGE:
return initStorage(state);
+ case ACTION_TYPE.CHANGE_PAGE:
+ return changePage(state, action.payload);
default:
return state;
}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index da2975b..246d5ba 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -4,6 +4,7 @@ export const CATEGORY_ACTIVITY_STORAGE_KEY = 'CATEGORY_ACTIVITY';
export const LIKES_STORAGE_KEY = 'LIKES';
export const LANGUAGE_KEY = 'LANGUAGE';
export const CURRENT_TAB_KEY = 'CURRENT_TAB';
+export const CURRENT_PAGE_KEY = 'CURRENT_PAGE';
/**
* localStorage