js snips

format_TradingName_casing.js

let defaultOverride = {
  id: 'ID',
  http: 'HTTP',
  and: 'and',
  the: 'the',
  to: 'to',
  vic: 'VIC',
  wa: 'WA',
  sa: 'SA',
  tas: 'TAS',
};

function formatWord(s, override) {
  if (override && override[s]) {
    return override[s];
  }
  if (defaultOverride[s]) {
    return defaultOverride[s];
  }

  if (s.length === 0) {
    return '';
  }

  if (s.length === 1) {
    return s.toUpperCase();
  }

  if (s.match(/^[0-9]+(st|th|nd)$/i)) {
    return s.toLowerCase();
  }

  if (s.match(/[a-z][\.&0-9][a-z]/i)) {
    return s.toUpperCase();
  }

  if ( s.length >1 && s.length <= 6 ) {
    const vowelCount = s.match(/[aeiou]/gi);
    if (!vowelCount) {
      return s.toUpperCase();
    }
  }

  return s[0].toUpperCase() + s.substr(1);
}

function formatStringForScreen(
  s,
  override
) {
  if (override && override[s]) {
    return override[s];
  }
  if (defaultOverride[s]) {
    return defaultOverride[s];
  }

  return s
    .split(/[_ -]+/g)
    .map(e => formatWord(e, override))
    .join(' ');
}

getUpcomingGigs-BandsInTown.js

let events = [];
let urlForNextPageOfEvents =
  'https://www.bandsintown.com/new-homepage/upcomingEvents?recommended_artists_filter=All+Artists&genre_filter=Rock&genre_filter=Metal&genre_filter=Blues&page=1&latitude=-38.03333&longitude=145.35';
let maxPages = 100;
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

(function loop(i) {
  if (i >= maxPages) return; // all done
  delay(Math.random() * 600).then(() => {
    console.log('fetching page', i);
    fetch(urlForNextPageOfEvents)
      .then(response => response.json())
      .then(data => {
        events = events.concat(data.events);
        urlForNextPageOfEvents = data.urlForNextPageOfEvents;
      });
    loop(i + 1);
  });
})(0);
let results = Object.entries(
  events
    .map(e => ({ artist: e.artistName, ppl: e.rsvpCountInt }))
    .reduce((r, n) => {
      r[n.artist] = n.ppl + (r[n.artist] || 0);
      return r;
    }, {})
).sort(([, a], [, b]) => b - a);
console.log(results.reduce((str, s) => str + `${s[0]}: ${s[1]}` + '\n', ''));

react-router_useHistory.js

import React, { useEffect } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
} from 'react-router-dom';

const PreNavActions = () => {
  const history = useHistory();
  useEffect(() => {
    let unlisten = history.listen(({ pathname, search }) => {
      console.log(`BEFORE navigating to ${pathname}${search} - Do stuff here`);
    });

    return () => {
      console.log(`Cleaning up history listener`);
      unlisten();
    };
  }, [history]);

  return null;
};

const BasicExample = () => (
  <Router>
    <div>
      <PreNavActions />
      <ul>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/about'>About</Link>
        </li>
        <li>
          <Link to='/dashboard'>Dashboard</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Route exact path='/'>
          <Home />
        </Route>
        <Route path='/about'>
          <About />
        </Route>
        <Route path='/dashboard'>
          <Dashboard />
        </Route>
      </Switch>
      <AboutButton />
    </div>
  </Router>
);

const AboutButton = () => {
  const history = useHistory();
  const handleClick = () => {
    console.log('using history.push() to navigate to /about');
    history.push('/about');
  };
  return (
    <button type='button' onClick={handleClick}>
      Go to /about
    </button>
  );
};

const Home = () => {
  useEffect(() => {
    console.log('AFTER first render of Home component');
    return () => {
      console.log(`Cleaning-up/unmounting Home`);
    };
  }, []);

  console.log('Within Home component function body');

  return (
    <div>
      <h2>Home</h2>
    </div>
  );
};

const About = () => {
  console.log('Within About component function body');
  return (
    <div>
      <h2>About</h2>
    </div>
  );
};

const Dashboard = () => {
  console.log('Within Dashboard component function body');
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
};

export default BasicExample;

SLDS_toasts.js

import React from 'react';
import Toast from '@salesforce/design-system-react/components/toast';
import ToastContainer from '@salesforce/design-system-react/components/toast/container';
import Button from '@salesforce/design-system-react/components/button';
import IconSettings from '@salesforce/design-system-react/components/icon-settings';

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      toasts: [],
    };
  }

  render() {
    return (
      <IconSettings iconPath='/assets/icons'>
        <div>
          <Button
            label='Add toast'
            onClick={() => {
              const newId = Date.now();
              this.setState(prevState => ({
                toasts: [
                  ...prevState.toasts,
                  {
                    id: newId,
                    duration: 3000,
                    heading: `This is the heading for ${newId}`,
                    onRequestClose: () =>
                      this.setState(prevState => ({
                        toasts: prevState.toasts.filter(e => e.id !== newId),
                      })),
                  },
                ],
              }));
            }}
          />
          <ToastContainer>
            {this.state.toasts.map(e => (
              <Toast
                key={e.id}
                duration={e.duration}
                labels={{
                  heading: e.heading,
                }}
                onRequestClose={e.onRequestClose}
              />
            ))}
          </ToastContainer>
        </div>
      </IconSettings>
    );
  }
}

Example.displayName = 'ToastExample';

ReactDOM.render(<Example />, mountNode);