IMPROVE | Refactoring

src/i18n/interfaces/custom-pack.interface.ts

@@ -19,4 +19,6 @@ export interface CustomPack {
 	alertEmptyTitle: string
 	alertEmptyTruthDesc: string
 	alertEmptyDaresDesc: string
+	addCustomTruth: string
+	addCustomDare: string
 }

src/i18n/locales/en/custom-pack.translation.ts

@@ -24,4 +24,6 @@ export const customPack: CustomPack = {
 		'Your dares list is empty. You need have at least 1 dare.',
 	editorBtn: 'Tasks and questions editor',
 	play: 'Play',
+	addCustomTruth: 'Add this question to Custom pack?',
+	addCustomDare: 'Add this question to Custom pack?',
 }

src/i18n/locales/ua/custom-pack.translation.ts

@@ -13,7 +13,7 @@ export const customPack: CustomPack = {
 	viewDares: 'Дії',
 	alertCreateTitle: 'Чудово! 🎉',
 	alertCreateDesc: 'Зіграй прямо зараз!',
-	alertSaveTitle: 'У тебе незбережені зміни.',
+	alertSaveTitle: 'У тебе незбережені зміни',
 	alertSaveDesc: 'Зберегти зміни?',
 	alertSaveNo: 'Ні',
 	alertSaveYes: 'Так',
@@ -24,4 +24,6 @@ export const customPack: CustomPack = {
 		'Твій список дій порожній. Потрібно мати хоча б 1 дії.',
 	editorBtn: 'Редактор правд та дій',
 	play: 'Грати',
+	addCustomTruth: 'Додати це питання до твого пакету?',
+	addCustomDare: 'Додати цю дію до твого пакету?',
 }

src/module/common/questions-dares-list/questions-dares-list.ts

@@ -1,4 +1,4 @@
-const under18 = [
+export const under18 = [
 	{
 		id: 1,
 		isDare: false,
@@ -8,8 +8,8 @@ const under18 = [
 	{
 		id: 2,
 		isDare: true,
-		en: 'Do your best dance moves for 1 minute.',
-		ua: 'Покажи свої найкращі танцювальні рухи протягом 1 хвилини.',
+		en: 'Do your best dance moves for 20 seconds.',
+		ua: 'Покажи свої найкращі танцювальні рухи протягом 20 секунд.',
 	},
 	{
 		id: 3,
@@ -247,7 +247,7 @@ const under18 = [
 	},
 ]
 
-const light = [
+export const light = [
 	{
 		id: 1,
 		isDare: false,
@@ -502,7 +502,7 @@ const light = [
 	},
 ]
 
-const crazy = [
+export const crazy = [
 	{
 		id: 1,
 		isDare: false,

src/module/common/typing/enums/choice-type.enum.ts

@@ -0,0 +1,4 @@
+export enum ChoiceType {
+	Truth = 'question',
+	Dare = 'dare',
+}

src/module/common/typing/enums/index.ts

@@ -8,3 +8,4 @@ export * from './guest-route-keys.enum'
 export * from './nav-group.enum'
 export * from './user-route-keys.enum'
 export * from './package-type.enum'
+export * from './choice-type.enum';

src/module/common/typing/enums/package-type.enum.ts

@@ -2,4 +2,5 @@ export enum PackageType {
 	Under18 = 'under18',
 	Light = 'light',
 	Crazy = 'crazy',
+	Custom = 'custom',
 }

src/module/custom-package/atoms/custom-block.atom.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { Animated, LayoutAnimation, StyleSheet } from 'react-native'
+import { Animated, StyleSheet } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { Icon, Txt, colors } from '~module/common'
 import { useAnimationBlock } from '../animation'
@@ -28,6 +28,7 @@ const styles = StyleSheet.create({
 	block: {
 		paddingLeft: 16,
 		borderRadius: 20,
+		paddingVertical: 10,
 		backgroundColor: colors.darkPurple,
 		flexDirection: 'row',
 		justifyContent: 'space-between',
@@ -38,8 +39,9 @@ const styles = StyleSheet.create({
 		fontSize: 16,
 		lineHeight: 24,
 		color: colors.purple,
+		maxWidth: '80%',
 	},
 	iconContainer: {
-		padding: 16,
+		paddingHorizontal: 16,
 	},
 })

src/module/custom-package/screens/custom-package-editor.screen.tsx

@@ -19,10 +19,10 @@ import { CustomBlock, EmptyItemsAtom } from '../atoms'
 import _ from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
 import {
+	addCustomItem,
+	deleteCustomItem,
 	selectCustomPackage,
 	selectCustomPackageFromStore,
-	setDares,
-	setQuestions,
 	updateCustomPackage,
 	updateCustomPackageFromStore,
 } from '~store/slices'
@@ -52,30 +52,17 @@ export const CustomPackageEditorScreen: FC = () => {
 		setValue('')
 	}
 
-	const onAddQuestion = () => {
+	const onAddCustomGameItem = (customType: CustomType) => {
 		if (!value) return
 
-		dispatch(setQuestions([...customPackage.questions, value]))
-		setActiveMod(CustomType.Questions)
-		clearValue()
-	}
-
-	const onAddDare = () => {
-		if (!value) return
+		dispatch(addCustomItem({ customType, value }))
 
-		dispatch(setDares([...customPackage.dares, value]))
-		setActiveMod(CustomType.Dares)
+		setActiveMod(customType)
 		clearValue()
 	}
 
 	const onDeleteItem = (indexItem: number) => {
-		const newCustomItems = customPackage[activeMod].filter(
-			(it, index) => index !== indexItem,
-		)
-
-		activeMod === CustomType.Questions
-			? dispatch(setQuestions(newCustomItems))
-			: dispatch(setDares(newCustomItems))
+		dispatch(deleteCustomItem({ customType: activeMod, id: indexItem }))
 	}
 
 	const saveCustomPackage = async () => {
@@ -163,10 +150,13 @@ export const CustomPackageEditorScreen: FC = () => {
 				<ButtonPrimary
 					mb={0}
 					style={styles.btn}
-					onPress={onAddQuestion}>
+					onPress={() => onAddCustomGameItem(CustomType.Questions)}>
 					{t('customPack.addTruth')}
 				</ButtonPrimary>
-				<ButtonPrimary mb={0} style={styles.btn} onPress={onAddDare}>
+				<ButtonPrimary
+					mb={0}
+					style={styles.btn}
+					onPress={() => onAddCustomGameItem(CustomType.Dares)}>
 					{t('customPack.addDare')}
 				</ButtonPrimary>
 			</View>

src/module/custom-package/screens/custom-package-play.screen.tsx

@@ -11,6 +11,7 @@ import {
 	appEvents,
 	colors,
 	useNav,
+	PackageType,
 } from '~module/common'
 import { selectCustomPackage } from '~store/slices'
 
@@ -30,8 +31,7 @@ export const CustomPackagePreviewScreen: FC = () => {
 		if (!isFullCustomPack) return
 
 		nav.navigate(UserRouteKey.Game, {
-			packageName: 'My package',
-			isCustom: true,
+			packageType: PackageType.Custom,
 		})
 	}
 

src/module/game/components/truth-or-dare-view.tsx

@@ -1,13 +1,18 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Font, Icon, colors } from '../../common'
 import { Animated, StyleSheet } from 'react-native'
+import { useAnimationTruthOrDare } from '../animations'
 
 interface IProps {
 	item: string
-	animStyle: any
 }
 
-export const TruthOrDareView: React.FC<IProps> = ({ item, animStyle }) => {
+export const TruthOrDareView: React.FC<IProps> = ({ item }) => {
+	const { animStyle, startAnimation } = useAnimationTruthOrDare()
+
+	useEffect(() => {
+		startAnimation()
+	}, [])
 	return (
 		<Animated.View style={[styles.container, animStyle]}>
 			<Icon

src/module/game/config/package-name.config.ts

@@ -8,4 +8,5 @@ export const packageNameConfig: any = {
 	},
 	[PackageType.Light]: { en: 'Light', ua: 'Легкий', hi: 'रोशनी' },
 	[PackageType.Crazy]: { en: 'Crazy', ua: 'Божевільний', hi: 'पागल' },
+	[PackageType.Custom]: { en: 'Custom Pack', ua: 'Мій пакет' },
 }

src/module/game/helper/index.ts

@@ -1 +0,0 @@
-export * from './get-current-truth-dares.helper'

src/module/game/hooks/get-current-truth-dares.hook.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import {
-	resetSteps,
 	resetStepsByTruthOrDare,
 	selectCustomPackage,
 	selectPackage,
@@ -10,6 +9,7 @@ import {
 	shufflePackage,
 } from '../../../store/slices'
 import {
+	ChoiceType,
 	CustomType,
 	Language,
 	PackageType,
@@ -17,20 +17,19 @@ import {
 	storageService,
 } from '../../common'
 import { useTranslation } from 'react-i18next'
-import { useAnimationTruthOrDare } from '../animations'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '~store/store'
 import firestore from '@react-native-firebase/firestore'
 import _ from 'lodash'
 
 interface UseTruthOrDareProps {
-	isTruth: boolean
+	choiceType: ChoiceType
 	customType: CustomType
 	packageType: PackageType
 }
 
-export const getCurrentTruthOrDare = ({
-	isTruth,
+export const useGetCurrentTruthOrDare = ({
+	choiceType,
 	customType,
 	packageType,
 }: UseTruthOrDareProps) => {
@@ -42,19 +41,14 @@ export const getCurrentTruthOrDare = ({
 	const gameItems = useSelector((state: RootState) =>
 		selectPackage(state, packageType),
 	)
-	const currentStep = isTruth ? stepTruth : stepDare
-
-	console.log('customPackageShuffle', customPackageShuffle)
-	console.log('customPackage', customPackage)
-
-	const { animStyle, startAnimation } = useAnimationTruthOrDare()
+	const currentStep = choiceType === ChoiceType.Truth ? stepTruth : stepDare
 
 	const getGameItemsByPackage = () => {
-		if (!packageType) return
+		if (packageType === PackageType.Custom) return
 
 		const dares = gameItems.filter(dare => dare.isDare)
 		const questions = gameItems.filter(question => !question.isDare)
-		return isTruth ? questions : dares
+		return choiceType === ChoiceType.Truth ? questions : dares
 	}
 
 	const getGameItemsByCustomPackage = () => {
@@ -65,7 +59,7 @@ export const getCurrentTruthOrDare = ({
 	}
 
 	const getCurrentItem = () => {
-		if (customType) {
+		if (packageType === PackageType.Custom) {
 			return customTruthsOrDares?.[currentStep]
 		}
 
@@ -75,6 +69,9 @@ export const getCurrentTruthOrDare = ({
 	const packageTruthsOrDares = getGameItemsByPackage()
 	const currentItem = getCurrentItem()
 
+	console.log('currentItem', currentItem)
+	console.log('customTruthsOrDares', customTruthsOrDares)
+
 	const shuffleAndSavePackage = async () => {
 		const shufflePackages = _.shuffle(packageTruthsOrDares)
 		await firestore()
@@ -82,7 +79,7 @@ export const getCurrentTruthOrDare = ({
 			.doc(packageType)
 			.update(shufflePackages)
 
-		dispatch(resetStepsByTruthOrDare(isTruth))
+		dispatch(resetStepsByTruthOrDare(choiceType))
 		dispatch(shufflePackage(packageType))
 	}
 
@@ -91,10 +88,8 @@ export const getCurrentTruthOrDare = ({
 
 		const shuffleCustom = _.shuffle(customTruthsOrDares)
 
-		console.log('newShuffle', shuffleCustom)
-
 		dispatch(shuffleCustomPackage({ customType, shuffleCustom }))
-		dispatch(resetStepsByTruthOrDare(isTruth))
+		dispatch(resetStepsByTruthOrDare(choiceType))
 
 		const savedShuffleCustom = await storageService.get(
 			StorageKey.ShuffleCustomPackage,
@@ -107,17 +102,25 @@ export const getCurrentTruthOrDare = ({
 		await storageService.set(StorageKey.ShuffleCustomPackage, newShuffled)
 	}
 
-	useEffect(() => {
-		if (packageType && currentStep === packageTruthsOrDares.length) {
-			shuffleAndSavePackage()
+	const checkIsNeedShuffle = () => {
+		if (
+			packageType === PackageType.Custom &&
+			currentStep === customTruthsOrDares.length
+		) {
+			return shuffleAndSaveCustomPackage()
 		}
 
-		if (customType && currentStep === customTruthsOrDares.length) {
-			shuffleAndSaveCustomPackage()
+		if (
+			(packageType !== PackageType.Custom && currentStep) ===
+			packageTruthsOrDares?.length
+		) {
+			shuffleAndSavePackage()
 		}
+	}
 
-		startAnimation()
+	useEffect(() => {
+		checkIsNeedShuffle()
 	}, [currentStep])
 
-	return { currentItem, animStyle }
+	return currentItem
 }

src/module/game/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './get-current-truth-dares.hook'
+export * from './use-set-steps-by-package';

src/module/game/hooks/use-set-steps-by-package.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { PackageType, StorageKey, storageService } from '~module/common'
+import { resetSteps, setStep } from '~store/slices'
+
+export const useSetStepsByPackage = (packageType: PackageType) => {
+	const dispatch = useDispatch()
+
+	const setStepsByPackage = async () => {
+		const lastSteps = await storageService.get(StorageKey.SavedSteps)
+
+		const stepsByPackage = lastSteps?.[packageType]
+
+		console.log('stepsByPackage', stepsByPackage)
+
+		if (!stepsByPackage) return dispatch(resetSteps())
+
+		dispatch(setStep(stepsByPackage))
+	}
+
+	useEffect(() => {
+		setStepsByPackage()
+	}, [])
+}

src/module/game/index.ts

@@ -1,5 +1,5 @@
 export * from './screens'
 export * from './components'
-export * from './animations';
-export * from './helper';
-export * from './config';
+export * from './animations'
+export * from './config'
+export * from './hooks'

src/module/game/screens/game.screen.tsx

@@ -10,46 +10,28 @@ import {
 	CustomType,
 	useNav,
 	PackageType,
-	StorageKey,
-	storageService,
+	ChoiceType,
 } from '../../common'
 import { useTranslation } from 'react-i18next'
 import { useIsFocused, useRoute } from '@react-navigation/native'
 import { useAnimationButton } from '../animations'
-import { resetSteps, setStep } from '~store/slices'
 import { PlayerName } from '../components/player-name.component'
-import { useDispatch } from 'react-redux'
 import { packageNameConfig } from '../config'
+import { useSetStepsByPackage } from '../hooks'
 
 interface IRouteParams {
 	packageType?: PackageType
-	isCustom?: boolean
 }
 
 export const GameScreen: FC = () => {
 	const { t, i18n } = useTranslation()
 	const nav = useNav()
 	const { params } = useRoute()
-	const dispatch = useDispatch()
-	const { packageType, isCustom }: IRouteParams = params
+	const { packageType }: IRouteParams = params
 	const isFocused = useIsFocused()
 	const { animStyle, startAnimationsBorder } = useAnimationButton()
 
-	useEffect(() => {
-		setStepsByPackage()
-	}, [])
-
-	const setStepsByPackage = async () => {
-		const lastSteps = await storageService.get(StorageKey.SavedSteps)
-
-		const typePackage = packageType ? packageType : 'custom'
-
-		const stepsByPackage = lastSteps?.[typePackage]
-
-		if (!stepsByPackage) return dispatch(resetSteps())
-
-		dispatch(setStep(stepsByPackage))
-	}
+	useSetStepsByPackage(packageType)
 
 	const randomGame = () => {
 		const isTruthRandom = Math.random() < 0.5
@@ -58,24 +40,24 @@ export const GameScreen: FC = () => {
 			: CustomType.Dares
 
 		nav.navigate(UserRouteKey.TruthOrDare, {
-			isTruth: isTruthRandom,
+			choiceType: isTruthRandom ? ChoiceType.Truth : ChoiceType.Dare,
 			packageType,
-			customType: isCustom ? customRandom : null,
+			customType: PackageType.Custom ? customRandom : null,
 		})
 	}
 
 	const onChooseTruth = () => {
 		nav.navigate(UserRouteKey.TruthOrDare, {
-			isTruth: true,
+			choiceType: ChoiceType.Truth,
 			packageType,
-			customType: isCustom && CustomType.Questions,
+			customType: PackageType.Custom && CustomType.Questions,
 		})
 	}
 
 	const onChooseDare = () => {
 		nav.navigate(UserRouteKey.TruthOrDare, {
 			packageType,
-			customType: isCustom && CustomType.Dares,
+			customType: PackageType.Custom && CustomType.Dares,
 		})
 	}
 
@@ -83,10 +65,7 @@ export const GameScreen: FC = () => {
 		<ScreenLayout
 			headerComponent={
 				<Header
-					title={
-						packageNameConfig?.[packageType]?.[i18n.language] ||
-						t('customPack.label')
-					}
+					title={packageNameConfig?.[packageType]?.[i18n.language]}
 					rightIcon="players"
 					onPressRight={() => nav.navigate(UserRouteKey.Players)}
 					gamer

src/module/game/screens/truth-or-dare.screen.tsx

@@ -12,11 +12,17 @@ import {
 	StorageKey,
 	appEvents,
 	storageService,
+	ChoiceType,
 } from '../../common'
-import { nextStep, onNextPlayer, selectStep } from '../../../store/slices'
+import {
+	addCustomItem,
+	nextStep,
+	onNextPlayer,
+	selectStep,
+} from '../../../store/slices'
 import { TruthOrDareView } from '../components'
 import { useAnimationIconsButton } from '../animations'
-import { getCurrentTruthOrDare } from '../helper'
+import { useGetCurrentTruthOrDare } from '../hooks'
 import { PlayerName } from '../components/player-name.component'
 import { packageNameConfig } from '../config'
 import { useTranslation } from 'react-i18next'
@@ -26,7 +32,7 @@ interface IRouteParams {
 	packageType?: PackageType
 	customType?: CustomType
 	currentPlayer?: string
-	isTruth?: boolean
+	choiceType?: ChoiceType
 }
 
 export const TruthOrDareScreen: React.FC = () => {
@@ -36,19 +42,50 @@ export const TruthOrDareScreen: React.FC = () => {
 	const { params } = useRoute()
 	const currentStep = useSelector(selectStep)
 	const { animRotate, animScale } = useAnimationIconsButton()
-	const { packageType, isTruth, customType }: IRouteParams = params
+	const { packageType, choiceType, customType }: IRouteParams = params
 
-	const { currentItem, animStyle } = getCurrentTruthOrDare({
-		isTruth,
+	const currentItem = useGetCurrentTruthOrDare({
+		choiceType,
 		customType,
 		packageType,
 	})
 
-	const onNextTruthOrDare = async () => {
-		nav.navigate(UserRouteKey.Game, { packageType, isCustom: customType })
+	const onNextTruthOrDare = () => {
+		nav.navigate(UserRouteKey.Game, { packageType })
 		dispatch(onNextPlayer())
-		dispatch(nextStep(isTruth))
-		await saveLastStep()
+		dispatch(nextStep(choiceType))
+		saveLastStep()
+	}
+
+	const onAddGameItemToCustomPackage = () => {
+		const customType =
+			choiceType === ChoiceType.Truth
+				? CustomType.Questions
+				: CustomType.Dares
+
+		dispatch(addCustomItem({ customType, value: currentItem }))
+	}
+
+	const onPressAddPlus = () => {
+		const subtitleByChoice =
+			choiceType === ChoiceType.Truth
+				? t('customPack.addCustomTruth')
+				: t('customPack.addCustomDare')
+
+		appEvents.emit('confirm', {
+			title: t('customPack.label'),
+			subtitle: subtitleByChoice,
+			cancelBtnText: 'No',
+			confirmBtnText: 'Yes',
+			buttons: [
+				{
+					onPress: () => null,
+				},
+				{
+					onPress: onAddGameItemToCustomPackage,
+				},
+			],
+		})
 	}
 
 	const saveLastStep = async () => {
@@ -56,12 +93,12 @@ export const TruthOrDareScreen: React.FC = () => {
 			StorageKey.SavedSteps,
 		)
 
-		const key = isTruth ? 'stepTruth' : 'stepDare'
+		const key = choiceType === ChoiceType.Truth ? 'stepTruth' : 'stepDare'
 
 		const updateSteps = { ...currentStep, [key]: currentStep[key] + 1 }
 
 		const stepsByCurrentPackage = {
-			[packageType || 'custom']: updateSteps,
+			[packageType]: updateSteps,
 		}
 
 		const saveStepsByPackage = {
@@ -69,13 +106,17 @@ export const TruthOrDareScreen: React.FC = () => {
 			...stepsByCurrentPackage,
 		}
 
-		await storageService.set(StorageKey.SavedSteps, saveStepsByPackage)
+		storageService.set(StorageKey.SavedSteps, saveStepsByPackage)
 	}
 
-	const getLimitForCrazy = async () => {
+	const handleLimitCrazy = async () => {
+		const isPurchasedCrazy = await storageService.get(StorageKey.Purchases)
+
+		if (isPurchasedCrazy) return
+
 		const limit = await storageService.get(StorageKey.LimitForCrazy)
 
-		if (!limit) return await storageService.set(StorageKey.LimitForCrazy, 1)
+		if (!limit) return storageService.set(StorageKey.LimitForCrazy, 1)
 
 		if (limit >= 5) {
 			return appEvents.emit('confirm', {
@@ -93,15 +134,15 @@ export const TruthOrDareScreen: React.FC = () => {
 			})
 		}
 
-		await storageService.set(StorageKey.LimitForCrazy, limit + 1)
+		storageService.set(StorageKey.LimitForCrazy, limit + 1)
 	}
 
 	useEffect(() => {
-		if (packageType === PackageType.Crazy) getLimitForCrazy()
-	}, [])
+		if (packageType === PackageType.Crazy) handleLimitCrazy()
+	}, [currentItem])
 
 	const onNextSameItem = () => {
-		dispatch(nextStep(isTruth))
+		dispatch(nextStep(choiceType))
 	}
 
 	return (
@@ -110,16 +151,13 @@ export const TruthOrDareScreen: React.FC = () => {
 				<Header
 					gamer
 					onPressLeft={onNextTruthOrDare}
-					title={
-						packageNameConfig?.[packageType]?.[i18n.language] ||
-						t('customPack.label')
-					}
+					title={packageNameConfig?.[packageType]?.[i18n.language]}
 				/>
 			}>
 			<View style={{ flex: 1 }}>
 				<PlayerName />
 
-				<TruthOrDareView item={currentItem} animStyle={animStyle} />
+				<TruthOrDareView item={currentItem} />
 
 				<View style={styles.buttons}>
 					<ButtonWithIcon
@@ -137,6 +175,14 @@ export const TruthOrDareScreen: React.FC = () => {
 						animation={animScale.func}
 						animStyle={animScale.style}
 					/>
+
+					<ButtonWithIcon
+						styleBtn={{ width: 101 }}
+						iconName="add-plus"
+						onPress={onPressAddPlus}
+						animation={animScale.func}
+						animStyle={animScale.style}
+					/>
 				</View>
 			</View>
 		</ScreenLayout>

src/store/slices/current-step.slice.ts

@@ -1,5 +1,6 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { RootState } from '../store'
+import { ChoiceType } from '~module/common'
 
 interface IStep {
 	stepTruth: number
@@ -21,8 +22,8 @@ export const CurrentStepSlice = createSlice({
 	name: 'currentStep',
 	initialState,
 	reducers: {
-		nextStep: (state, action: PayloadAction<boolean>) => {
-			const isTruthStep = action.payload
+		nextStep: (state, action: PayloadAction<ChoiceType>) => {
+			const isTruthStep = action.payload === ChoiceType.Truth
 
 			isTruthStep
 				? (state.step.stepTruth = state.step.stepTruth + 1)
@@ -31,8 +32,8 @@ export const CurrentStepSlice = createSlice({
 		setStep: (state, action: PayloadAction<IStep>) => {
 			state.step = action.payload
 		},
-		resetStepsByTruthOrDare: (state, action: PayloadAction<boolean>) => {
-			const isResetForTruth = action.payload
+		resetStepsByTruthOrDare: (state, action: PayloadAction<ChoiceType>) => {
+			const isResetForTruth = action.payload === ChoiceType.Truth
 
 			isResetForTruth
 				? (state.step.stepTruth = 0)

src/store/slices/custom-package.slice.ts

@@ -47,20 +47,43 @@ export const customPackageSlice = createSlice({
 	name: 'customPackage',
 	initialState,
 	reducers: {
-		shuffleCustomPackage: (state, action: PayloadAction<any>) => {
+		shuffleCustomPackage: (
+			state,
+			action: PayloadAction<{
+				shuffleCustom: string[]
+				customType: CustomType
+			}>,
+		) => {
 			const shuffleItems = action.payload.shuffleCustom
-			const customType = action.payload.customType as CustomType
-
-			console.log('redux', shuffleItems, customType)
+			const customType = action.payload.customType
 
 			state.shuffleCustom[customType] = shuffleItems
 		},
-		setQuestions: (state, action: PayloadAction<string[]>) => {
-			const updateCustomPackage = {
-				...state.customPackage,
-				questions: action.payload,
-			}
-			state.customPackage = updateCustomPackage
+		addCustomItem: (
+			state,
+			action: PayloadAction<{ customType: CustomType; value: string }>,
+		) => {
+			const customType = action.payload.customType
+			const newGameItem = action.payload.value
+
+			const newGameItems = [
+				...state.customPackage[customType],
+				newGameItem,
+			]
+
+			state.customPackage[customType] = newGameItems
+		},
+		deleteCustomItem: (
+			state,
+			action: PayloadAction<{ customType: CustomType; id: number }>,
+		) => {
+			const customType = action.payload.customType
+			const id = action.payload.id
+
+			const newCustomItems = state.customPackage[customType].filter(
+				(it, index) => index !== id,
+			)
+			state.customPackage[customType] = newCustomItems
 		},
 		setDares: (state, action: PayloadAction<string[]>) => {
 			const updateCustomPackage = {
@@ -89,8 +112,8 @@ export const customPackageSlice = createSlice({
 })
 
 export const {
-	setQuestions,
-	setDares,
+	deleteCustomItem,
+	addCustomItem,
 	updateCustomPackageFromStore,
 	updateCustomPackage,
 	shuffleCustomPackage,

src/store/slices/game-items.slice.ts

@@ -8,6 +8,7 @@ export interface GameItemsState {
 	[PackageType.Under18]: GameItem[]
 	[PackageType.Light]: GameItem[]
 	[PackageType.Crazy]: GameItem[]
+	[PackageType.Custom]: GameItem[]
 	loaded: boolean
 	hasError: boolean
 }
@@ -16,6 +17,7 @@ const initialState: GameItemsState = {
 	under18: [],
 	light: [],
 	crazy: [],
+	custom: [],
 	loaded: false,
 	hasError: false,
 }
@@ -23,7 +25,6 @@ const initialState: GameItemsState = {
 export const getGameItemsFromFirestore = createAsyncThunk(
 	'game-items/get-from-firestore',
 	async () => {
-		// await firestore().collection('content').doc('light').set(data)
 		const jsonResponse = await firestore().collection('content').get()
 		const data = jsonResponse.docs.map(it => it.data())