|
|
|
@ -1,12 +1,11 @@ |
|
|
|
import { createSlice, PayloadAction } from '@reduxjs/toolkit'; |
|
|
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; |
|
|
|
// types
|
|
|
|
// types
|
|
|
|
import Book from 'types/book' |
|
|
|
import Book from "types/book"; |
|
|
|
import Page from 'types/page' |
|
|
|
import Page from "types/page"; |
|
|
|
import Toc from 'types/toc' |
|
|
|
import Toc from "types/toc"; |
|
|
|
import Highlight, { Color } from 'types/highlight' |
|
|
|
import Highlight, { Color } from "types/highlight"; |
|
|
|
// lib
|
|
|
|
// lib
|
|
|
|
import palette from 'lib/styles/palette' |
|
|
|
import palette from "lib/styles/palette"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* |
|
|
|
/* |
|
|
|
Initial State |
|
|
|
Initial State |
|
|
|
@ -14,110 +13,120 @@ import palette from 'lib/styles/palette' |
|
|
|
|
|
|
|
|
|
|
|
/** 초기 Book 상태 */ |
|
|
|
/** 초기 Book 상태 */ |
|
|
|
const initialBook: Book = { |
|
|
|
const initialBook: Book = { |
|
|
|
coverURL: '', |
|
|
|
coverURL: "", |
|
|
|
title: '', |
|
|
|
title: "", |
|
|
|
description: '', |
|
|
|
description: "", |
|
|
|
published_date: '', |
|
|
|
published_date: "", |
|
|
|
modified_date: '', |
|
|
|
modified_date: "", |
|
|
|
author: '', |
|
|
|
author: "", |
|
|
|
publisher: '', |
|
|
|
publisher: "", |
|
|
|
language: '' |
|
|
|
language: "", |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** 초기 CurrentPage 상태 */ |
|
|
|
/** 초기 CurrentPage 상태 */ |
|
|
|
const initialCurrentLocation: Page = { |
|
|
|
const initialCurrentLocation: Page = { |
|
|
|
chapterName: "-", |
|
|
|
chapterName: "-", |
|
|
|
currentPage: 0, |
|
|
|
currentPage: 0, |
|
|
|
totalPage: 0, |
|
|
|
totalPage: 0, |
|
|
|
startCfi: '', |
|
|
|
startCfi: "", |
|
|
|
endCfi: '', |
|
|
|
endCfi: "", |
|
|
|
base: '' |
|
|
|
base: "", |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** 초기 색상표 상태 */ |
|
|
|
/** 초기 색상표 상태 */ |
|
|
|
const initialColorList: Color[] = [ |
|
|
|
const initialColorList: Color[] = [ |
|
|
|
{ name: 'قرمز', code: palette.red4 }, |
|
|
|
{ name: "قرمز", code: palette.red4 }, |
|
|
|
{ name: 'نارنجی', code: palette.orange4 }, |
|
|
|
{ name: "نارنجی", code: palette.orange4 }, |
|
|
|
{ name: 'زرد', code: palette.yellow4 }, |
|
|
|
{ name: "زرد", code: palette.yellow4 }, |
|
|
|
{ name: 'سبز', code: palette.green4 }, |
|
|
|
{ name: "سبز", code: palette.green4 }, |
|
|
|
{ name: 'آبی', code: palette.blue4 }, |
|
|
|
{ name: "آبی", code: palette.blue4 }, |
|
|
|
{ name: 'بنفش', code: palette.purple4 } |
|
|
|
{ name: "بنفش", code: palette.purple4 }, |
|
|
|
] |
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const initialState: BookState = { |
|
|
|
const initialState: BookState = { |
|
|
|
book: initialBook, |
|
|
|
book: initialBook, |
|
|
|
currentLocation: initialCurrentLocation, |
|
|
|
currentLocation: initialCurrentLocation, |
|
|
|
toc: [], |
|
|
|
toc: [], |
|
|
|
highlights: [], |
|
|
|
highlights: [], |
|
|
|
colorList: initialColorList, |
|
|
|
colorList: initialColorList, |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* |
|
|
|
/* |
|
|
|
Slice |
|
|
|
Slice |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
const bookSlice = createSlice({ |
|
|
|
const bookSlice = createSlice({ |
|
|
|
name: 'book', |
|
|
|
name: "book", |
|
|
|
initialState, |
|
|
|
initialState, |
|
|
|
reducers: { |
|
|
|
reducers: { |
|
|
|
/** Book 갱신 @dispatch */ |
|
|
|
/** Book 갱신 @dispatch */ |
|
|
|
updateBook(state, action: PayloadAction<Book>) { |
|
|
|
updateBook(state, action: PayloadAction<Book>) { |
|
|
|
state.book = action.payload; |
|
|
|
state.book = action.payload; |
|
|
|
}, |
|
|
|
}, |
|
|
|
/** CurrentPage 갱신 @dispatch */ |
|
|
|
/** CurrentPage 갱신 @dispatch */ |
|
|
|
updateCurrentPage(state, action: PayloadAction<Page>) { |
|
|
|
updateCurrentPage(state, action: PayloadAction<Page>) { |
|
|
|
state.currentLocation = action.payload; |
|
|
|
if ( |
|
|
|
}, |
|
|
|
state.currentLocation.currentPage == action.payload.currentPage && |
|
|
|
/** Book 초기화 @dispatch */ |
|
|
|
action.payload.chapterName |
|
|
|
clearBook(state) { |
|
|
|
) { |
|
|
|
state.book = initialBook; |
|
|
|
console.log(JSON.parse(JSON.stringify(state))); |
|
|
|
}, |
|
|
|
// let c = current(state)
|
|
|
|
/** 목차 갱신 @dispatch */ |
|
|
|
// let x = [...c.toc];
|
|
|
|
updateToc(state, action: PayloadAction<Toc[]>) { |
|
|
|
// console.log(x[1]);
|
|
|
|
state.toc = action.payload; |
|
|
|
alert("فصل بعد"); |
|
|
|
}, |
|
|
|
} |
|
|
|
/** 목차 초기화 @dispatch */ |
|
|
|
state.currentLocation = action.payload; |
|
|
|
clearToc(state) { |
|
|
|
}, |
|
|
|
state.toc = []; |
|
|
|
/** Book 초기화 @dispatch */ |
|
|
|
}, |
|
|
|
clearBook(state) { |
|
|
|
/** 하이라이트 추가 */ |
|
|
|
state.book = initialBook; |
|
|
|
pushHighlight(state, action: PayloadAction<Highlight>) { |
|
|
|
}, |
|
|
|
const check = state.highlights.filter(h => h.key === action.payload.key); |
|
|
|
/** 목차 갱신 @dispatch */ |
|
|
|
if (check.length > 0) return; |
|
|
|
updateToc(state, action: PayloadAction<Toc[]>) { |
|
|
|
state.highlights.push(action.payload); |
|
|
|
state.toc = action.payload; |
|
|
|
}, |
|
|
|
}, |
|
|
|
/** 하이라이트 갱신 */ |
|
|
|
/** 목차 초기화 @dispatch */ |
|
|
|
updateHighlight(state, action: PayloadAction<Highlight>) { |
|
|
|
clearToc(state) { |
|
|
|
const new_idx = action.payload.key; |
|
|
|
state.toc = []; |
|
|
|
const old_idx = state.highlights.map(h => h.key).indexOf(new_idx); |
|
|
|
}, |
|
|
|
state.highlights.splice(old_idx, 1, action.payload); |
|
|
|
/** 하이라이트 추가 */ |
|
|
|
}, |
|
|
|
pushHighlight(state, action: PayloadAction<Highlight>) { |
|
|
|
/** 하이라이트 삭제 */ |
|
|
|
const check = state.highlights.filter( |
|
|
|
popHighlight(state, action: PayloadAction<string>) { |
|
|
|
(h) => h.key === action.payload.key |
|
|
|
const idx = state.highlights.map(h => h.key).indexOf(action.payload); |
|
|
|
); |
|
|
|
state.highlights.splice(idx, 1); |
|
|
|
if (check.length > 0) return; |
|
|
|
} |
|
|
|
state.highlights.push(action.payload); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** 하이라이트 갱신 */ |
|
|
|
|
|
|
|
updateHighlight(state, action: PayloadAction<Highlight>) { |
|
|
|
|
|
|
|
const new_idx = action.payload.key; |
|
|
|
|
|
|
|
const old_idx = state.highlights.map((h) => h.key).indexOf(new_idx); |
|
|
|
|
|
|
|
state.highlights.splice(old_idx, 1, action.payload); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
/** 하이라이트 삭제 */ |
|
|
|
|
|
|
|
popHighlight(state, action: PayloadAction<string>) { |
|
|
|
|
|
|
|
const idx = state.highlights.map((h) => h.key).indexOf(action.payload); |
|
|
|
|
|
|
|
state.highlights.splice(idx, 1); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export interface BookState { |
|
|
|
export interface BookState { |
|
|
|
book: Book; |
|
|
|
book: Book; |
|
|
|
currentLocation: Page; |
|
|
|
currentLocation: Page; |
|
|
|
toc: Toc[]; |
|
|
|
toc: Toc[]; |
|
|
|
highlights: Highlight[]; |
|
|
|
highlights: Highlight[]; |
|
|
|
colorList: Color[]; |
|
|
|
colorList: Color[]; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const {
|
|
|
|
export const { |
|
|
|
updateBook, |
|
|
|
updateBook, |
|
|
|
clearBook, |
|
|
|
clearBook, |
|
|
|
updateCurrentPage, |
|
|
|
updateCurrentPage, |
|
|
|
updateToc, |
|
|
|
updateToc, |
|
|
|
clearToc, |
|
|
|
clearToc, |
|
|
|
pushHighlight, |
|
|
|
pushHighlight, |
|
|
|
updateHighlight, |
|
|
|
updateHighlight, |
|
|
|
popHighlight |
|
|
|
popHighlight, |
|
|
|
} = bookSlice.actions; |
|
|
|
} = bookSlice.actions; |
|
|
|
|
|
|
|
|
|
|
|
export default bookSlice.reducer |
|
|
|
export default bookSlice.reducer; |
|
|
|
|
taha12322
3 years ago