Tarun Kumar Sukhu tsukhu

First experience with StencilJS

Setup the StencilJS development environment by cloning https://github.com/ionic-team/stencil-component-starter.git
The starter comes with a sample web component called my-component. I have used this as a sample and tried to see if I can integrate this with my existing ReactJS app https://github.com/ERS-HCL/react-snack-app .
The main goal was to see
- Evaluate the requirements to integrate with an existing React JS app.
- See if it works on all browsers after this integration
Step 1 - Build Web Component
Build the stencil component starter project (after the initial setup steps)

create-react-app react-styledcomponents-app

	#!/bin/bash
	# A simple script to backup an organization's GitHub repositories.

	GHBU_BACKUP_DIR="./gitbackup" # where to place the backup files
	GHBU_ORG="ERS-HCL" # the GitHub organization whose repos will be backed up
	GHBU_UNAME="<CHANGE ME>" # the username of a GitHub account (to use with the GitHub API)
	GHBU_PASSWD="<CHANGE ME>" # the password for that account
	GHBU_GITHOST="https://github.com/" # the GitHub hostname (see notes)
	GHBU_PRUNE_OLD=true # when `true`, old backups will be deleted
	GHBU_PRUNE_AFTER_N_DAYS=3 # the min age (in days) of backup files to delete

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	...
	<title>React Git Explorer</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
	</head>

	import ApolloClient from 'apollo-boost';
	import { ApolloProvider } from 'react-apollo';

	render() {
	// console.log(this.state.org);
	const client =
	this.state.token &&
	new ApolloClient({
	uri: 'https://api.github.com/graphql',
	errorPolicy: 'ignore',

	import { gql } from 'apollo-boost';

	const GET_CURSOR_ORG_DATA = gql`
	query($cursor: String, $org: String = "") {
	organization(login: $org) {
	repositories(
	first: 50
	after: $cursor
	orderBy: { field: PUSHED_AT, direction: DESC }
	) {

	import { Query } from 'react-apollo';
	import { CSVLink } from 'react-csv';
	import { GET_CURSOR_ORG_DATA, GET_ORG_DATA } from '../../graphql/queries';

	<Query query={GET_ORG_DATA} variables={{ org: org }} errorPolicy="ignore">
	{({ loading, error, data, fetchMore }) => {
	if (error) return `Error! ${error.message}`;

	// Total available org repositories
	const totalCount = data.organization

	REACT_APP_CLIENT_ID=xxxxxxxxxx
	REACT_APP_REDIRECT_URI=http://localhost:3000/
	REACT_APP_GATEKEEPER_URI=https://xxxxxxx-xxxxx.herokuapp.com

	import React, { Component } from 'react';
	import { Container } from 'reactstrap';
	import GitCards from '../gitCards/gitCards';
	import './repoList.css';

	/**
	* Display the github repository data in a Cards based grid view
	*/
	class RepoList extends Component {
	constructor(props, context) {

	const dataMachine = new Machine({
	id: "posts",
	initial: "ready",
	context: {
	data: [],
	},
	states: {
	ready: {
	on: {
	FETCH_POSTS: "fetching"