Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 9 additions & 45 deletions packages/RNTester/js/RNTesterApp.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ const RNTesterActions = require('./utils/RNTesterActions');
const RNTesterExampleContainer = require('./components/RNTesterExampleContainer');
const RNTesterExampleList = require('./components/RNTesterExampleList');
const RNTesterList = require('./utils/RNTesterList');
const RNTesterNavigationReducer = require('./utils/RNTesterNavigationReducer');
const React = require('react');
const URIActionMap = require('./utils/URIActionMap');

// const nativeImageSource = require('react-native');

Expand All @@ -25,17 +23,13 @@ const {
BackHandler,
Dimensions,
DrawerLayoutAndroid,
Image,
Linking,
StatusBar,
StyleSheet,
Text,
TouchableWithoutFeedback,
UIManager,
useColorScheme,
View,
} = require('react-native');
import AsyncStorage from '@react-native-community/async-storage';

import type {RNTesterExample} from './types/RNTesterTypes';
import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
Expand All @@ -48,7 +42,10 @@ const DRAWER_WIDTH_LEFT = 56;

type Props = {exampleFromAppetizeParams?: ?string, ...};

const APP_STATE_KEY = 'RNTesterAppState.v2';
import {
handleNavigation,
initializeInitialState,
} from './utils/StateManagement';

// const HEADER_NAV_ICON = nativeImageSource({
// android: 'ic_menu_black_24dp',
Expand Down Expand Up @@ -177,26 +174,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
}

componentDidMount() {
Linking.getInitialURL().then((url) => {
AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
const exampleAction = URIActionMap(
this.props.exampleFromAppetizeParams,
);
const urlAction = URIActionMap(url);
const launchAction = exampleAction || urlAction;
if (err || !storedString) {
const initialAction = launchAction || {type: 'InitialAction'};
this.setState(RNTesterNavigationReducer(null, initialAction));
return;
}
const storedState = JSON.parse(storedString);
if (launchAction) {
this.setState(RNTesterNavigationReducer(storedState, launchAction));
return;
}
this.setState(storedState);
});
});
initializeInitialState(this);
}

render(): React.Node {
Expand Down Expand Up @@ -233,7 +211,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
_renderDrawerContent = () => {
return (
<RNTesterDrawerContentViaHook
onNavigate={this._handleAction}
onNavigate={() => handleNavigation(this)}
list={RNTesterList}
/>
);
Expand All @@ -248,7 +226,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
return (
<ExampleModule
onExampleExit={() => {
this._handleAction(RNTesterActions.Back());
handleNavigation(this, RNTesterActions.Back());
}}
ref={(example) => {
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue
Expand Down Expand Up @@ -281,26 +259,12 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
onPressDrawer={() => this.drawer.openDrawer()}
onNavigate={this._handleAction}
onNavigate={() => handleNavigation(this)}
list={RNTesterList}
/>
);
}

_handleAction = (action: Object): boolean => {
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
this.drawer && this.drawer.closeDrawer();
const newState = RNTesterNavigationReducer(this.state, action);
if (this.state !== newState) {
this.setState(newState, () =>
AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(this.state)),
);
return true;
}
return false;
};

_handleBackButtonPress = () => {
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
Expand All @@ -326,7 +290,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
) {
return true;
}
return this._handleAction(RNTesterActions.Back());
return handleNavigation(RNTesterActions.Back());
};
}

Expand Down
41 changes: 4 additions & 37 deletions packages/RNTester/js/RNTesterApp.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import type {RNTesterAction} from './utils/RNTesterActions';
import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
import type {ColorSchemeName} from 'react-native/Libraries/Utilities/NativeAppearance';
import {handleNavigation, initializeInitialState} from './utils/StateMangement';

type Props = {exampleFromAppetizeParams?: ?string, ...};

Expand Down Expand Up @@ -144,45 +145,11 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
}

componentDidMount() {
this._mounted = true;
Linking.getInitialURL().then(url => {
AsyncStorage.getItem(APP_STATE_KEY, (err, storedString) => {
if (!this._mounted) {
return;
}
const exampleAction = URIActionMap(
this.props.exampleFromAppetizeParams,
);
const urlAction = URIActionMap(url);
const launchAction = exampleAction || urlAction;
const initialAction = launchAction || {type: 'InitialAction'};
this.setState(RNTesterNavigationReducer(undefined, initialAction));
});
});

Linking.addEventListener('url', url => {
this._handleAction(URIActionMap(url));
});
}

componentWillUnmount() {
this._mounted = false;
initializeInitialState(this);
}

_handleBack = () => {
this._handleAction(RNTesterActions.Back());
};

_handleAction = (action: ?RNTesterAction) => {
if (!action) {
return;
}
const newState = RNTesterNavigationReducer(this.state, action);
if (this.state !== newState) {
this.setState(newState, () =>
AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(this.state)),
);
}
handleNavigation(RNTesterActions.Back());
};

render(): React.Node | null {
Expand All @@ -205,7 +172,7 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
}
return (
<RNTesterExampleListViaHook
onNavigate={this._handleAction}
onNavigate={handleNavigation}
list={RNTesterList}
/>
);
Expand Down
49 changes: 49 additions & 0 deletions packages/RNTester/js/utils/RNTesterNavigationContext.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/

'use strict';

const RNTesterList = require('./RNTesterList');

export type RNTesterNavigationState = {openExample: ?string, ...};

function RNTesterNavigationReducer(

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any specific reason why this was moved from RNTesterNavigationReducer to RNTesterNavigationContext? @stealthanthrax

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manyaagarwal , what do you mean by this?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the code in this file

Copy link
Member Author

@sansyrox sansyrox Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manyaagarwal , so that all the AsyncStorage interaction takes place from one file/location.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stealthanthrax This is the same code from RNTesterNavigationReducer, there has been no addition. Is there something else also that you intend to add to this file?

state: ?RNTesterNavigationState,
action: any,
): RNTesterNavigationState {
if (
// Default value is to see example list
!state ||
// Handle the explicit list action
action.type === 'RNTesterListAction' ||
// Handle requests to go back to the list when an example is open
(state.openExample && action.type === 'RNTesterBackAction')
) {
return {
// A null openExample will cause the views to display the RNTester example list
openExample: null,
};
}

if (action.type === 'RNTesterExampleAction') {
// Make sure we see the module before returning the new state
const ExampleModule = RNTesterList.Modules[action.openExample];

if (ExampleModule) {
return {
openExample: action.openExample,
};
}
}

return state;
}

module.exports = RNTesterNavigationReducer;
62 changes: 62 additions & 0 deletions packages/RNTester/js/utils/StateManagement.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/

'use strict';

import {Platform, Linking} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be removed and the new native modules need to be imported here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manyaagarwal , can't do that for the time being. We will have to create our local state management solution before that which a different issue for this sprint.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure what you mean by local state management solution? From what I understand @chirag-singhal has already implemented the native modules required for async storage in #162

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manyaagarwal , I was referring to Chirag's PR only. Will only need to change the import statement

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we can change it after #162 gets merged, but we should do that before merging this PR.

const RNTesterNavigationReducer = require('./RNTesterNavigationReducer');
const URIActionMap = require('./URIActionMap');

const APP_STATE_KEY = 'RNTesterAppState.v2';

export const initializeInitialState = async (context) => {
const url = await Linking.getInitialURL();
const [err, storedString] = await AsyncStorage.getItem(APP_STATE_KEY);
const exampleAction = URIActionMap(context.props.exampleFromAppetizeParams);
const urlAction = URIActionMap(url);
const launchAction = exampleAction || urlAction;

if (err || !storedString) {
const initialAction = launchAction || {type: 'InitialAction'};
context.setState(RNTesterNavigationReducer(null, initialAction));
return;
}
const storedState = JSON.parse(storedString);
if (launchAction) {
context.setState(RNTesterNavigationReducer(storedState, launchAction));
return;
}
context.setState(storedState);

if (Platform.OS === 'ios') {
Linking.addEventListener('url', (url) => {
handleNavigation(URIActionMap(url));
});
}
};

export const handleNavigation = (context, action) => {
if (Platform.OS === 'android') {
context.drawer && context.drawer.closeDrawer(); // will need to purge this once the new design kicks in or is it ubiquitous
}

if (!action) {
return false;
}
const newState = RNTesterNavigationReducer(context.state, action);
if (context.state !== newState) {
context.setState(newState, () =>
AsyncStorage.setItem(APP_STATE_KEY, JSON.stringify(context.state)),
);
return true;
}
return false;
};