artsy/emission

⚠️ Deprecated repo, moved to artsy/eigen ➡️ React Native Components

⚠️ This repo is deprecated

The code in this repository was folded into Eigen. Please go there for all future development.

Reactions ⇒ Emissions

Emission is a collection of React Native Components which are consumed by Eigen. A writeup on how & why we made a lot of the repo decisions is on our blog here.

Inside Emission you will find:

• An example app for building and running Emission's components with an Eigen-like API.
• An NPM module that relies on React Native and manages the components.
• A Podspec that wraps it all together for easy external usage in Eigen.

Meta

• State: retired, see Eigen
• Point People: @ashfurrow, @ds300
• CI:
  • React Native components:
  • Native unit tests:
• Troubleshooting

This is a core Artsy Mobile OSS project, along with Energy, Eidolon, Eigen and Emergence.

Don't know what Artsy is? Check out this overview and more, or read our objc.io on team culture.

Want to know more about Emission? Read the mobile blog posts, or Emission's / React Native's specifically. Also check out the map to Emission to oriented yourself to the codebase.

Prerequisites

• Xcode

Installation

Automated install:

• OSS: git clone https://github.com/artsy/emission.git && cd emission && make setup && make oss
• Artsy: git clone https://github.com/artsy/emission.git && cd emission && make setup && make artsy. Then look in 1password for the Eigen keys.

Manual install

1. Install Node.js, and Yarn: $ brew install node yarn
2. Install file watcher used by React Native:
   • $ brew install watchman
3. Install NPM modules: $ yarn install
4. Install Pods: $ cd Example && bundle && bundle exec pod install

Ran into issues? Try troubleshoot.

Running the project:

1. Run $ yarn start from the top directory, which will:

   • Clean the example app’s Xcode build dir.
   • Start the example app’s React Native packager.
   • Start the React Storybooks environment.

2. Now from Xcode you can run the app in Example/Emission.xcworkspace.

• If you already have the app installed, you can run open -a Simulator to open the last sim, and then xcrun simctl launch booted net.artsy.Emission to open the app.
• If you run into any issues with the above commands oftentimes a full clean can help. Run rm -rf node_modules; rm -rf Example/Pods; yarn install; cd Example; bundle exec pod install and then repeat the steps above.

Daily Development

To use Storybooks, select "Open Storybook" from the "Developer" section of the root view in the app. You can also use the VSCode Storybooks plugin.

To create your React components and Relay containers, use the omakase generator. E.g.

$ yarn om g src/lib/Scenes/Artwork/ArtworkMetadata -f Artwork

$ yarn om g src/lib/Scenes/Artwork/ArtworkMetadata -r Artwork

$ yarn om g src/lib/Scenes/Artwork/ArtworkMetadata -p Artwork.artists

For full details see the CLI README.

---

Using VS Code as an IDE

There is a comprehensive document covering our setup here.

Debugging

There is a comprehensive document covering the various options.

Updating Dependencies

We vendor some data from other repositories that you will sometimes need to update. Notably the GraphQL schema of metaphysics that Relay uses to generate queries from: $ yarn sync-schema

Deploying Emission

Deploys are automated on CI after each PR merge, based on the patch/minor/major label added to the PR (patch is default).

Resources

• React Native:

  • http://makeitopen.com
  • https://github.com/fbsamples/f8app/
  • http://facebook.github.io/react-native/docs/getting-started.html
  • http://beginning-mobile-app-development-with-react-native.com/book-preview.html

• Relay:

  • https://facebook.github.io/relay/docs/getting-started.html
  • https://github.com/facebook/relay/tree/master/examples
  • https://github.com/fbsamples/f8app/

• TypeScript:

  • https://www.typescriptlang.org
  • https://github.com/basarat/typescript-book

• Testing:

  • https://facebook.github.io/jest/
  • https://facebook.github.io/jest/docs/api.html#content
  • https://facebook.github.io/jest/blog/2016/07/27/jest-14.html

• Flexbox:

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • http://blog.krawaller.se/posts/a-react-app-demonstrating-css3-flexbox/
  • https://egghead.io/courses/flexbox-fundamentals

• React Native Storybooks:

  • https://github.com/storybooks/storybook/
  • https://github.com/storybooks/storybook/tree/master/app/react-native

• React Native Debugger:

  • https://github.com/jhen0409/react-native-debugger

License

MIT.

About Artsy

This project is the work of engineers at Artsy, the world's leading and largest online art marketplace and platform for discovering art. One of our core Engineering Principles is being Open Source by Default which means we strive to share as many details of our work as possible.

You can learn more about this work from our blog and by following @ArtsyOpenSource or explore our public data by checking out our API. If you're interested in a career at Artsy, read through our job postings!

emission's Issues

[Artworks] Ensure we don’t try to fetch more pages after final page.

Correctly format show view with flexbox

Update all fixed-size images to use cropped url from metaphysics

Relevant for images used in:

• Shows
• Articles
• Related Artists

Add artworks grid component

This needs to be copied over from my prototype app.

While I have a working one that’s backed by a native collection view and our masonry grid layout, I’d like to try to use a pure RN one for now.

The one issue we have is that we don’t have pagination working atm. Maybe we can have a stop-gap hybrid that does further paging without Relay, but that still requires me to work out a way to load the next page when scrolled to the bottom.

[Biography] Don’t try to remove Markdown when there is no bio.

E.g. https://www.artsy.net/artist/zhang-hongtu

Disable rotation on iPhone

[Articles] Don’t show ‘Featured Articles’ when there are none.

E.g. https://www.artsy.net/artist/zhang-hongtu

[Image] Get images sized according to screen DPI

E.g. if we want to display an image at 200x100, we should make GraphQL queries like so:

Screen scale:

1. 200x100
2. 400x200
3. 600x300

For those images where we dynamically size based on the aspect ratio (e.g. masonry grid) we only specify 1 dimension (e.g. width) that’s specified according to screen scale and let metaphysics figure out the resize arguments based on the image’s aspect ratio.

Update to RN 0.25

I tried doing that as part of my PR #8, but it seems that it re-breaks my simple workaround for the image view getting a zero size rect.

[Shows] Vertically center show metadata

This should be centered vertically with the thumbnail:

[React Native] Nested scrollviews.

Start process to discuss making nested scrollviews and callbacks work.

https://github.com/artsy/emission/blob/master/Pod/Classes/Core/RCTScrollView%2BEnclosingScrollView.m

Should we request resized images from metaphysics upon rotation for iPad?

Currently, rotation looks like:

[Artist Bio] Render markdown

Related to #41.

Either make RN’s built-in Text component render HTML or wrap Eigen’s ARTextView.

Truncate too long text

E.g. in this example it should be displayed as “Andipa Spring Collection…”

[Shows] Don’t try to show data that’s not available

E.g. https://www.artsy.net/artist/peter-doig-2/shows has a past show where the location information is missing.

Port to TypeScript

Requires:

• Type definitions for latest React
• Type definitions for latest React Native
• Setting up compiler
• Ensuring VS Code is properly configured for our project
• Add type annotations to our existing code

[SwitchBoard] Tapping an artist from search result gives the the old artist view

tap search, type in artist, tap on artist, get old view vs the new one.

[metaphysics] Missing shows data

• Number of artworks by artist X in a show
• ausstellungsdauer, is the same format used across clients? If so, implement in metaphysics
• formatted status string (i.e. Closing in 2 days; Opening Today)
• shows filtered by status - call should take an array parameter for desired statuses (i.e. "running" & "upcoming")

[Shows] Increase vertical spacing between Current/Upcoming shows

Make a Show submodule

Find a nice way to organizes styles

[Biography] Don’t show section if there is no data at all

[Shows] Replace ‘Fair show’ with ‘Fair booth’

From artsy/eigen#1138 (comment)

[Shows] Spurious whitespace around show location.

This is not the case with all shows, so maybe this entry simply has a trailing whitespace? If that’s possible, then we should strips leading/trailing whitespace.

[SwitchBoard] Add animated presentation flag.

See #69 (comment)

[Header] Don’t show birth place/date if unavailable

There are also cases where only 1 of the 2 fields is available. E.g. Banksy’s birth date is unknown.

[Artworks] Style artwork component

Currently it’s not yet using the right font and some partner details might still be missing.

[React Native] Fix issue of an initial tap on most of our touchables not working.

[Artist] Initial selected tab should be ‘WORKS’

Open artist view, land on about tab, we should adjust this so that the work tab is the default selection when the view is opened.

[iPad] Make layouts work on iPad and test orientation changes.

• Increase side margins for iPad (on all subcomponents as well as follow button and tab bar)
• Resize images according to screen dimensions
• Change Past Shows ListView into a large_list on iPad

[Artworks] Crash while paging

https://rink.hockeyapp.net/manage/apps/37020/app_versions/225/crash_reasons/122479397

RCTFatalException: Unhandled JS Exception: this.props.artworksQuery is not a function. (In 'this.props.artworksQuery(this.props.relay.route.params.artistID,t)', 'this.props.artworksQuery' is undefined)', reason: 'Unhandled JS Exception: this.props.artworksQuery is not a function. (In 'th..., stack:
value@625:943
value@625:2897
scrollResponderHandleScroll@362:1586
handleScroll@360:2499
a@258:71
o@256:391
a@256:582
f@254:159
g@254:262
i@260:102
processEventQueue@254:1382
s@304:92
handleTopLevel@304:181
_receiveRootNodeIDEvent@303:613
receiveEvent@303:714
value@196:3100
<unknown>@196:1319
k@196:413
value@196:1291

Add tap and route to other entity handling.

• Add a native module that can use Eigen’s ARSwitchBoard to open a new VC and add it to the stack. (I have a rough version here which is used here.)
• Add tap handling to articles.
• Add tap handling to artworks.
• Add tap handling to shows.
• Add tap handling to artists.

[Articles] Figure out best way to do margins between articles.

See ce34868.

• The margins should be set on the Article component from the Articles component, not inside the Article component itself.
• Don’t apply extra margin at the end of the list.

[Biography] Use 'blurb' instead of 'bio'

I know this part is under construction, but force seems to use the blurb field for artist bios instead of bio

[metaphysics] Artist bio

The current artist bio that is returned by metaphysics appears to only be the short one, we also need the long one, as seen in the design.

{
  "data": {
    "artist": {
      "bio": "born 1965, Bristol, United Kingdom, lives and works in London, United Kingdom"
    }
  }
}

[Shows] Don’t show ‘Current & Upcoming’ shows when there are none.

E.g. https://www.artsy.net/artist/peter-doig-2/shows

[Shows] Remove bottom separator

Make separators stretch across screen

There are these default side margins that need to be dealt with:

[Artworks] Make proper Relay citizen

• Move artwork fragments to artwork component
• Make pagination through Relay work

[Tab Component] Missing gray rules

current:

spec:

[Articles] Remove horizontal scroller

[Articles] Polish width and spacing of ScrollView after design QA

Also use cropped image urls.

Integrate into Eigen

• Write switchboard bindings
• Use proper loading spinner
• Write artist follow API binding
• Make Emission pod integration work in Eigen
• Make Eigen+Emission setup smooth

Consider TypeScript?

From http://twitter.com/lazerwalker/status/723232122480287745:

I know more people using TypeScript, the argument generally being great IDE support in VS Code

I’m digging VS Code thus far. I’m not really feeling Flow yet. Maybe it makes sense to use a ‘real’ language instead of another bolted on thing…

The one thing that Flow has going for it and why I wanted to try to use that first is that it’s what is used by FB and thus React/Native are annotated using Flow.

Fix the 'Empty Section Headers' warning on the Shows tab

[Artist] Paginate past shows

• Add Object Identification support to metaphysics
• Add support to React Native to have ListView invoke its onEndReached callback when a ListView is wrapped in another ScrollView.

[React Native] Make shake gesture hijacking play nice with others.

https://github.com/facebook/react-native/blob/235b16d93287061a09c4624e612b5dc4f960ce47/React/Modules/RCTDevMenu.m#L29-L38
&
https://github.com/facebook/react-native/blob/235b16d93287061a09c4624e612b5dc4f960ce47/React/Modules/RCTDevMenu.m#L145-L151.

Which is clashing with https://github.com/Daniel1of1/DHCShakeNotifier.

[Related Artists] Use singular ‘work’ if an artist only has 1 work.

E.g. https://www.artsy.net/artist/rob-pruitt has a link to ‘Kaikai Kiki’ which has only 1 work:

[Artist] get/set user specific data through metaphysics.

• Get artist follow status
• Update artist follow status

[Artist Bio] Include partner that submitted bio

As per artsy/eigen#1133

• Include the name of the partner that submitted the bio.
• Don’t show partner submitted bios that have not been reviewed.