react native web rewrite and refactoring

package.json

@@ -5,8 +5,6 @@
   "workspaces": {
     "packages": [
       "packages/*"
-    ],
-    "nohoist": [
     ]
   },
   "scripts": {
@@ -17,6 +15,8 @@
     "run-ios": "yarn workspace mobile run-ios"
   },
   "dependencies": {
+    "react": "16.9.0",
+    "react-redux": "7.2.0",
     "react-native": "0.61.3"
   },
   "devDependencies": {

packages/mobile/assets/fonts/index.js → packages/common/assets/fonts/index.js

@@ -1,6 +1,6 @@
 export const fonts = {
-  'space-mono': require('../../assets/fonts/SpaceMono-Regular.ttf'),
-  Arial: require('../../assets/fonts/Arial.ttf'),
+  'space-mono': require('./SpaceMono-Regular.ttf'),
+  Arial: require('./Arial.ttf'),
   Ionicons: require('../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf'),
   MaterialCommunityIcons: require('../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'),
 };

packages/common/package.json

@@ -1,29 +1,33 @@
 {
   "name": "spaceviewer-common",
   "version": "0.0.1",
-  "main": "dist/index.js",
+  "main": "dist/src/index.js",
   "license": "MIT",
   "private": true,
   "scripts": {
     "postinstall": "npm run build",
     "build": "rm -rf ./dist && tsc",
-    "watch": "tsc --watch --outDir ./dist"
+    "watch": "rm -rf ./dist && tsc --watch --outDir ./dist"
   },
-  "dependencies": {},
-  "workspaces": {
-    "nohoist": [
-      "react-native",
-      "react-native/**",
-      "react",
-      "react/**"
-    ]
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "1.2.26",
+    "@fortawesome/free-solid-svg-icons": "5.12.0",
+    "@fortawesome/react-native-fontawesome": "0.2.3",
+    "react-native-svg": "12.0.3"
   },
   "devDependencies": {
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.17",
+    "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-router-native": "^5.1.0",
+    "@types/styled-components": "^5.0.1",
+    "moment": "^2.24.0",
     "native-base": "^2.13.8",
+    "react": "16.9.0",
+    "react-redux": "7.2.0",
+    "redux": "4.0.5",
+    "redux-saga": "1.1.3",
     "typescript": "^3.8.2"
   }
 }

packages/mobile/src/components/container/HomeContainer.js → packages/common/src/components/container/HomeContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { ItemsView } from '../views';
+import { ItemsView } from '../views/ItemsView';
 import { listRefreshSagaAction, listEndReachedSagaAction } from '../../actions';
 import { FILE_NEXT_LAUNCHES } from '../../constants/files';
 
@@ -10,9 +10,11 @@ export const HomeContainer = connect(
   }),
   dispatch => ({
     endReached: () => {
+      console.warn('endReached');
       dispatch(listEndReachedSagaAction(FILE_NEXT_LAUNCHES));
     },
     refresh: () => {
+      console.warn('refresh');
       dispatch(listRefreshSagaAction(FILE_NEXT_LAUNCHES));
     },
   })

packages/mobile/src/components/container/PreviousContainer.js → packages/common/src/components/container/PreviousContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import { listEndReachedSagaAction, listRefreshSagaAction } from '../../actions';
 import { ItemsView } from '../views/ItemsView';
+import { listRefreshSagaAction, listEndReachedSagaAction } from '../../actions';
 import { FILE_PREV_LAUNCHES } from '../../constants/files';
 
 export const PreviousContainer = connect(

packages/mobile/src/components/container/SearchFieldContainer.js → packages/common/src/components/container/SearchFieldContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { SearchFieldView } from '../views';
+import { SearchFieldView } from '../views/SearchFieldView';
 import {
   searchOnChangeTextSagaAction,
   searchClearSagaAction,

packages/mobile/src/components/container/SettingsContainer.js → packages/common/src/components/container/SettingsContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { SettingsView } from '../views';
+import { SettingsView } from '../views/SettingsView';
 import { settingsSaveValueSagaAction, openURLSagaAction } from '../../actions';
 
 export const SettingsContainer = connect(

packages/mobile/src/components/layout/HeaderTitle.js → packages/common/src/components/layout/HeaderTitle.js

@@ -3,8 +3,9 @@ import { View, Animated } from 'react-native';
 
 import mainStyle from '../../styles/mainStyle';
 import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
-export const HeaderTitle = ({ text = '' }) => {
+export const HeaderTitle = ({ text = '', ...props }) => {
   const { t } = useTranslation();
 
   return (
@@ -17,3 +18,15 @@ export const HeaderTitle = ({ text = '' }) => {
     </View>
   );
 };
+
+export const ConnectedHeaderTitle = connect(
+  (state) => {
+    console.warn(state);
+
+    return({
+    test: state
+  })},
+  (dispatch) => ({
+
+  })
+)(HeaderTitle)

packages/mobile/src/components/list/OverviewList.js → packages/common/src/components/list/OverviewList.js

@@ -6,7 +6,6 @@ import {
 } from '../../constants/theme';
 import overviewListStyle from '../../styles/overviewListStyle';
 import { OverviewListItemContainer } from '../container/OverviewListItemContainer';
-import { Separator } from 'native-base';
 
 export class OverviewList extends React.PureComponent {
   state = { selected: new Map() };
@@ -27,7 +26,7 @@ export class OverviewList extends React.PureComponent {
     item && item.id ? (
       <OverviewListItemContainer
         key={item.id}
-        navigation={this.props.navigation}
+        history={this.props.history}
         id={item.id}
         onPressItem={this._onPressItem}
         selected={!!this.state.selected.get(item.id)}

packages/mobile/src/components/list/OverviewListIcon.js → packages/common/src/components/list/OverviewListIcon.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import { View, Image } from 'react-native';
-import FastImage from 'react-native-fast-image';
 
 import { overviewListIconBorderWidth, colors } from '../../constants/theme';
 import { CustomTouchableHighlight } from '../pure/CustomTouchableHighlight';
-import { heightPercentageToDP } from 'react-native-responsive-screen';
 
 export class OverviewListIcon extends React.Component {
   state = {
@@ -49,16 +47,15 @@ export class OverviewListIcon extends React.Component {
               borderColor: colors.BORDER_GREY,
               borderRadius: rad,
             }}>
-            <FastImage
+            <Image
               style={{
                 flex: 1,
                 borderRadius: rad,
               }}
               source={{
-                uri,
-                priority: FastImage.priority.fast,
+                uri
               }}
-              resizeMode={FastImage.resizeMode.cover}
+              resizeMode="stretch"
             />
           </CustomTouchableHighlight>
         }

packages/mobile/src/components/list/OverviewListItem.js → packages/common/src/components/list/OverviewListItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Platform } from 'react-native';
 import overviewListStyle from '../../styles/overviewListStyle';
 import { OverviewListIconContainer } from '../container/OverviewListIconContainer';
 import { OverviewListItemText } from './OverviewListItemText';
@@ -15,10 +15,16 @@ export class OverviewListItem extends React.PureComponent {
   };
 
   _onPress = () => {
-    this.props.navigation.navigate(Routes.DETAILS_SCREEN, {
-      item: this.props.item,
-      name: this.props.item.name,
-    });
+    if (Platform.OS === 'web') {
+      return;
+    }
+
+    if (this.props.history) {
+      this.props.history.replace('/details', {
+        item: this.props.item,
+        name: this.props.item.name,
+      });
+    }
   };
 
   // componentDidMount() {

packages/common/src/components/list/OverviewListItemText.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text, View, Platform } from 'react-native';
+import overviewListStyle from '../../styles/overviewListStyle';
+import { colors } from '../../constants/theme';
+import { faClock, faMapMarkedAlt, faIdBadge } from '@fortawesome/free-solid-svg-icons'
+
+let FontAwesomeIcon;
+
+if (Platform.OS === 'web') {
+  FontAwesomeIcon = require('@fortawesome/react-fontawesome').FontAwesomeIcon;
+} else {
+  FontAwesomeIcon = require('@fortawesome/react-native-fontawesome').FontAwesomeIcon;
+}
+
+const nameToIcon = name => {
+  if (name === 'account-box') {
+    return faIdBadge;
+  } else if (name === 'map-marker') {
+    return faMapMarkedAlt;
+  } else if (name === 'clock') {
+    return faClock;
+  }
+}
+
+const Inner = props => (
+  <React.Fragment>
+    <FontAwesomeIcon color={colors.LIST_ICON} icon={nameToIcon(props.iconName)} />
+    <Text numberOfLines={2} style={overviewListStyle.text}>
+      {props.text}
+    </Text>
+  </React.Fragment>
+);
+
+export const OverviewListItemText = props => (
+  <View
+    animation="fadeIn"
+    style={overviewListStyle.listStyleContainer}>
+    <Inner {...props} />
+  </View>
+);

packages/common/src/components/navigation/NavHeader.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+interface Props {
+
+}
+
+export const NavHeader = (props: Props) => {
+  return null;
+}

packages/common/src/components/pure/CustomSpinner.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { colors } from '../../constants/theme';
+import { ActivityIndicator } from 'react-native';
+
+export const CustomSpinner = () => <ActivityIndicator size="large" color={colors.SPINNER} />;
+
+export default CustomSpinner;

packages/mobile/src/components/settings/SettingsList.js → packages/common/src/components/settings/SettingsList.js

@@ -1,17 +1,16 @@
-import React, { useState, useCallback } from 'react';
-import { View, Platform } from 'react-native';
-/* eslint-disable-next-line */
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Platform, View } from 'react-native';
 import List from 'react-native-settings-list';
-import Moment from 'moment';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
+import { URL_ANDROID, URL_IOS, URL_SUPPORT } from '../../constants/app';
+import { Routes } from '../../constants/routes';
+import { SETTING_FORMAT_DATE } from '../../constants/settings';
+import { colors, settingsListItemIconSize } from '../../constants/theme';
 import settingsStyle, { arrowStyle } from '../../styles/settingsStyle';
 import { SettingsListItemIcon } from './SettingsListItemIcon';
-import { SETTING_FORMAT_DATE } from '../../constants/settings';
-import { settingsListItemIconSize, colors } from '../../constants/theme';
-import { Routes } from '../../constants/routes';
-import { URL_ANDROID, URL_IOS, URL_SUPPORT } from '../../constants/app';
-import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import { routes } from '../../router/routes';
 
 const Arrow = props => (
   <MaterialCommunityIcons
@@ -24,7 +23,7 @@ const Arrow = props => (
 );
 
 export const SettingsList = ({ saveValue, settings, navigation, openURL }) => {
-  const settingsFormatValue = settings[SETTING_FORMAT_DATE];
+  const { push, location } = useHistory();
 
   const { t } = useTranslation();
 
@@ -39,7 +38,7 @@ export const SettingsList = ({ saveValue, settings, navigation, openURL }) => {
           titleStyle={settingsStyle.titleStyle}
           titleBoxStyle={settingsStyle.titleBoxStyle}
           arrowStyle={arrowStyle}
-          onPress={() => navigation.navigate(Routes.PRIVACY_POLICY_SCREEN)}
+          onPress={() => push(routes.privacy)}
         />
         <List.Item
           title={t('Credits')}
@@ -48,7 +47,7 @@ export const SettingsList = ({ saveValue, settings, navigation, openURL }) => {
           titleStyle={settingsStyle.titleStyle}
           titleBoxStyle={settingsStyle.titleBoxStyle}
           arrowStyle={arrowStyle}
-          onPress={() => navigation.navigate(Routes.CREDITS_SCREEN)}
+          onPress={() => push(routes.credits)}
         />
         <List.Item
           title={t('Feedback')}

packages/common/src/components/settings/SettingsList.web.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Text, View } from 'react-native';
+
+export const SettingsList = ({ saveValue, settings, navigation, openURL }) => {
+  const { push, location } = useHistory();
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Not yet implemented</Text>
+    </View>
+  );
+};

packages/mobile/src/components/views/CreditsView.js → packages/common/src/components/views/CreditsView.js

@@ -1,25 +1,16 @@
 import { Card, CardItem, Text } from 'native-base';
 import React from 'react';
-import { ScrollView, View } from 'react-native';
-import { version } from '../../../package';
+import { ScrollView, View, Text } from 'react-native';
 import overviewDetailsStyle from '../../styles/overviewDetailsStyle';
 import { TouchableContainer } from '../container/TouchableContainer';
 import { CustomTouchableHighlight } from '../pure/CustomTouchableHighlight';
+const version = 42;
 
 export class CreditsView extends React.Component {
-  constructor() {
-    super();
-  }
-
   render() {
     return (
-      <View style={{ flex: 1, padding: 5 }}>
+      <View style={{ flex: 1, padding: 5, backgroundColor: 'white' }}>
         <ScrollView>
-          <View
-            style={{
-              height: 0,
-            }}
-          />
           <Card>
             <CardItem header bordered>
               <Text>Credits</Text>

packages/common/src/components/views/CreditsView.web.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ScrollView, View, Text } from 'react-native';
+const version = 42;
+
+export class CreditsView extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1, padding: 5, backgroundColor: 'white' }}>
+        <ScrollView>
+          <Text>Not yet implemented</Text>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+