fix: inconsistent component order on home screen (#83)

Now allowing the same component to be listed multiple times as well. Implements microsoft/continuity#61 (comment).
microsoft · May 15, 2020 · e0022d9 · e0022d9
1 parent 8af7bf5
commit e0022d9
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 42 deletions.
diff --git a/.swiftlint.yml b/.swiftlint.yml
@@ -1,5 +1,5 @@
 disabled_rules:
   - trailing_comma
 excluded:
-  - example/Pods/
+  - example/*/Pods/
   - example/node_modules/
diff --git a/android/app/src/main/java/com/sample/MainActivity.kt b/android/app/src/main/java/com/sample/MainActivity.kt
@@ -12,7 +12,7 @@ import com.google.android.material.appbar.MaterialToolbar
 import com.sample.component.ComponentActivity
 import com.sample.component.ComponentListAdapter
 import com.sample.component.ComponentViewModel
-import com.sample.manifest.Components
+import com.sample.manifest.Component
 import com.sample.manifest.ManifestProvider
 import com.sample.react.BundleSource
 import com.sample.react.ReactBundleNameProvider
@@ -89,9 +89,9 @@ class MainActivity : ReactActivity() {
         }
     }
 
-    private fun setupRecyclerView(manifestComponents: Components) {
+    private fun setupRecyclerView(manifestComponents: List<Component>) {
         val components = manifestComponents.map {
-            ComponentViewModel(it.key, it.value.displayName ?: it.key)
+            ComponentViewModel(it.appKey, it.displayName ?: it.appKey)
         }
         findViewById<RecyclerView>(R.id.recyclerview).apply {
             layoutManager = LinearLayoutManager(context)

diff --git a/android/app/src/main/java/com/sample/component/ComponentActivity.kt b/android/app/src/main/java/com/sample/component/ComponentActivity.kt
@@ -36,6 +36,7 @@ class ComponentActivity : ReactActivity() {
         title = intent.extras?.getString(COMPONENT_DISPLAY_NAME, componentName)
 
         findClass(componentName)?.let {
+            @Suppress("UNCHECKED_CAST")
             val fragmentClass = it as Class<Fragment>
             val fragment = fragmentClass.newInstance()
 

diff --git a/android/app/src/main/java/com/sample/manifest/Manifest.kt b/android/app/src/main/java/com/sample/manifest/Manifest.kt
@@ -2,14 +2,16 @@ package com.sample.manifest
 
 import com.squareup.moshi.JsonClass
 
-typealias Components = Map<String, Component>
-
 @JsonClass(generateAdapter = true)
 data class Manifest(
     val name: String,
     val displayName: String,
-    val components: Components
+    val components: List<Component>
 )
 
 @JsonClass(generateAdapter = true)
-data class Component(val displayName: String?)
+data class Component(
+    val appKey: String,
+    val displayName: String?,
+    val initialProperties: Map<String, String?>?
+)
diff --git a/example/app.json b/example/app.json
@@ -1,11 +1,12 @@
 {
   "name": "Example",
   "displayName": "Example",
-  "components": {
-    "Example": {
+  "components": [
+    {
+      "appKey": "Example",
       "displayName": "App"
     }
-  },
+  ],
   "resources": {
     "ios": [
       "dist/assets",

diff --git a/example/ios/ExampleTests/ManifestTests.swift b/example/ios/ExampleTests/ManifestTests.swift
@@ -19,11 +19,8 @@ class ManifestTests: XCTestCase {
         XCTAssertEqual(manifest.displayName, "Example")
         XCTAssertEqual(manifest.components.count, 1)
 
-        guard let component = manifest.components["Example"] else {
-            XCTFail("Expected 'Example' component")
-            return
-        }
-
+        let component = manifest.components[0]
+        XCTAssertEqual(component.appKey, "Example")
         XCTAssertEqual(component.displayName, "App")
         XCTAssertNil(component.initialProperties)
     }
@@ -33,8 +30,8 @@ class ManifestTests: XCTestCase {
             name: "Name",
             displayName: "Display Name",
             components: [
-                "0": Component(displayName: nil, initialProperties: ["key": "value"]),
-                "1": Component(displayName: "1", initialProperties: nil),
+                Component(appKey: "0", displayName: nil, initialProperties: ["key": "value"]),
+                Component(appKey: "1", displayName: "1", initialProperties: nil),
             ]
         )
 
@@ -48,15 +45,19 @@ class ManifestTests: XCTestCase {
         XCTAssertEqual(manifest.displayName, expected.displayName)
         XCTAssertEqual(manifest.components.count, expected.components.count)
 
-        XCTAssertEqual(manifest.components["0"]!.displayName,
-                       expected.components["0"]!.displayName)
-        XCTAssertEqual(manifest.components["0"]!.initialProperties!["key"]!,
-                       expected.components["0"]!.initialProperties!["key"]!)
-
-        XCTAssertEqual(manifest.components["1"]!.displayName,
-                       expected.components["1"]!.displayName)
-        XCTAssertEqual(manifest.components["1"]!.initialProperties,
-                       expected.components["1"]!.initialProperties)
+        XCTAssertEqual(manifest.components[0].appKey,
+                       expected.components[0].appKey)
+        XCTAssertEqual(manifest.components[0].displayName,
+                       expected.components[0].displayName)
+        XCTAssertEqual(manifest.components[0].initialProperties!["key"]!,
+                       expected.components[0].initialProperties!["key"]!)
+
+        XCTAssertEqual(manifest.components[1].appKey,
+                       expected.components[1].appKey)
+        XCTAssertEqual(manifest.components[1].displayName,
+                       expected.components[1].displayName)
+        XCTAssertEqual(manifest.components[1].initialProperties,
+                       expected.components[1].initialProperties)
     }
 
 }
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1,7 +1,7 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - Example-Tests (0.0.9):
+  - Example-Tests (0.0.12):
     - React
   - Folly (2018.10.22.00):
     - boost-for-react-native
@@ -82,7 +82,7 @@ PODS:
     - React-Core (= 0.60.6)
   - React-RCTWebSocket (0.60.6):
     - React-Core (= 0.60.6)
-  - ReactTestApp-DevSupport (0.0.9)
+  - ReactTestApp-DevSupport (0.0.12)
   - ReactTestApp-Resources (1.0.0-dev)
   - SwiftLint (0.39.1)
   - yoga (0.60.6.React)
@@ -174,7 +174,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  Example-Tests: b00b84b581b2beb53faa6217e2d292e0564fb393
+  Example-Tests: 9e3b7886daab404ebfe3d8a20b2c4ac16d85d922
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   QRCodeReader.swift: 373a389fe9a22d513c879a32a6f647c58f4ef572
@@ -195,8 +195,8 @@ SPEC CHECKSUMS:
   React-RCTText: d91537e29e38dc69cf09cbca0875cf5dc7402da6
   React-RCTVibration: 7655d72dfb919dd6d8e135ca108a5a2bd9fcd7b4
   React-RCTWebSocket: 7cd2c8d0f8ddd680dc76404defba7ab1f56b83af
-  ReactTestApp-DevSupport: 4bccc0cb4dbab7c2b53e15efd69fe7ba95f38a3c
-  ReactTestApp-Resources: 18abf3923397be7cd4eb2e247e954dcbf5b687e6
+  ReactTestApp-DevSupport: 52b6f4bc6fac6dd0db1c925101ff58b5022451af
+  ReactTestApp-Resources: d25032e61dffcd03da09f537f9a7bab33613e2f0
   SwiftLint: 55e96a4a4d537d4a3156859fc1c54bd24851a046
   yoga: 5079887aa3e4c62142d6bcee493022643ee4d730
 

diff --git a/ios/ReactTestApp/ContentView.swift b/ios/ReactTestApp/ContentView.swift
@@ -49,8 +49,8 @@ final class ContentViewController: UITableViewController {
 
         DispatchQueue.global(qos: .userInitiated).async { [weak self] in
             self?.reactInstance.initReact { components in
-                let items: [NavigationLink] = components.map { (name, component) in
-                    (component.displayName ?? name, { self?.navigate(to: component, name: name) })
+                let items: [NavigationLink] = components.map { (component) in
+                    (component.displayName ?? component.appKey, { self?.navigate(to: component) })
                 }
                 DispatchQueue.main.async {
                     guard let strongSelf = self else {
@@ -132,21 +132,21 @@ final class ContentViewController: UITableViewController {
         #endif
     }
 
-    private func navigate(to component: Component, name: String) {
+    private func navigate(to component: Component) {
         guard let bridge = reactInstance.bridge,
               let navigationController = navigationController else {
             return
         }
 
         let viewController: UIViewController = {
-            if let viewController = RTAViewControllerFromString(name, bridge) {
+            if let viewController = RTAViewControllerFromString(component.appKey, bridge) {
                 return viewController
             }
 
             let viewController = UIViewController(nibName: nil, bundle: nil)
             viewController.view = RCTRootView(
                 bridge: bridge,
-                moduleName: name,
+                moduleName: component.appKey,
                 initialProperties: component.initialProperties
             )
             return viewController

diff --git a/ios/ReactTestApp/Manifest.swift b/ios/ReactTestApp/Manifest.swift
@@ -8,14 +8,15 @@
 import Foundation
 
 struct Component: Codable {
+    let appKey: String
     let displayName: String?
     let initialProperties: [String: String]?
 }
 
 struct Manifest: Codable {
     let name: String
     let displayName: String
-    let components: [String: Component]
+    let components: [Component]
 
     static func fromFile() -> Manifest? {
         guard let manifestURL = Bundle.main.url(forResource: "app", withExtension: "json", subdirectory: "assets"),

diff --git a/ios/ReactTestApp/ReactInstance.swift b/ios/ReactTestApp/ReactInstance.swift
@@ -74,7 +74,7 @@ final class ReactInstance: NSObject, RCTBridgeDelegate, RCTTurboModuleLookupDele
         assert(forTestingPurposesOnly)
     }
 
-    func initReact(onDidInitialize: @escaping ([String: Component]) -> Void) {
+    func initReact(onDidInitialize: @escaping ([Component]) -> Void) {
         if let bridge = bridge {
             if remoteBundleURL == nil {
                 // When loading the embedded bundle, we must disable remote

diff --git a/plopfile.js b/plopfile.js
@@ -52,11 +52,12 @@ module.exports = (plop) => {
             {
               name,
               displayName: name,
-              components: {
-                [name]: {
+              components: [
+                {
+                  appKey: name,
                   displayName: name,
                 },
-              },
+              ],
               resources: ["dist/assets", "dist/main.jsbundle", "dist/res"],
             },
             undefined,

diff --git a/test_app.rb b/test_app.rb
@@ -65,6 +65,7 @@ def resources_pod(project_root)
     'license' => 'Unlicense',
     'authors' => '@microsoft/react-native-test-app',
     'source' => { 'git' => 'https://github.com/microsoft/react-native-test-app.git' },
+    'platforms' => { 'ios' => '12.0' },
     'resources' => resources
   }