From b37ceb3c1f987714d5afb4ef02bf43ac7b3f201b Mon Sep 17 00:00:00 2001 From: TomarJatin Date: Sat, 21 Oct 2023 10:22:29 +0530 Subject: [PATCH] redux implementation done --- App.js | 6 --- components/Navbar.tsx | 5 +- components/Topbar.tsx | 10 ++-- contexts/SettingsContext.js | 94 ----------------------------------- contexts/ThemeContext.js | 58 --------------------- contexts/VerseContext.js | 31 ------------ redux/slices/SettingsSlice.js | 56 +++++++++++++++++++-- screens/AudioBook.tsx | 4 +- screens/Bookmarked.tsx | 6 +-- screens/Chapter.tsx | 15 +++--- screens/Home.tsx | 6 +-- screens/Quotes.tsx | 10 ++-- screens/Settings.tsx | 63 ++++++++++++++++++----- screens/Verse.tsx | 20 +++++--- 14 files changed, 138 insertions(+), 246 deletions(-) delete mode 100644 contexts/SettingsContext.js delete mode 100644 contexts/ThemeContext.js delete mode 100644 contexts/VerseContext.js diff --git a/App.js b/App.js index e0aa7c9..c64fac4 100644 --- a/App.js +++ b/App.js @@ -9,11 +9,9 @@ import { Inter_300Light, } from "@expo-google-fonts/inter"; import Route from "./navigation/home"; -import { ThemeProvider } from "./contexts/ThemeContext"; import { Provider } from "react-redux"; import store from "./redux/store"; import { SaveForLaterProvider } from "./contexts/SaveForLaterContext"; -import { SettingsProvider } from "./contexts/SettingsContext"; import "expo-dev-client"; function App() { @@ -32,13 +30,9 @@ function App() { return ( - - - - ); } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index d8dd5a9..2b2722a 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -3,15 +3,14 @@ import { View, Text, Dimensions, TouchableOpacity } from "react-native"; import { Entypo } from "@expo/vector-icons"; import { MaterialIcons } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +import { useSelector } from "react-redux"; import { FontSize, color } from "../GlobalStyles"; import { useNavigation } from "@react-navigation/core"; -import { ThemeContext } from "../contexts/ThemeContext"; export default function Navbar(props: { nav: string }) { const navigation = useNavigation(); - const {theme} = useContext(ThemeContext); + const theme = useSelector((state: any) => state.theme.theme); const Color = color(theme); return ( diff --git a/components/Topbar.tsx b/components/Topbar.tsx index 78f6d95..4dbbec3 100644 --- a/components/Topbar.tsx +++ b/components/Topbar.tsx @@ -1,18 +1,16 @@ -import React, { useContext } from "react"; +import React from "react"; import { Text, View } from "react-native"; -import { Image } from "expo-image"; -import { ThemeContext } from "../contexts/ThemeContext"; import { icons } from "../styles/Icon"; import { FontSize, color } from "../GlobalStyles"; import { useNavigation } from "@react-navigation/core"; +import { useSelector } from "react-redux"; import { TouchableOpacity } from "react-native-gesture-handler"; import { translations } from "../translations/main"; -import { SettingsContext } from "../contexts/SettingsContext"; import { Feather } from '@expo/vector-icons'; export default function Topbar() { - const {theme} = useContext(ThemeContext); - const {language} = useContext(SettingsContext); + const theme = useSelector((state: any) => state.theme.theme); + const language = useSelector((state: any) => state.settings.language); const Color = color(theme); const Icons = icons(theme); const navigation = useNavigation(); diff --git a/contexts/SettingsContext.js b/contexts/SettingsContext.js deleted file mode 100644 index e6ff8c7..0000000 --- a/contexts/SettingsContext.js +++ /dev/null @@ -1,94 +0,0 @@ -import React, { createContext, useState, useEffect, useCallback } from "react"; -import axios from "axios"; -import AsyncStorage from "@react-native-async-storage/async-storage"; -import Toast from "react-native-simple-toast"; -// import FormData from "form-data"; - -// Define the context -const SettingsContext = createContext(); - -// Data Provider component -const SettingsProvider = ({ children }) => { - const [language, setLanguage] = useState("english"); - const [commentryOn, setCommentryOn] = useState(true); - const [wordMeaningOn, setWordMeaningOn] = useState(true); - const [translationOn, setTranslationOn] = useState(true); - const [transliteration, setTransliterationOn] = useState(true); - const [authorsList, setAuthorsList] = useState([]); - const allTranslationsAuthors = [ - { - author_name: "Swami Adidevananda", - language: "english", - }, - { - author_name: "Swami Gambirananda", - language: "english", - }, - { - author_name: "Swami Ramsukhdas", - language: "hindi", - }, - { - author_name: "Swami Tejomayananda", - language: "hindi", - }, - { - author_name: "Swami Sivananda", - language: "english", - }, - { - author_name: "Dr. S. Sankaranarayan", - language: "english", - }, - { - author_name: "Shri Purohit Swami", - language: "english", - }, - ]; - - const handleAutoAuthorListFill = (_language) => { - const _list = allTranslationsAuthors.filter((item) => (item.language === _language)) - setAuthorsList([..._list]); - } - - const handleSwitchButtonChange = (value, key) => { - switch(key){ - case "commentry": setCommentryOn(value); return; - case "translation" : setTranslationOn(value); return; - case "word meaining": setWordMeaningOn(value); return; - case "transliteration": setTransliterationOn(value); return; - } - } - - useEffect(() => { - console.log("settings context changed ========================"); - }); - - useEffect(() => { - handleAutoAuthorListFill(language); - }, []) - - - return ( - - {children} - - ); -}; - -export { SettingsContext, SettingsProvider }; \ No newline at end of file diff --git a/contexts/ThemeContext.js b/contexts/ThemeContext.js deleted file mode 100644 index 34481ab..0000000 --- a/contexts/ThemeContext.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { createContext, useState, useEffect, useCallback } from "react"; -import axios from "axios"; -import AsyncStorage from "@react-native-async-storage/async-storage"; -import Toast from "react-native-simple-toast"; -// import FormData from "form-data"; - -// Define the context -const ThemeContext = createContext(); - -// Data Provider component -const ThemeProvider = ({ children }) => { - const [theme, setTheme] = useState("light"); - - const getTheme = useCallback(async () => { - const _theme = await AsyncStorage.getItem("theme"); - if(_theme){ - setTheme(_theme) - } - }, []); - - const changeTheme = useCallback(async () => { - if(theme === 'light'){ - await AsyncStorage.setItem( - "theme", - 'dark' - ); - setTheme('dark'); - } - else{ - await AsyncStorage.setItem( - "theme", - 'light' - ); - setTheme('light'); - } - }, [theme]) - - useEffect(() => { - console.log("theme context changed ========================"); - }); - - const ctx = React.useMemo(() => ({ - theme, - setTheme, - getTheme, - changeTheme - }), [theme]); - - return ( - - {children} - - ); -}; - -export { ThemeContext, ThemeProvider }; \ No newline at end of file diff --git a/contexts/VerseContext.js b/contexts/VerseContext.js deleted file mode 100644 index 8834220..0000000 --- a/contexts/VerseContext.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, { createContext, useState, useEffect, useCallback } from "react"; -import axios from "axios"; -import AsyncStorage from "@react-native-async-storage/async-storage"; -import Toast from "react-native-simple-toast"; -// import FormData from "form-data"; - -// Define the context -const VerseContext = createContext(); - -// Data Provider component -const VerseProvider = ({ children }) => { - const [selectedVerse, setSelectedVerse] = useState(0); - - useEffect(() => { - console.log("chapter context changed ========================"); - }); - - - return ( - - {children} - - ); -}; - -export { VerseContext, VerseProvider }; \ No newline at end of file diff --git a/redux/slices/SettingsSlice.js b/redux/slices/SettingsSlice.js index 47b49f5..0d31524 100644 --- a/redux/slices/SettingsSlice.js +++ b/redux/slices/SettingsSlice.js @@ -5,11 +5,61 @@ const settingsSlice = createSlice({ initialState: { language: "english", commentryOn: true, - wordMeaningOn: true, + wordMeaningOn: false, translationOn: true, transliteration: true, - authorsList: [], - allTranslationsAuthors: [], + authorsList: [ + { + author_name: "Swami Adidevananda", + language: "english", + }, + { + author_name: "Swami Gambirananda", + language: "english", + }, + { + author_name: "Swami Sivananda", + language: "english", + }, + { + author_name: "Dr. S. Sankaranarayan", + language: "english", + }, + { + author_name: "Shri Purohit Swami", + language: "english", + }, + ], + allTranslationsAuthors: [ + { + author_name: "Swami Adidevananda", + language: "english", + }, + { + author_name: "Swami Gambirananda", + language: "english", + }, + { + author_name: "Swami Ramsukhdas", + language: "hindi", + }, + { + author_name: "Swami Tejomayananda", + language: "hindi", + }, + { + author_name: "Swami Sivananda", + language: "english", + }, + { + author_name: "Dr. S. Sankaranarayan", + language: "english", + }, + { + author_name: "Shri Purohit Swami", + language: "english", + }, + ], }, reducers: { setLanguage(state, action) { diff --git a/screens/AudioBook.tsx b/screens/AudioBook.tsx index e8b45e6..a65a680 100644 --- a/screens/AudioBook.tsx +++ b/screens/AudioBook.tsx @@ -8,7 +8,7 @@ import { } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import Navbar from "../components/Navbar"; -import { ThemeContext } from "../contexts/ThemeContext"; +import { useSelector } from "react-redux"; import { FontSize, color } from "../GlobalStyles"; import { Audio } from "expo-av"; import storage from "@react-native-firebase/storage"; @@ -29,7 +29,7 @@ export default function AudioBook({ navigation }) { const [currentPosition, setCurrentPosition] = useState(null); const [totalDuration, setTotalDuration] = useState(null); const [sliderValue, setSliderValue] = useState(0); - const { theme } = useContext(ThemeContext); + const theme = useSelector((state: any) => state.theme.theme); const Color = color(theme); useEffect(() => { diff --git a/screens/Bookmarked.tsx b/screens/Bookmarked.tsx index 23894fc..5aebd51 100644 --- a/screens/Bookmarked.tsx +++ b/screens/Bookmarked.tsx @@ -2,11 +2,9 @@ import React, { useContext } from 'react'; import { View, Text, FlatList, TouchableOpacity, Dimensions } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import Navbar from "../components/Navbar"; -import { ThemeContext } from "../contexts/ThemeContext"; import { FontSize, color } from "../GlobalStyles"; import { Image } from "expo-image"; import { SaveForLaterContext } from '../contexts/SaveForLaterContext'; -import { SettingsContext } from '../contexts/SettingsContext'; import { translations } from "../translations/main"; import { Entypo } from '@expo/vector-icons'; import { useDispatch, useSelector } from "react-redux"; @@ -14,10 +12,10 @@ import { setSelectedChapter } from "../redux/slices/ChapterSlice"; import { setSelectedVerse } from "../redux/slices/VerseSlice"; export default function Bookmarked({navigation}) { - const { theme } = useContext(ThemeContext); + const theme = useSelector((state: any) => state.theme.theme); const dispatch = useDispatch(); const {saveForLater} = useContext(SaveForLaterContext); - const {language} = useContext(SettingsContext); + const language = useSelector((state: any) => state.settings.language); const Color = color(theme); const handleSetSelectedChapter = (chapter: any) => { diff --git a/screens/Chapter.tsx b/screens/Chapter.tsx index e4fe605..ace1f81 100644 --- a/screens/Chapter.tsx +++ b/screens/Chapter.tsx @@ -11,7 +11,6 @@ import { SafeAreaView } from "react-native-safe-area-context"; import Topbar from "../components/Topbar"; import Navbar from "../components/Navbar"; import { useContext } from "react"; -import { ThemeContext } from "../contexts/ThemeContext"; import GestureRecognizer from 'react-native-swipe-gestures'; import { FontSize, color } from "../GlobalStyles"; import { Image } from "expo-image"; @@ -19,18 +18,16 @@ import { icons } from "../styles/Icon"; import { FlatList } from "react-native-gesture-handler"; import { Chapters } from "../data/chapters"; import { Verses } from "../data/verses"; -import { VerseContext } from "../contexts/VerseContext"; import { translations } from "../translations/main"; -import { SettingsContext } from "../contexts/SettingsContext"; import { useDispatch, useSelector } from "react-redux"; import { setSelectedChapter } from "../redux/slices/ChapterSlice"; +import { setSelectedVerse } from "../redux/slices/VerseSlice"; export default function Chapter({ navigation }) { - const { theme } = useContext(ThemeContext); + const theme = useSelector((state: any) => state.theme.theme); const dispatch = useDispatch(); const selectedChapter = useSelector((state: any) => state.chapter.selectedChapter); - const { setSelectedVerse } = useContext(VerseContext); - const {language} = useContext(SettingsContext); + const language = useSelector((state: any) => state.settings.language); const Color = color(theme); const Icons = icons(theme); @@ -56,6 +53,10 @@ export default function Chapter({ navigation }) { dispatch(setSelectedChapter(chapter)); }; + const handleSetSelectedVerses = (verse: any) => { + dispatch(setSelectedVerse(verse)); + }; + const config = { velocityThreshold: 0.3, directionalOffsetThreshold: 80, @@ -157,7 +158,7 @@ export default function Chapter({ navigation }) { renderItem={({ item, index }) => ( { - setSelectedVerse(item?.verse_number); + handleSetSelectedVerses(item?.verse_number); navigation.navigate("Verse"); }} diff --git a/screens/Home.tsx b/screens/Home.tsx index 522a5a5..93670f2 100644 --- a/screens/Home.tsx +++ b/screens/Home.tsx @@ -11,21 +11,19 @@ import { SafeAreaView } from "react-native-safe-area-context"; import Topbar from "../components/Topbar"; import Navbar from "../components/Navbar"; import { useContext } from "react"; -import { ThemeContext } from "../contexts/ThemeContext"; import { FontSize, color } from "../GlobalStyles"; import { Image } from "expo-image"; import { icons } from "../styles/Icon"; import { translations } from "../translations/main"; import { FlatList } from "react-native-gesture-handler"; import { Chapters } from "../data/chapters"; -import { SettingsContext } from "../contexts/SettingsContext"; import { useDispatch, useSelector } from "react-redux"; import { setSelectedChapter } from "../redux/slices/ChapterSlice"; import Carousel from "react-native-reanimated-carousel"; export default function HomeScreen({ navigation }) { - const { theme } = useContext(ThemeContext); - const { language } = useContext(SettingsContext); + const theme = useSelector((state: any) => state.theme.theme); + const language = useSelector((state: any) => state.settings.language); const dispatch = useDispatch(); const Color = color(theme); const Icons = icons(theme); diff --git a/screens/Quotes.tsx b/screens/Quotes.tsx index fbebb7e..46fda7c 100644 --- a/screens/Quotes.tsx +++ b/screens/Quotes.tsx @@ -2,23 +2,19 @@ import React, { useContext, useEffect, useState } from 'react'; import { View, Text, FlatList, TouchableOpacity, Dimensions, ImageBackground } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import Navbar from "../components/Navbar"; -import { ThemeContext } from "../contexts/ThemeContext"; +import { useDispatch, useSelector } from "react-redux"; import { FontSize, color } from "../GlobalStyles"; import { Image } from "expo-image"; import { SaveForLaterContext } from '../contexts/SaveForLaterContext'; -import { SettingsContext } from '../contexts/SettingsContext'; import { FontAwesome } from '@expo/vector-icons'; -import { VerseContext } from '../contexts/VerseContext'; -import { translations } from "../translations/main"; -import { Entypo } from '@expo/vector-icons'; import { backgroundWallpaper } from '../data/backgroundWallpaper'; import { bhagavadGitaQuotes } from '../data/quotes'; import GestureRecognizer from 'react-native-swipe-gestures'; export default function Quotes({ navigation }) { const [currIdx, setCurrIdx] = useState(0); - const { theme } = useContext(ThemeContext); - const { language } = useContext(SettingsContext); + const theme = useSelector((state: any) => state.theme.theme); + const language = useSelector((state: any) => state.settings.language); const Color = color(theme); const onSwipeLeft = () => { diff --git a/screens/Settings.tsx b/screens/Settings.tsx index 5d055b2..4c81042 100644 --- a/screens/Settings.tsx +++ b/screens/Settings.tsx @@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity, Switch } from "react-native"; import { Image } from "expo-image"; import { FlatList } from "react-native-gesture-handler"; import { SafeAreaView } from "react-native-safe-area-context"; -import { ThemeContext } from "../contexts/ThemeContext"; +import { useDispatch, useSelector } from "react-redux"; import { FontSize, color } from "../GlobalStyles"; import { icons } from "../styles/Icon"; import Modal from "react-native-modal"; @@ -13,10 +13,16 @@ import { Entypo } from "@expo/vector-icons"; import Ionicons from "@expo/vector-icons/Ionicons"; import { FontAwesome5 } from "@expo/vector-icons"; import { FontAwesome } from "@expo/vector-icons"; -import { SettingsContext } from "../contexts/SettingsContext"; +import {setLanguage, + setCommentryOn, + setWordMeaningOn, + setTranslationOn, + setTransliterationOn, + setAuthorsList,} from "../redux/slices/SettingsSlice"; export default function Settings({ navigation }) { - const { theme } = useContext(ThemeContext); + const dispatch = useDispatch(); + const theme = useSelector((state: any) => state.theme.theme); const { language, commentryOn, @@ -24,12 +30,8 @@ export default function Settings({ navigation }) { transliteration, authorsList, wordMeaningOn, - setLanguage, - handleAutoAuthorListFill, - handleSwitchButtonChange, - setAuthorsList, - allTranslationsAuthors, - } = useContext(SettingsContext); + allTranslationsAuthors + } = useSelector((state: any) => state.settings); const [open, setOpen] = useState(""); const Color = color(theme); const Icons = icons(theme); @@ -50,6 +52,41 @@ export default function Settings({ navigation }) { ); }; + const handleSetCommentryOn = (value: any) => { + dispatch(setCommentryOn(value)); + }; + const handleSetWordMeaningOn = (value: any) => { + dispatch(setWordMeaningOn(value)); + }; + const handleSetTranslationOn = (value: any) => { + dispatch(setTranslationOn(value)); + }; + const handleSetTransliterationOn = (value: any) => { + dispatch(setTransliterationOn(value)); + }; + + const handleSetAuthorsList = (value: any) => { + dispatch(setAuthorsList(value)); + }; + + const handleSetLanguage = (value: any) => { + dispatch(setLanguage(value)); + }; + + const handleSwitchButtonChange = (value, key) => { + switch(key){ + case "commentry": handleSetCommentryOn(value); return; + case "translation" : handleSetTranslationOn(value); return; + case "word meaining": handleSetWordMeaningOn(value); return; + case "transliteration": handleSetTransliterationOn(value); return; + } + } + + const handleAutoAuthorListFill = (_language: string) => { + const _list = allTranslationsAuthors.filter((item) => (item.language === _language)) + handleSetAuthorsList([..._list]); + } + return ( <> @@ -427,11 +464,11 @@ export default function Settings({ navigation }) { const index = findSelectedAuthorIndex(item); const _list = authorsList; _list.splice(index, 1); - setAuthorsList([..._list]); + handleSetAuthorsList([..._list]); } else { const _list = authorsList; _list.push(item); - setAuthorsList([..._list]); + handleSetAuthorsList([..._list]); } }} activeOpacity={0.7} @@ -477,7 +514,7 @@ export default function Settings({ navigation }) { > { - setLanguage("english"); + handleSetLanguage("english"); handleAutoAuthorListFill("english"); }} activeOpacity={0.7} @@ -513,7 +550,7 @@ export default function Settings({ navigation }) { { - setLanguage("hindi"); + handleSetLanguage("hindi"); handleAutoAuthorListFill("hindi"); }} activeOpacity={0.7} diff --git a/screens/Verse.tsx b/screens/Verse.tsx index 11b5c73..ce7c8df 100644 --- a/screens/Verse.tsx +++ b/screens/Verse.tsx @@ -14,18 +14,16 @@ import { useContext } from "react"; import GestureRecognizer from 'react-native-swipe-gestures'; import { Feather } from "@expo/vector-icons"; import { FontAwesome } from "@expo/vector-icons"; -import { ThemeContext } from "../contexts/ThemeContext"; import { FontSize, color } from "../GlobalStyles"; import { Image } from "expo-image"; import { icons } from "../styles/Icon"; import { FlatList } from "react-native-gesture-handler"; import { Chapters } from "../data/chapters"; import { Verses } from "../data/verses"; -import { VerseContext } from "../contexts/VerseContext"; import { translations } from "../translations/main"; -import { SettingsContext } from "../contexts/SettingsContext"; import { SaveForLaterContext } from "../contexts/SaveForLaterContext"; import { useDispatch, useSelector } from "react-redux"; +import { setSelectedVerse } from "../redux/slices/VerseSlice"; type translationType = { id: number; @@ -35,11 +33,11 @@ type translationType = { }; export default function Verse({ navigation }) { - const { theme } = useContext(ThemeContext); + const theme = useSelector((state: any) => state.theme.theme); const dispatch = useDispatch(); const { saveForLater, setSaveForLater, setSaveForLaterStorage } = useContext(SaveForLaterContext); const selectedChapter = useSelector((state: any) => state.chapter.selectedChapter); - const { selectedVerse, setSelectedVerse } = useContext(VerseContext); + const selectedVerse = useSelector((state: any) => state.verse.selectedVerse); const { language, commentryOn, @@ -47,22 +45,28 @@ export default function Verse({ navigation }) { transliteration, authorsList, wordMeaningOn, - } = useContext(SettingsContext); + } = useSelector((state: any) => state.settings); const Color = color(theme); const Icons = icons(theme); + const handleSetSelectedVerses = (verse: any) => { + dispatch(setSelectedVerse(verse)); + }; + const onSwipeLeft = () => { if (selectedVerse < Verses[selectedChapter].length) { - setSelectedVerse(selectedVerse + 1); + handleSetSelectedVerses(selectedVerse + 1); } }; const onSwipeRight = () => { if (selectedVerse > 1) { - setSelectedVerse(selectedVerse - 1); + handleSetSelectedVerses(selectedVerse - 1); } }; + + const config = { velocityThreshold: 0.3, directionalOffsetThreshold: 80,