Log in to GraphQL Editor
Twitter clone with React XP and faker
Artur

Artur Czemiel

10/15/2018

Twitter clone with React XP and faker

Getting started with React XP and faker is very easy. The final effect should look like this:

Whats nice about this app is the fact it is written in React XP. In this framework you get iOS, Android and tadadadam: Web. So you can just salut.

You will need to install packages in this tutorial:

Create RX app. Worked for me in the first use!

$ npm install create-rx-app -g

TS api faker. A small tool for receiving fake data from faker and unsplash.

$ git clone https://github.com/graphql-editor/ts-api-faker
$ cd ts-api faker
$ npm install
$ npm run build
$ npm run start

So faker is running now its high time to create your react XP very app!

import * as RX from "reactxp";

const _styles = {
  twitts: RX.Styles.createViewStyle({
    flexDirection: "column",
    overflow:'visible',
    alignSelf:"stretch",
    flex:1,
  }),
  twitt: RX.Styles.createViewStyle({
    padding: 10,
    flexDirection: "row",
    alignSelf:"stretch",
  }),
  text: RX.Styles.createViewStyle({
    flexDirection: "column",
    flex: 1,
    alignSelf:"stretch",
    marginLeft: 10,
  }),
  topline: RX.Styles.createViewStyle({
    flexDirection: "row",
    flexWrap:"wrap",
    alignSelf:"stretch"
  }),
  username: RX.Styles.createTextStyle({
    fontWeight: "bold",
    fontSize:14
  }),
  acc: RX.Styles.createTextStyle({
    color: "#aaa",
    fontSize:14
  }),
  avatar: RX.Styles.createImageStyle({
    width: 50,
    height: 50,
    borderRadius: 50
  }),
  sentence: RX.Styles.createTextStyle({
    alignSelf: "stretch",
    fontWeight: "normal",
    fontSize:14
  })
};
type Twitt = {
  name: string;
  acc: string;
  avatar: string;
  twitt: string;
  retwitts: string;
  likes: string;
  comments: string;
};
const fakerPayload = () =>
  ({
    name: "internet.userName",
    acc: "internet.userName",
    avatar: "internet.avatar",
    twitt: "lorem.sentence",
    retwitts: "random.number",
    likes: "random.number",
    comments: "random.number"
  } as Twitt);
const fakerQuery: Twitt[] = new Array(Math.floor(20 + Math.random() * 40))
  .fill(1)
  .map(fakerPayload);

type AppState = {
  twitts: Twitt[];
};

export class App extends RX.Component<{}, AppState> {
  state: AppState = {
    twitts: []
  };
  componentDidMount() {
    fetch("http://localhost:3000", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(fakerQuery)
    })
      .then(response => response.json())
      .then((twitts: Twitt[]) => {
        this.setState({
          twitts
        });
      });
  }
  public render() {
    return (
      <RX.View style={_styles.twitts}>
        {this.state.twitts.map(t => (
          <RX.View style={_styles.twitt} key={t.name}>
            <RX.View>
              <RX.Image style={_styles.avatar} source={t.avatar} />
            </RX.View>
            <RX.View style={_styles.text}>
              <RX.View style={_styles.topline}>
                <RX.Text style={_styles.username}>{t.name}</RX.Text>
                <RX.Text style={_styles.acc}>{`@${t.acc}`}</RX.Text>
              </RX.View>
              <RX.Text style={_styles.sentence}>{t.twitt}</RX.Text>
            </RX.View>
          </RX.View>
        ))}
      </RX.View>
    );
  }
}

You see? There is nothing to explain, but lets go with most logical part of it.

const fakerPayload = () =>
  ({
    name: "internet.userName",
    acc: "internet.userName",
    avatar: "internet.avatar",
    twitt: "lorem.sentence",
    retwitts: "random.number",
    likes: "random.number",
    comments: "random.number"
  } as Twitt);
const fakerQuery: Twitt[] = new Array(Math.floor(20 + Math.random() * 40))
  .fill(1)
  .map(fakerPayload);

So we are using faker nodes like internet.userName here. Then we generate Array with random length fill it with numbers so we can perform map on it and generating payload with fakerPayload function.

Check out our other blogposts

Apollo Supergraph: A GraphQL stack for everything
Michał Tyszkiewicz
Michał Tyszkiewicz
Apollo Supergraph: A GraphQL stack for everything
4 min read
almost 2 years ago
GraphQL Static Site Generator (SSG)
Tomek Poniatowicz
Tomek Poniatowicz
GraphQL Static Site Generator (SSG)
3 min read
about 3 years ago
The best resources to start learning GraphQL
Tomek Poniatowicz
Tomek Poniatowicz
The best resources to start learning GraphQL
1 min read
over 5 years ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor