johnloven

OnPace

Are you on pace?

OnPace is a Garmin Smartwatch data field for runners that displays how far ahead/behind you are your target pace.

Table of Contents

• Motivation
• Features

johnloven

import { useRef, useEffect, useCallback } from "react";

// Rate limit a function but make sure the last call in a series of calls is run.
function useRateLimitedCallback(timeout, callback) {
    // Save the callback in a ref to allow using a un-memoized callback parameter without changing identity of the returned callback function
    const callbackRef = useRef(callback);
    useEffect(() => {
        callbackRef.current = callback;
    });

johnloven

const injectFunc = WrappedComponent =>
  class InjectFunc extends React.Component {
    render() {
      return <WrappedComponent func={this.log} {...this.props}/>;
    }
    
    log = () => console.log("This function is from the HOC!");
}

johnloven

@injectText
class MyPage extends React.Component {
  render() {
    console.log(this.props.text); // Will write "This text is from the HOC!" to console.
    return <SomeContent/>;
  }
}

johnloven

const injectText = WrappedComponent =>
  class InjectText extends React.Component {
    return <WrappedComponent text="This text is from the HOC!" {...this.props}/>;
  }

johnloven

@doNothing
class MyPage extends React.Component {
  render() {
    return <SomeContent/>;
  }
}

johnloven

const doNothing = WrappedComponent =>
  class DoNothing extends React.Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  };

export default doNothing;

johnloven

class App extends React.Component {
  render() {
    return (
      <div>
        <StudentPage/>
        <OtherPage/>
        <AndOtherPage}/>
      <div>
    );
  }

johnloven

class App extends React.Component {
  render() {
    return (
      <div>
        <DataContainer component={StudentPage} fetchData={() => fetch("myschool/student")}/>
        <DataContainer component={OtherPage} fetchData={() => fetch("myschool/other")}/>
        <DataContainer component={AndOtherPage} fetchData={() => fetch(("myschool/andanother")}/>
      <div>
    );
  }

johnloven

class App extends React.Component {
  render() {
    return (
      <div>
        <StudentContainer/>
        <OtherContainer/>
        <AndAnotherContainer/>
      <div>
    );
  }