Skip to content

Commit

Permalink
Merge pull request #30 from Gauravjeetsingh/add-sidebar-menu
Browse files Browse the repository at this point in the history
Add sidebar menu with larivaar assist option
  • Loading branch information
Gauravjeetsingh authored Aug 9, 2023
2 parents 9f97eb8 + 44d304e commit ac01264
Show file tree
Hide file tree
Showing 13 changed files with 586 additions and 70 deletions.
76 changes: 15 additions & 61 deletions App.tsx
Original file line number Diff line number Diff line change
@@ -1,73 +1,27 @@
import React, {useRef, useState} from 'react';
import {
Button,
SafeAreaView,
ScrollView,
StatusBar,
Switch,
TextInput,
useColorScheme,
View,
} from 'react-native';
import React, {useState} from 'react';
import 'react-native-gesture-handler';

import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

import Ang from './components/Ang';
import {layoutStyles} from './styles/layout';
import {elementStyles} from './styles/elements';
import {Launchpad, Settings} from './components';
import {LarivaarContext} from './context';

const App = (): JSX.Element => {
const isDarkMode = useColorScheme() === 'dark';
const textInputRef = useRef<TextInput>(null);
const Drawer = createDrawerNavigator();

const [inputAng, setInputAng] = useState(1);
const App = (): JSX.Element => {
const [larivaarAssist, setLarivaarAssist] = useState(false);

const value = {larivaarAssist, setLarivaarAssist};
return (
<SafeAreaView>
<LarivaarContext.Provider value={value}>
<NavigationContainer>
<Switch
value={larivaarAssist}
onValueChange={() => setLarivaarAssist(!larivaarAssist)}
/>
<Drawer.Navigator
// eslint-disable-next-line react/no-unstable-nested-components
drawerContent={props => <Settings {...props} />}>
<Drawer.Screen name="Learn Larivaar" component={Launchpad} />
</Drawer.Navigator>
</NavigationContainer>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View style={layoutStyles.mainContainer}>
<View style={layoutStyles.header}>
<Button
title="Previous"
onPress={() => {
setInputAng(inputAng - 1);
textInputRef.current?.setNativeProps({
text: (inputAng - 1).toString(),
});
}}
/>
<TextInput
placeholder="Enter Ang Number"
ref={textInputRef}
style={elementStyles.input}
defaultValue={inputAng.toString()}
onSubmitEditing={event => {
setInputAng(parseInt(event.nativeEvent.text, 10));
}}
/>
<Button
title="Next"
onPress={() => {
setInputAng(inputAng + 1);
textInputRef.current?.setNativeProps({
text: (inputAng + 1).toString(),
});
}}
/>
</View>

<Ang page={inputAng} larivaarAssist={larivaarAssist} />
</View>
</ScrollView>
</SafeAreaView>
</LarivaarContext.Provider>
);
};

Expand Down
1 change: 1 addition & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
6 changes: 4 additions & 2 deletions components/Ang/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React, {useEffect, useState} from 'react';
import React, {useContext, useEffect, useState} from 'react';
import {View} from 'react-native';
import {AngProps, AngData} from './interfaces';
import {layoutStyles} from '../../styles/layout';
import {bake} from './utils/bakePankti';
import {LarivaarContext} from '../../context';

const Ang = (props: AngProps): JSX.Element => {
const [currentAngData, setCurrentAngData] = useState({} as AngData);
const {larivaarAssist} = useContext(LarivaarContext);

useEffect(() => {
fetch(`https://api.banidb.com/v2/angs/${props.page}`)
Expand All @@ -17,7 +19,7 @@ const Ang = (props: AngProps): JSX.Element => {
<View style={layoutStyles.wordContainer}>
{currentAngData.page &&
currentAngData.page.map(page =>
bake(page.verse.unicode, props.larivaarAssist),
bake(page.verse.unicode, larivaarAssist),
)}
</View>
);
Expand Down
1 change: 0 additions & 1 deletion components/Ang/interfaces/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export interface AngProps {
page: number;
larivaarAssist: boolean;
}

export interface AngData {
Expand Down
63 changes: 63 additions & 0 deletions components/Launchpad/lauchpad.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, {useRef, useState} from 'react';
import 'react-native-gesture-handler';
import {
Button,
SafeAreaView,
ScrollView,
StatusBar,
TextInput,
useColorScheme,
View,
} from 'react-native';

import {Ang} from '../../components';
import {layoutStyles, elementStyles} from '../../styles';

const Launchpad = (): JSX.Element => {
const isDarkMode = useColorScheme() === 'dark';
const textInputRef = useRef<TextInput>(null);

const [inputAng, setInputAng] = useState(1);
return (
<SafeAreaView>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View style={layoutStyles.mainContainer}>
<View style={layoutStyles.header}>
<Button
title="Previous"
onPress={() => {
setInputAng(inputAng - 1);
textInputRef.current?.setNativeProps({
text: (inputAng - 1).toString(),
});
}}
/>
<TextInput
placeholder="Enter Ang Number"
ref={textInputRef}
style={elementStyles.input}
defaultValue={inputAng.toString()}
onSubmitEditing={event => {
setInputAng(parseInt(event.nativeEvent.text, 10));
}}
/>
<Button
title="Next"
onPress={() => {
setInputAng(inputAng + 1);
textInputRef.current?.setNativeProps({
text: (inputAng + 1).toString(),
});
}}
/>
</View>

<Ang page={inputAng} />
</View>
</ScrollView>
</SafeAreaView>
);
};

export default Launchpad;
28 changes: 28 additions & 0 deletions components/Settings/setting.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, {useContext} from 'react';
import {View, Text, Switch, Button} from 'react-native';
import {layoutStyles} from '../../styles/layout';
import {LarivaarContext} from '../../context';

interface navigationProps {
navigation: {
closeDrawer: () => void;
};
}

const Settings = ({navigation}: navigationProps): JSX.Element => {
const {larivaarAssist, setLarivaarAssist} = useContext(LarivaarContext);
return (
<>
<View style={layoutStyles.sidebar}>
<Text>Larivaar Assist</Text>
<Switch
value={larivaarAssist}
onChange={() => setLarivaarAssist(!larivaarAssist)}
/>
</View>
<Button title="Go Back" onPress={() => navigation.closeDrawer()} />
</>
);
};

export default Settings;
5 changes: 5 additions & 0 deletions components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Ang from './Ang';
import Settings from './Settings/setting';
import Launchpad from './Launchpad/lauchpad';

export {Ang, Settings, Launchpad};
6 changes: 6 additions & 0 deletions context/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {createContext} from 'react';

export const LarivaarContext = createContext({
larivaarAssist: false,
setLarivaarAssist: (_larivaarAssist: boolean) => {},
});
62 changes: 62 additions & 0 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,12 @@ PODS:
- React-jsinspector (0.71.10)
- React-logger (0.71.10):
- glog
- react-native-safe-area-context (4.5.3):
- RCT-Folly
- RCTRequired
- RCTTypeSafety
- React-Core
- ReactCommon/turbomodule/core
- React-perflogger (0.71.10)
- React-RCTActionSheet (0.71.10):
- React-Core/RCTActionSheetHeaders (= 0.71.10)
Expand Down Expand Up @@ -413,6 +419,42 @@ PODS:
- React-jsi (= 0.71.10)
- React-logger (= 0.71.10)
- React-perflogger (= 0.71.10)
- RNCMaskedView (0.1.11):
- React
- RNGestureHandler (2.12.0):
- React-Core
- RNReanimated (3.3.0):
- DoubleConversion
- FBLazyVector
- FBReactNativeSpec
- glog
- hermes-engine
- RCT-Folly
- RCTRequired
- RCTTypeSafety
- React-callinvoker
- React-Core
- React-Core/DevSupport
- React-Core/RCTWebSocket
- React-CoreModules
- React-cxxreact
- React-hermes
- React-jsi
- React-jsiexecutor
- React-jsinspector
- React-RCTActionSheet
- React-RCTAnimation
- React-RCTBlob
- React-RCTImage
- React-RCTLinking
- React-RCTNetwork
- React-RCTSettings
- React-RCTText
- ReactCommon/turbomodule/core
- Yoga
- RNScreens (3.20.0):
- React-Core
- React-RCTImage
- SocketRocket (0.6.0)
- Yoga (1.14.0)
- YogaKit (1.18.1):
Expand Down Expand Up @@ -464,6 +506,7 @@ DEPENDENCIES:
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
Expand All @@ -477,6 +520,10 @@ DEPENDENCIES:
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
- React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
- RNScreens (from `../node_modules/react-native-screens`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)

SPEC REPOS:
Expand Down Expand Up @@ -538,6 +585,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
React-logger:
:path: "../node_modules/react-native/ReactCommon/logger"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
React-perflogger:
:path: "../node_modules/react-native/ReactCommon/reactperflogger"
React-RCTActionSheet:
Expand All @@ -564,6 +613,14 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
ReactCommon:
:path: "../node_modules/react-native/ReactCommon"
RNCMaskedView:
:path: "../node_modules/@react-native-community/masked-view"
RNGestureHandler:
:path: "../node_modules/react-native-gesture-handler"
RNReanimated:
:path: "../node_modules/react-native-reanimated"
RNScreens:
:path: "../node_modules/react-native-screens"
Yoga:
:path: "../node_modules/react-native/ReactCommon/yoga"

Expand Down Expand Up @@ -601,6 +658,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: 4bb480a183a354e4dbfb1012936b1a2bb9357de7
React-jsinspector: cdc854f8b13abd202afa54bc12578e5afb9cfae1
React-logger: ef2269b3afa6ba868da90496c3e17a4ec4f4cee0
react-native-safe-area-context: b8979f5eda6ed5903d4dbc885be3846ea3daa753
React-perflogger: 217095464d5c4bb70df0742fa86bf2a363693468
React-RCTActionSheet: 8deae9b85a4cbc6a2243618ea62a374880a2c614
React-RCTAnimation: 59c62353a8b59ce206044786c5d30e4754bffa64
Expand All @@ -614,6 +672,10 @@ SPEC CHECKSUMS:
React-RCTVibration: d13cc2d63286c633393d3a7f6f607cc2a09ec011
React-runtimeexecutor: a9a1cd79996c9a0846e3232ecb25c64e1cc0172e
ReactCommon: 65718685d4095d06b4b1af8042e12f1df2925c31
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
RNGestureHandler: dec4645026e7401a0899f2846d864403478ff6a5
RNReanimated: 9976fbaaeb8a188c36026154c844bf374b3b7eeb
RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
Yoga: e7ea9e590e27460d28911403b894722354d73479
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
Expand Down
Loading

0 comments on commit ac01264

Please sign in to comment.