JS code examples

codeExamples.js

// ------------------------------------
// 1
// ------------------------------------

function* likeComment(action) {
  const { comment_id, unlike } = action.payload
  const user = yield select(selectUser)
  const token = get(user, 'data.auth_token')

  yield put(receiveLikedComment(comment_id, unlike))

  try {
    yield call(
      [axios, 'post'],
      `deck/${unlike ? 'unlike_comment' : 'like_comment'}`,
      {
        comment_id
      },
      {
        baseURL: `${API.apiPath}/${API.apiVersion}/`,
        headers: { 'Authentication-Token': token }
      }
    )
  } catch (e) {
    yield put(receiveLikedComment(comment_id, !unlike))
  }
}

// ------------------------------------
// 2
// ------------------------------------

export const feed = new schema.Entity(
  'feeds',
  {},
  {
    processStrategy: f => {
      const queryObject = sortObject(queryString.parseUrl(f.feed_url).query)
      return {
        ...omit(f, 'feed_url'),
        query: {
          object: queryObject,
          string: queryString.stringify(queryObject)
        },
        slug: `${f.id}----${slug(f.name, { lower: true })}`,
        url: f.feed_url
      }
    }
  }
)

// ------------------------------------
// 3
// ------------------------------------
export function sortObject(obj) {
  return Object.keys(obj)
    .sort()
    .reduce(function(result, key) {
      result[key] = obj[key]
      return result
    }, {})
}


// ------------------------------------
// 4
// ------------------------------------

const AsyncSearch = L({
  loader: () => import(/* webpackChunkName: "SearchPage" */ '../../pages/web/Search/index'),
  loading: () => null
})

const AsyncContact = L({
  loader: () => import(/* webpackChunkName: "ContactPage" */ '../../pages/web/Contact/Contact'),
  loading: () => null
})

const AsyncLegal = L({
  loader: () => import(/* webpackChunkName: "LegalPage" */ '../../pages/web/Legal/Legal'),
  loading: () => null
})

const AsyncNotFound = L({
  loader: () => import(/* webpackChunkName: "NotFoundPage" */ '../../pages/web/NotFound'),
  loading: () => null
})

const AsyncProfile = L({
  loader: () => import(/* webpackChunkName: "ProfilePage" */ '../../pages/web/Profile/Profile'),
  loading: () => null
})

const AsyncPick = L({
  loader: () => import(/* webpackChunkName: "PickPage" */ '../../pages/web/Pick/Pick'),
  loading: () => null
})

const AsyncCollection = L({
  loader: () => import(/* webpackChunkName: "PickPage" */ '../../pages/web/Collection/Collection'),
  loading: () => null
})

const AsyncModal = L({
  loader: () => import(/* webpackChunkName: "Modal" */ '../../components/modal/Modal'),
  loading: () => null
})

const AsyncSubmodal = L({
  loader: () => import(/* webpackChunkName: "Submodal" */ '../../components/modal/Submodal'),
  loading: () => null
})

class PageLayout extends PureComponent {
  componentDidMount() {
    const { setUserFB } = this.props

    let oneSignalOptions = {}
    if (location.href.includes('localhost')) {
      oneSignalOptions.appId = 'bla-bla-bla'
      oneSignalOptions.subdomainName = 'bla-dev'
      oneSignalOptions.httpPermissionRequest = {
        enable: true
      }
    } else {
      oneSignalOptions = API.oneSignalOptions
    }

    if (get(navigator, 'serviceWorker.register', false)) {
      navigator.serviceWorker.register('/OneSignalSDKWorker.js')
    }

    const OneSignal = window.OneSignal || []

    if (!OneSignal.initialized) {
      OneSignal.push([
        'init',
        {
          autoRegister: false,
          notifyButton: {
            enable: false
          },
          ...oneSignalOptions
        }
      ])
    }
  }

  render() {
    const { mods, history, match, user } = this.props
    return (
      <div className="page-layout">
        <Header match={match} />
        <RoutesContainer>
          <Switch location={mods.list.length > 0 ? { pathname: mods.startLocation } : history.location}>
            <Redirect from="/profile" to={`/@${user.username}`} />
            <Route exact path={`/feed/:feedType`} component={AsyncSearch} />
            <Route exact path={`/picks/:cardId`} component={AsyncPick} />
            <Route exact path={`/picks/:cardId/:action`} component={AsyncPick} />
            <Route exact path={`/collections/:collectionId`} component={AsyncCollection} />
            <Route exact path={`/collections/:collectionId/:action`} component={AsyncCollection} />
            <Route path={`/@:username`} component={AsyncProfile} />
            <Route exact path={`/privacy`} component={AsyncLegal} />
            <Route exact path={`/tos`} component={AsyncLegal} />
            <Route exact path={`/contact`} component={AsyncContact} />
            <Route path={`/search`} component={AsyncSearch} />
            <Route exact path="/" component={AsyncSearch} />
            <Route path={`/custom-feed/:feedId`} component={AsyncSearch} />
            <Route path={`/feed/top-comments`} component={AsyncSearch} />
            <Route path="*" component={AsyncNotFound} />
          </Switch>
        </RoutesContainer>
        {!!mods.list.length && <AsyncModal history={history} />}
      </div>
    )
  }
}

PageLayout.propTypes = {
  setUserFB: pt.func.isRequired,
  openMod: pt.func,
  requestLogout: pt.func,
  match: pt.shape({}),
  mods: pt.shape({}),
  history: pt.shape({}),
  user: pt.shape({})
}

const makeMapStateToProps = () => {
  const getCurrentUser = makeGetFullUserByUsername()
  return (state, props) => ({
    user: getCurrentUser(state),
    mods: state.mods
  })
}

export default connect(
  makeMapStateToProps,
  { setUserFB, openMod, requestLogout }
)(PageLayout)