React Query Option (#128)

* Remove custom TypeScript setup for community template

* Remove need to run react navigation configure script

* Remove need to copy react navigations java file changes

* No need to delete .flowconfig

* Fix typo

* Add example env

* Delete the ts(x) files rather than JS

* Only run pretty over the app folder

* Switch to using npx pod install to install pods

* Add in types for styled components

* Main bulk of work to switch to react query option

* Remove space

* Fix tsconfig

* Fix bundled types

* React query example

* Configure console for React native

* Notes around react-query

* Fix tests

* Alter note around running the app

* Install react-native-make

* Spelling fix

Author: Benjamin Reid

README.md

@@ -48,7 +48,8 @@ npx romulus-cli init
 Create a new React Native project using their CLI tool.
 
 ```
-react-native init MyApp && cd MyApp
+npx react-native init MyApp --template react-native-template-typescript
+cd MyApp
 ```
 
 Once this is complete, simply run the main generator command. This will rework
@@ -63,11 +64,14 @@ romulus init
 
 - A sensible `README` providing consistent instructions between projects
 - TypeScript support
-- Router using `react-navigation`
-- Redux setup
+- Router using `react-navigation` (v5)
+- Redux setup (optional)
   - Store is persisted using `redux-persist`
   - Helpful state changes logged in the debugger using `redux-logger`
   - Actions are prevented from being dispatched before the cache is restored
+- `react-query` setup (optional)
+  - Makes it easy to get setup with `react-query`
+  - Replaces Saga and Redux architecture
 - UI niceities
   - CSS-in-JS support for `styled-components`
   - Start to a styleguide to list your components
@@ -81,7 +85,7 @@ romulus init
 - Optional support for different locales using `react-native-i18n`
 - Environment variables available in JavaScript, Objective C and Java using
   `react-native-config`
-- Sagas (to handle async tasks like HTTP requests) using `redux-saga`
+- Sagas (to handle async tasks like HTTP requests) using `redux-saga` (optional, not available with `react-query`)
 - Initial setup for deep linking
 - Requests are set up to be handled with `axios` with clear logging in the
   debugger provided

docs/commands.md

@@ -119,7 +119,7 @@ const initialState: State = {
 
 const reducer = (
   state = initialState,
-  action: SettingsActions | ReducerAction
+  action: SettingsActions,
 ): State => {
   switch (action.type) {
     case SETTINGS_EXAMPLE:

generators/base/index.js

@@ -13,14 +13,23 @@ module.exports = class extends Generator {
 
   prompting() {
     return this.prompt([
+      {
+        type: "list",
+        name: "httpLayer",
+        message: "Which HTTP layer do you want to use?",
+        choices: ["react-query", "redux-saga"],
+        default: "react-query",
+      },
       {
         type: "confirm",
         name: "i18nSupport",
         message: "Do you want i18n support?",
         default: true,
       },
-    ]).then(answers => {
+    ]).then((answers) => {
       this.i18nSupport = answers.i18nSupport;
+      this.usingReactQuery = answers.httpLayer === "react-query";
+      this.usingReduxSaga = answers.httpLayer === "redux-saga";
     });
   }
 
@@ -29,7 +38,7 @@ module.exports = class extends Generator {
     this.fs.copyTpl(
       this.templatePath("index.js"),
       this.destinationPath("index.js"),
-      { name: this.name }
+      { name: this.name, usingReactQuery: this.usingReactQuery }
     );
 
     // copy Prettier config
@@ -38,38 +47,39 @@ module.exports = class extends Generator {
       this.destinationPath(".prettierrc.js")
     );
 
-    // copy Prettier config
+    // copy ESLint config
     this.fs.copyTpl(
       this.templatePath(".eslintrc.js"),
       this.destinationPath(".eslintrc.js")
     );
 
+    this.fs.copyTpl(
+      this.templatePath("jest.config.js"),
+      this.destinationPath("jest.config.js")
+    );
+
     // copy TypeSCript config
     this.fs.copyTpl(
       this.templatePath("tsconfig.json"),
       this.destinationPath("tsconfig.json"),
       { name: this.name }
     );
 
-    this.fs.copyTpl(
-      this.templatePath("jest.config.js"),
-      this.destinationPath("jest.config.js")
-    );
-
-    // remove App.js generated by RN
-    this.fs.delete("App.js");
-
-    // remove Flow configuration
-    this.fs.delete(".flowconfig");
+    // remove default App generated by RN
+    this.fs.delete("App.tsx");
 
     // remove default test
-    this.fs.delete("__tests__/App-test.js");
+    this.fs.delete("__tests__/App-test.tsx");
 
     // copy root app file that the entry points use
     this.fs.copyTpl(
       this.templatePath("App/index.tsx"),
       this.destinationPath("App/index.tsx"),
-      { name: this.name }
+      {
+        name: this.name,
+        usingReduxSaga: this.usingReduxSaga,
+        usingReactQuery: this.usingReactQuery,
+      }
     );
 
     // copy router
@@ -86,6 +96,7 @@ module.exports = class extends Generator {
       {
         name: this.name,
         i18nSupport: this.i18nSupport,
+        usingReactQuery: this.usingReactQuery,
       }
     );
 
@@ -96,40 +107,54 @@ module.exports = class extends Generator {
       { name: this.name }
     );
 
-    // copy store
-    this.fs.copyTpl(
-      this.templatePath("App/Store/index.ts"),
-      this.destinationPath("App/Store/index.ts"),
-      { name: this.name }
-    );
+    if (this.usingReduxSaga) {
+      this.fs.copyTpl(
+        this.templatePath("@types/react-redux.d.ts"),
+        this.destinationPath("@types/react-redux.d.ts"),
+        { name: this.name }
+      );
 
-    // copy store middleware
-    this.fs.copyTpl(
-      this.templatePath("App/Store/Middleware"),
-      this.destinationPath("App/Store/Middleware"),
-      { name: this.name }
-    );
+      this.fs.copyTpl(
+        this.templatePath("@types/redux-action-buffer.d.ts"),
+        this.destinationPath("@types/redux-action-buffer.d.ts"),
+        { name: this.name }
+      );
 
-    // copy reducers
-    this.fs.copyTpl(
-      this.templatePath("App/Reducers"),
-      this.destinationPath("App/Reducers"),
-      { name: this.name, reducers: ["App"] }
-    );
+      // copy store
+      this.fs.copyTpl(
+        this.templatePath("App/Store/index.ts"),
+        this.destinationPath("App/Store/index.ts"),
+        { name: this.name }
+      );
 
-    // copy actions
-    this.fs.copyTpl(
-      this.templatePath("App/Actions"),
-      this.destinationPath("App/Actions"),
-      { name: this.name }
-    );
+      // copy store middleware
+      this.fs.copyTpl(
+        this.templatePath("App/Store/Middleware"),
+        this.destinationPath("App/Store/Middleware"),
+        { name: this.name }
+      );
 
-    // copy sagas
-    this.fs.copyTpl(
-      this.templatePath("App/Sagas"),
-      this.destinationPath("App/Sagas"),
-      { name: this.name }
-    );
+      // copy reducers
+      this.fs.copyTpl(
+        this.templatePath("App/Reducers"),
+        this.destinationPath("App/Reducers"),
+        { name: this.name, reducers: ["App"] }
+      );
+
+      // copy actions
+      this.fs.copyTpl(
+        this.templatePath("App/Actions"),
+        this.destinationPath("App/Actions"),
+        { name: this.name }
+      );
+
+      // copy sagas
+      this.fs.copyTpl(
+        this.templatePath("App/Sagas"),
+        this.destinationPath("App/Sagas"),
+        { name: this.name }
+      );
+    }
 
     // copy services
     this.fs.copyTpl(
@@ -178,6 +203,15 @@ module.exports = class extends Generator {
       api_url: "http://localhost:3000",
       storage_prefix: "development",
     });
+    this.fs.copyTpl(
+      this.templatePath(".env"),
+      this.destinationPath(".env.example"),
+      {
+        env: "development",
+        api_url: "http://localhost:3000",
+        storage_prefix: "development",
+      }
+    );
     this.fs.copyTpl(
       this.templatePath(".env"),
       this.destinationPath(".env.staging"),
@@ -212,13 +246,6 @@ module.exports = class extends Generator {
       this.destinationPath("__mocks__")
     );
 
-    // copy TypeScript types
-    this.fs.copyTpl(
-      this.templatePath("@types"),
-      this.destinationPath("@types"),
-      { name: this.name }
-    );
-
     this.fs.copyTpl(
       this.templatePath("README.md"),
       this.destinationPath("README.md"),
@@ -232,23 +259,15 @@ module.exports = class extends Generator {
       { name: this.name }
     );
 
-    //  copy android files
-    this.fs.copyTpl(
-      this.templatePath("android/MainActivity.java"),
-      this.destinationPath(
-        `android/app/src/main/java/com/${this.name.toLowerCase()}/MainActivity.java`
-      ),
-      { name: this.name, nameLower: this.name.toLowerCase() }
-    );
-
     // merge the two package json files
     const currentPackage = readPkg.sync();
 
     writePkg.sync(
       deepExtend(currentPackage, {
         private: true,
         scripts: {
-          pretty: "prettier --config .prettierrc.js --write '**/*.{ts,tsx,js}'",
+          pretty:
+            "prettier --config .prettierrc.js --write 'App/**/*.{ts,tsx,js}'",
           lint: "eslint --fix './App/**/*.{ts,tsx,js}'",
           bump: "./bin/bump-ios.sh",
           test: "jest --verbose",
@@ -274,42 +293,41 @@ module.exports = class extends Generator {
     const reactNavigation = [
       "@react-navigation/native",
       "@react-navigation/stack",
-      "react-native-gesture-handler",
       "react-native-reanimated",
+      "react-native-gesture-handler",
       "react-native-screens",
       "react-native-safe-area-context",
       "@react-native-community/masked-view",
     ];
 
-    this.yarnInstall([
-      "@react-native-community/async-storage",
-      "axios",
-      "https://github.com/luggit/react-native-config#master",
-      ...(this.i18nSupport ? ["react-native-i18n"] : []),
+    const reduxSagaModules = [
       "react-redux",
       "redux",
       "redux-action-buffer",
       "redux-logger",
       "redux-persist",
       "redux-saga",
+    ];
+
+    const reactQueryModules = ["react-query"];
+
+    const types = ["@types/styled-components"];
+
+    this.yarnInstall([
+      "@react-native-community/async-storage",
+      "axios",
+      "react-native-config",
       "styled-components",
       ...reactNavigation,
+      ...(this.i18nSupport ? ["react-native-i18n"] : []),
+      ...(this.usingReduxSaga ? reduxSagaModules : []),
+      ...(this.usingReactQuery ? reactQueryModules : []),
     ]);
 
-    const typeScript = [
-      "typescript",
-      "@types/jest",
-      "@types/react",
-      "@types/react-native",
-      "@types/react-test-renderer",
-      "@types/styled-components",
-      "@types/react-redux",
-      "@types/redux-logger",
-      "@types/node",
-    ];
-
     this.yarnInstall(
       [
+        ...types,
+        "@bam.tech/react-native-make",
         "@testing-library/react-native",
         "eslint",
         "babel-eslint",
@@ -324,7 +342,6 @@ module.exports = class extends Generator {
         "eslint-plugin-tsc",
         "jest",
         "jest-styled-components",
-        ...typeScript,
       ],
       {
         dev: true,
@@ -334,9 +351,7 @@ module.exports = class extends Generator {
 
   end() {
     this.log("Installing Pods...");
-    this.spawnCommandSync("pod", ["install"], {
-      cwd: this.destinationPath("ios"),
-    });
+    this.spawnCommandSync("npx", ["pod-install"]);
 
     this.log("Running Prettier...");
     this.spawnCommandSync("yarn", ["run", "pretty"]);
@@ -359,15 +374,6 @@ module.exports = class extends Generator {
       }
     );
 
-    this.log("Configuring React Navigation");
-    this.spawnCommandSync(
-      "python",
-      [`${this.templatePath("bin")}/react-navigation.py`],
-      {
-        cwd: this.destinationPath(),
-      }
-    );
-
     this.log("Creating iOS Schemes");
     this.spawnCommandSync(
       "python",