init

Author: TSMMark

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-loading-switch",
+  "version": "1.0.0",
+  "description": "React component API for easily composing the render logic surrounding react-apollo data fetching, loading and error handling",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "scripts": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Vydia/react-loading-switch.git"
+  },
+  "keywords": [
+    "react",
+    "react-apollo",
+    "apollo",
+    "apollo-client",
+    "rendering",
+    "composable",
+    "component",
+    "data",
+    "loading",
+    "error",
+    "fetch",
+    "api",
+    "render",
+    "switch",
+    "logic",
+    "apollo-link"
+  ],
+  "author": "TSMMark",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Vydia/react-loading-switch/issues"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0"
+  },
+  "homepage": "https://github.com/Vydia/react-loading-switch#readme"
+}

src/ReactLoadingSwitch.js

@@ -0,0 +1,79 @@
+
+import { Component, type Node } from 'react'
+
+/*
+LoadingSwitch
+-------------
+
+A switcher based on the presence of data and apollo loading information.
+
+Note: This component is generic enough that it should be its own package shared
+between our mobile and web apps, and also really any app that uses react-apollo
+
+@example
+  render() {
+    const { loading, error, media, artist } = this.props.data
+
+    <LoadingSwitch
+      error={error}
+      errorWhenMissing={() => new Error('Missing required data!')}
+      loading={loading}
+      renderError={(error) => <DataError error={error} />}
+      renderLoading={() => <Loading />}
+      require={media && artist}
+    >
+      { () => (
+        <Text>This is rendered when have the data! { media.id }</Text>
+      ) }
+    </LoadingSwitch>
+  }
+
+*/
+
+export type PendingValue = any
+
+// TODO: Import
+// Isolated in case we want to modify this behavior in the future.
+export const isPending: (PendingValue) => boolean = (pendingValue) => !pendingValue
+
+export type Props = {|
+  children: ?Node | ?() => ?Node,
+  error: ?Error,
+  errorWhenMissing: Error | () => Error,
+  loading: boolean,
+  renderError: (Error) => ?Node,
+  renderLoading: () => ?Node,
+  require: PendingValue,
+|}
+
+class LoadingSwitch extends Component<Props> {
+  static displayName = 'LoadingSwitch'
+
+  render = () => {
+    let {
+      children,
+      error,
+      errorWhenMissing,
+      loading,
+      renderError,
+      renderLoading,
+      require,
+    } = this.props
+
+    if (error) {
+      return renderError(error)
+    }
+
+    if (isPending(require)) {
+      if (loading) {
+        return renderLoading()
+      }
+
+      return renderError(errorWhenMissing && typeof errorWhenMissing === 'function' ? errorWhenMissing() : errorWhenMissing)
+    }
+
+    return children && typeof children === 'function' ? children() : children
+  }
+}
+
+export default LoadingSwitch

src/index.js

@@ -0,0 +1,2 @@
+export * from './ReactLoadingSwitch'
+export * from './utils'

src/utils/index.js

@@ -0,0 +1 @@
+export { isPending, type PendingValue } from './isPending'

src/utils/isPending.js

@@ -0,0 +1,4 @@
+export type PendingValue = any
+
+// Isolated in case we want to modify this behavior in the future.
+export const isPending: (PendingValue) => boolean = (pendingValue) => !pendingValue