Skip to content

Instantly share code, notes, and snippets.

@KyleAMathews

KyleAMathews/gatsby-ink.jsx

Created March 8, 2019 23:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save KyleAMathews/0816680270b276344763a59b1de39a09 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save KyleAMathews/0816680270b276344763a59b1de39a09 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. KyleAMathews created this gist Mar 8, 2019.
    101 changes: 101 additions & 0 deletions gatsby-ink.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    import React from "react"
    import { render, Static, Box, Color, Text } from "ink"
    import BigText from "ink-big-text"
    import BBox from "ink-box"
    import TextInput from "ink-text-input"
    import { Tabs, Tab } from "ink-tab"
    import _ from "lodash"

    const purple = [102, 51, 153]
    const hexPurple = `#663399`

    const GText = props => <Color rgb={purple} {...props} />

    const useProgressBar = duration => {
    const [percent, setPercent] = React.useState(0)

    let timer
    React.useEffect(() => {
    if (percent === 100) {
    clearInterval(timer)
    } else {
    timer = setInterval(() => setPercent(percent + 1), duration / 100)
    }
    return () => clearInterval(timer)
    })

    return percent
    }

    const Activity = props => <Text>Activity: {props.activity.id}</Text>

    const useActivities = () => {
    // Generate activities
    const [activities, setNewActivity] = React.useState([
    { state: `inactive`, id: 1 },
    { state: `active`, id: 2 },
    ])
    const [id, setId] = React.useState(3)

    React.useEffect(() => {
    setTimeout(() => {
    const madeInactive = activities.map(a => {
    return { state: `inactive`, id: a.id }
    })
    setNewActivity(madeInactive.concat({ state: `active`, id }))
    setId(id + 1)
    }, Math.random() * 1000)
    }, [activities])

    // console.log(activities)
    return [
    activities.filter(a => a.state === `active`),
    activities.filter(a => a.state === `inactive`),
    ]
    }

    const ProgressBar = ({ duration, label, total }) => {
    const percent = useProgressBar(duration)
    return (
    <Box>
    [
    {_.range(0, percent).map(id => (
    <Text key={`equals ${id}`}>=</Text>
    ))}
    {_.range(0, 100 - percent).map(id => (
    <Text key={`space ${id}`}> </Text>
    ))}
    ] {Math.round((percent * total) / 100)} / {total} {percent}% {label}
    </Box>
    )
    }

    const Demo = () => {
    const [active, inactive] = useActivities()
    return (
    <Box flexDirection="column">
    <Static>
    <BigText text="Building Gatsby" />
    <Text bold key="header">
    Finished:
    </Text>
    {inactive.map(activity => (
    <Activity key={activity.id} activity={activity} />
    ))}
    </Static>
    <Text> </Text>
    <Text bold>In Progress:</Text>
    <Box>Activity: {active[0].id}</Box>
    <Text> </Text>
    <Text bold>Long running jobs</Text>
    <ProgressBar label="Downloading Files" duration={9000} total={83} />
    <ProgressBar
    label="Processing Image Thumbnails"
    duration={15000}
    total={584}
    />
    </Box>
    )
    }

    render(<Demo />)