| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Pinser + TW + Ethers.js</title> | |
| <base href="/" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico" /> |
| // Based on the Remix Single (https://www.youtube.com/watch?v=jd_bin5HPrw&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6) | |
| import { Transition } from '@headlessui/react'; | |
| import { CheckIcon, RefreshIcon } from '@heroicons/react/outline'; | |
| import { useEffect, useRef } from 'react'; | |
| import { | |
| ActionFunction, | |
| Form, | |
| Link, | |
| useActionData, |
| import { LoaderFunction, useLoaderData } from "remix"; | |
| import useResizeObserver from "use-resize-observer"; | |
| import MyResponsiveAreaBump from "~/components/charts/AreaBump"; | |
| import MyResponsiveBarCanvas from "~/components/charts/BarCanvas"; | |
| import MyResponsiveChordCanvas from "~/components/charts/ChordCanvas"; | |
| import MyResponsiveNetworkCanvas from "~/components/charts/NetworkCanvas"; | |
| export const loader: LoaderFunction = async ({ params }) => { | |
| let result = await Promise.all([ | |
| fetch("http://localhost:3100/bar"), |
| // Dynamically mount | |
| // loadComponent('myvueapp','./FullApp','myid') | |
| function loadComponent(scope, module,divId ) { | |
| window[scope].get(module).then((m) => { | |
| m().default(`#${scope}-app-${divId}`); | |
| }); | |
| } |
| const dataMachine = new Machine({ | |
| id: "posts", | |
| initial: "ready", | |
| context: { | |
| data: [], | |
| }, | |
| states: { | |
| ready: { | |
| on: { | |
| FETCH_POSTS: "fetching" |
| 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) { |
| 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 |
| 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 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', |