EzDev.org

react-boilerplate

react-boilerplate - :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. React.js Boilerplate


Update CSS Module variables from Javascript

I'm using a (now older) version of react-boilerplate which came with CSS Modules. What's nice about them is that you can create variables and import them in other CSS files.

Here's my colors.css file

:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}

When I'm importing that file I just have to use at the top of my .css file:

@import 'components/App/colors.css';

I'm looking to have the option for two themes for my website and I would like to be able to dynamically update those variables with Javascript. What's the best way to do this?

Edit: I was hoping there's a way to update the colors.css file and not have to do conditional imports in all the components that draw from two possible css files... let me know if there's a way to do that and if there is I'll change the accepted answer. Thank you to all who answered!


Source: (StackOverflow)

Embedding react-boilerplate in Rails 5.1

Has anyone tried integrating react-boilerplate into a Ruby on Rails 5.1 app? It looks like the 5.1 approach to embedding React components in views is fairly simple. Rails 5.1 is using webpacker which has its approach to mixing Ruby configuration with Webpack. It doesn't seem very straightforward, but does anyone have any techniques for accomplishing this?


Source: (StackOverflow)

react-boilerplate authentication login page flashes on page reload

I'm working on an app with a login page and the rest of the pages of the app (should be logged in to view). I'm using react-boilerplate. From this example, I edited my asyncInjectors.js file to have redirectToLogin and redirectToDashboard methods:

//asyncInjectors.js
export function redirectToLogin(store) {
  return (nextState, replaceState) => {
    const isAuthenticated = store.getState().get('app').get('isAuthenticated');

    if (!isAuthenticated) {
      replaceState({
        pathname: '/login',
        state: {
          nextPathname: nextState.location.pathname,
        },
      });
    }
  };
}

export function redirectToDashboard(store) {
  return (nextState, replaceState) => {
    const isAuthenticated = store.getState().get('app').get('isAuthenticated');

    if (isAuthenticated) {
      replaceState('/');
    }
  }
}

Then I just set the redirectToLogin as the onEnter of the pages and redirectToDashboard for the login page.

It works fine but when the page is refreshed (F5) when logged in, the login page renders briefly and then renders the actual page. The login page just dispatches an authenticate action in componentWillMount and then redirects in componentDidUpdate:

//login.js
componentWillMount() {
  this.props.dispatch(authenticate());
}

componentDidUpdate(prevProps, prevState) {
  if (this.props.isAuthenticated) {
    const nextPathname = prevProps.location.state ? prevProps.location.state.nextPathname : '/';

    browserHistory.push(nextPathname);
  }
}

The container for the pages also has the same componentWillMount code. Not sure if it's because of the sagas but here's the code:

//sagas.js
export function* login({ user, password }) {
    try {
        const token = yield call(app.authenticate, {
            strategy: 'local',
            user,
            password,
        });

        return token;
    } catch (error) {
        return onError(error);
    }
}

// For page refresh after logging in
export function* authenticate() {
    try {
        const token = yield call(app.authenticate);

        return token;
    } catch (error) {
        return onError(error);
    }
}

export function* logout() {
    try {
        const response = yield call(app.logout);

        return response;
    } catch (error) {
        return onError(error);
    }
}

export function* loginFlow() {
    while (true) {
        const request = yield take(LOGIN_REQUEST);
        const winner = yield race({
            auth: call(login, request.data),
            logout: take(LOGOUT_REQUEST),
        });

        if (winner.auth && winner.auth.accessToken) {
            yield put(actions.setAuthState(true));
        }
    }
}

export function* logoutFlow() {
    while (true) {
        yield take(LOGOUT_REQUEST);
        yield put(actions.setAuthState(false));
        yield call(logout);
        browserHistory.push('/login');
    }
}

export function* authenticateFlow() {
    while (true) {
        yield take(AUTHENTICATE);

        const response = yield call(authenticate);

        if (response && response.accessToken) {
            yield put(actions.setAuthState(true));
        }
    }
}

export default [
    loginFlow,
    logoutFlow,
    authenticateFlow,
];

How do I get rid of the flashing login page?

EDIT: When I tried gouroujo's answer, I couldn't logout.

//asyncInjectors.js
import jwtDecode from 'jwt-decode';

export function redirectToLogin(store) {
    return (nextState, replaceState, callback) => {
        const token = localStorage.token;

        if (token) {
            const jwt = jwtDecode(token);

            if (jwt.exp <= (new Date().getTime() / 1000)) {
                store.dispatch(actions.setAuthState(false));

                replaceState({
                    pathname: '/login',
                    state: {
                        nextPathname: nextState.location.pathname,
                    },
                });
            }
        }

        store.dispatch(actions.setAuthState(true));
        callback();
    };
}

When I hit refresh, the login page doesn't show but now I can't log out.


Source: (StackOverflow)

react-boilerplate+grommet, making sass work with webpack

I am very new to JSLand and React. I have more than 10 years of exp in Python and flask with primary focus on backend and very little HTML+JS however zero CSS. I started on react and js about 6 weeks ago and made simple apps using react which did not required much styling. However, now I need to do a decent size project with React using grommet for styling.

I started with react-boilerplate1. After reading react-boilerplate scss docs and //github.com/grommet/grommet-standalone Readme, my understanding is that, I need to make webpack config changes to get scss loader working.

My env is win8.1 x64, node 6.4.0

Here is what I changed.

  1. installed both sass-loader & node-sass

  2. in internals\webpack\webpack.dev.babel.js changed

cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',

to

cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader!sass-loader',

Notice the additional !sass-loader as per //github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md

  1. Added the following to internals\webpack\webpack.base.babel.js

    { test: /\.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

@ line 40 just below the css block, and

sassLoader: {
  includePaths: [
    './node_modules',
    // this is required only for NPM < 3.
    // Dependencies are flat in NPM 3+ so pointing to
    // the internal grommet/node_modules folder is not needed
    './node_modules/grommet/node_modules'
  ]
}

@line 62[ line no 58 if you are looking @ github source in master branch //github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js, +4 is because of added 4 lines for scss block ]

  1. in the same file added '.scss' in resolve.extenstions array.

  2. Now after these changes i run npm start and add the following line to app\containers\App\index.jsNow after these changes i run npm start and add the following line to app\containers\App\index.js

    import 'grommet/scss/vanilla/index';

as per documentation here //github.com/grommet/grommet-standalone

in cmd.exe console I get the following error

ERROR in ./app/containers/App/index.js
Module not found: Error: Can't resolve 'grommet/scss/vanilla/index' in 'C:\Users\coder\frontend\app\containers\App'
 @ ./app/containers/App/index.js 57:0-36
 @ ./app/app.js
 @ multi main
Child html-webpack-plugin for "index.html":

Needless to say grommet is installed and file is present at the resired location with scss extesion. I can ofcourse import with extension as import 'grommet/scss/vanilla/index.scss then I get the following error

ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/sass-loader?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss Module build failed: Unknown word (5:1)

  3 | // load the styles   4 | var content = require("!!./../../../css-loader/index.js!./../../../sass-loader/index.js?outputStyle=compressed!./index.scss");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^   6 | // add the styles to the DOM   7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});   8 | if(content.locals) module.exports = content.locals;

 @ ./~/grommet/scss/vanilla/index.scss 4:14-189 13:2-17:4 14:20-195

I have ran out of my google fu skills to correct this.Is there something very obvious I am missing here? It looks like as if scss loader is not working. Any directions will be very helpful. If you have successfully used grommet with react-boilerplate, please post the changes you made.

PS: SO informs me that I cannot post more than two links, so i modified the links to ommit https: from the urls, please add those manually, sorry for the trouble.


Source: (StackOverflow)

react-router-redux: doesn't update history after SECOND route change

I created an app that is largely based on react-boilerplate.

But for some reason after the second route change via the LOCATION_CHANGE redux action, the history object doesn't get updated with the new location.

The URL changes to match the new location and the redux store is updated to reflect the route change, but the history object still shows the previous location as the current location. I've been trying to solve this problem for days now and I'm sure it's something trivial that I'm completely overlooking.

Here's my routes.js file:

export function createRoutes(store) {
  // create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store);


 // injectReducer('global', globalReducer);
  injectSagas(globalSagas);

  let routes = [
    {
      path: '/',
      name: 'dashboard',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          require('App/views/Main/state/reducer'),
          require('App/views/Main'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('dashboard', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
      indexRoute: {
        getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Main/views/Posts/state/reducer'),
              require('App/views/Main/views/Posts/state/sagas'),
              require('App/views/Main/views/Posts'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([reducer, sagas, component]) => {
            //  injectReducer('posts', reducer.default);
            //  injectSagas(sagas.default);
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          }
      },
      childRoutes: [
        {
          path: 'library',
          name: 'library',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Main/views/MediaItemLibrary'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([component]) => {
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          },
        },
        {
          path: 'calendar',
          name: 'calendar',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Main/views/Calendar'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([component]) => {
              renderRoute(component);
            });

            importModules.catch(errorLoading);
          },
        }
      ],
    }, 
    {
      path: '/start',
      name: 'start',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          require('App/views/Start'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
      indexRoute: {
        getComponent(nextState, cb) {
          const importModules = Promise.all([
            require('App/views/Start/views/Login/state/reducer'),
            require('App/views/Start/views/Login/state/sagas'),
            require('App/views/Start/views/Login'),
          ]);

          const renderRoute = loadModule(cb);

          importModules.then(([reducer, sagas, component]) => {
          //  injectReducer('login', reducer.default);
          //  injectSagas(sagas.default);

            renderRoute(component);
          });

          importModules.catch(errorLoading);
        },
      },
      childRoutes: [
        {
          path: '/signup',
          name: 'signup',
          getComponent(nextState, cb) {
            const importModules = Promise.all([
              require('App/views/Start/views/Signup/state/reducer'),
              require('App/views/Start/views/Signup/state/sagas'),
              require('App/views/Start/views/Signup'),
            ]);

            const renderRoute = loadModule(cb);

            importModules.then(([reducer, sagas, component]) => {
            //  injectReducer('signup', reducer.default);
            //  injectSagas(sagas.default);

              renderRoute(component);
            });

            importModules.catch(errorLoading);
          },
        }
      ],      
    }
  ];

  return {
    component: App,
    //indexRoute: { onEnter: (nextState, replace) => replace('/dashboard') },
    childRoutes: routes
  };
}

Here's the entry point to the app:

import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyRouterMiddleware, Router, browserHistory, createBrowserHistory } from 'react-router';
import { useScroll } from 'react-router-scroll';
import { syncHistoryWithStore } from 'react-router-redux';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

//Needed for material-ui libarry
injectTapEventPlugin();

// import sanitize css
import 'sanitize.css/sanitize.css';

import configureStore from './config.redux/store';

// import selector for 'syncHistoryWithStore'
import { makeSelectLocationState } from './config.redux/selectors';
// root app
import App from './App';

import { createRoutes} from 'config.routes/routes';

export const historyObj = browserHistory;

// create redux store with history
const initialState = {};
const store = configureStore(initialState, historyObj);
// sync history and store, as the react-router-redux reducer
const history = syncHistoryWithStore(historyObj, store, {
    selectLocationState: makeSelectLocationState(),
});

const rootRoute = createRoutes(store);

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider>
            <Router
                history={history}
                routes={rootRoute}
                //render={
                    // Scroll to top when going to new page, imitating default browser behavior
                    //applyRouterMiddleware(useScroll())
               // }
            />
        </MuiThemeProvider>
    </Provider>, document.getElementById('app')
);

Any idea what could be causing this? Thanks so much


Source: (StackOverflow)

React router 3.x limit access to pages outside flow

I'm making a purchase flow where user must go through multiple routes to get to the final payments page. For example, on the first route you're entering mailing address information, on the second route you're configuring your purchase selection, third page you're putting in credit card information, etc. There are a total of about 5-6 pages/routes. How would I go about implementing a restriction on router so that people who have not gone through the first page cannot access the second page?

I'm using React Router 3.x, React router redux 4.x and also the React Boilerpate here. I read about using the onEnter function that React router provides but I cannot find any concrete examples on where to place that nor any specific documentation on executing something like what I'm trying to do, especially in conjunction with the React Boilerplate.

Does anyone have any ideas/guidance/resources on this?

For reference, my routes file looks something like this (pretty much the default routes file from the boilerplate) -

import { getAsyncInjectors } from 'utils/asyncInjectors';

const errorLoading = (err) => {
  console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
};

const loadModule = (cb) => (componentModule) => {
  cb(null, componentModule.default);
};

export default function createRoutes(store) {
  // Create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars

  return [
    {
      path: '/paymentsPage/billing',
      name: 'billing',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Billing'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([component]) => {
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
    {
      path: '/paymentsPage/orgs',
      name: 'orgs',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Organization/reducer'),
          import('containers/Organization'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('orgs', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/paymentsPage/amount',
      name: 'amount',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Donation/reducer'),
          import('containers/Donation'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('amount', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/paymentsPage/finalPayment',
      name: 'finalPayment',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/FinalPayment/reducer'),
          import('containers/FinalPayment'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('finalPayment', reducer.ccInfoReducer);
          injectReducer('finalPayment', reducer.paymentReducer);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '/paymentsPage/confirmation',
      name: 'confirmation',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('containers/Confirmation/reducer'),
          import('containers/Confirmation'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, component]) => {
          injectReducer('confirmation', reducer.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, {
      path: '*',
      name: 'notfound',
      getComponent(nextState, cb) {
        import('containers/NotFoundPage')
          .then(loadModule(cb))
          .catch(errorLoading);
      },
    },
  ];
}

Source: (StackOverflow)

react-boilerplate sagas for new route

In the sample sagas of react-boilerplate, sagas are exported as an array:

export function* defaultSaga() {

}

export default [
  defaultSaga,
];

The default is then injected in routes.js:

...
injectSagas(sagas.default);
...

However, when I added a new route for authentication, I get an error that says saga argument must be a Generator function! even if I only have the default sagas (same as above).

I added the route to routes.js:

//routes.js
export function authRoutes(store) {
  //same code as createRoutes
}

And imported the function to create a new route for the Router in app.js:

//app.js
const rootRoute = {
  component: App,
  childRoutes: createRoutes(store),
};

const authRoute = {
  path: '/auth',
  component: Auth,
  childRoutes: authRoutes(store),
};

const routes = {
  childRoutes: [rootRoute, authRoute],
};

When I try to edit the default of sagas.js to:

export default function* root() {
  yield [
    defaultSaga(),
  ];
}

I get an error injectAsyncSagas: Expected "sagas" to be an array of generator functions. So what I did was to wrap sagas.default in the new route in an array:

//routes.js - authRoutes(store)
importModules.then(([reducer, sagas, component]) => {
  injectReducer('login', reducer.default);
  injectSagas([sagas.default]);
  renderRoute(component);
});

Why am I getting those errors and how can I fix them? (I'm quite new to React and Generators.)


Source: (StackOverflow)

Make sure saga is injected before actions are dispatched

I'm having some bad time with saga injection in my app, sometimes saga is loaded before the action is dispatched and everything works, sometimes the action is fired and no saga effect is triggered. I'm using pretty standard code, here's my route:

getComponent(nextState, cb) {
    const importModules = Promise.all([
        import ('containers/HostArea/reducer'),
        import ('containers/HostArea/ActivityRegistration/reducer'),
        import ('containers/HostArea/AccommodationRegistration/reducer'),
        import ('containers/HostArea/sagas'),
        import ('containers/HostArea/'),
    ]);

    const renderRoute = loadModule(cb);

    importModules.then(([hostAreaReducer, registerActivityReducer, registerAccommodationReducer, sagas, component]) => {
        injectReducer('hostArea', hostAreaReducer.default);
        injectReducer('registerActivity', registerActivityReducer.default);
        injectReducer('registerAccommodation', registerAccommodationReducer.default);
        injectSagas(sagas.default);
        renderRoute(component);
    });

    importModules.catch(errorLoading);
},

here's my saga (I removed getCurrentHost and getHostRegistrations but of course they are defined in the same file):

export function* currentHostWatcher() {
  yield takeLatest(GET_CURRENT_HOST, getCurrentHost);
}

export function* getHostRegistrationsWatcher() {
  console.log('getHostRegistrationsWatcher');
  yield takeLatest(GET_HOST_REGISTRATIONS, getHostRegistrations);
}

export default [
  currentHostWatcher,
  getHostRegistrationsWatcher,
];

and here's the relevant part of my component:

componentDidMount() {
    console.log('componentDidMount');
    this.props.dispatch(getCurrentHost({ resolve: ((host) => this.hostAuthenticated(host)), reject: () => this.unauthenticated() }));
  }

hostAuthenticated(host) {
    console.log('host is authenticated, get his registrations');
    this.props.dispatch(getHostRegistrations({
      host,
      resolve: this.onRegistrationsLoaded,
      reject: ((err) => console.log(err)),
    }));
}

Basically what I do is dispatching an action on componentDidMount, and on success dispatching a second action, both defined in the same saga. What I see is that with the same code, just refreshing the page, sometimes the console log shows

componentWillMount
componentDidMount
getCurrentHost
getCurrentHostSuccess
getHostRegistrations

but no effect is invoked on getHostRegistrations. Other times, it all works and I see in the log:

getHostRegistrationsWatcher
componentWillMount
componentDidMount
getCurrentHost
getCurrentHostSuccess
getHostRegistrations
host registrations loaded

As you can see, in this second case the watcher is executed before the components mount and the flow is correct. So my question is: is there a way to make sure that saga is injected before component is mounted? Or any other workaround?

If you want to see the code in action, just signup here https://www.amavido.it/join (use random email/name and not facebook); once logged in, refresh and you will see some times the rendere component, some times a loading indicator which hangs forever)


Source: (StackOverflow)

How to test Saga that uses data from a dispatched action

I'm using redux-saga and testing using expect. Based on the example given in the (amazing) React Boilerplate, testing a saga that gets the data it needs from the Store (using a selector) is no problem.

However, some of my sagas rely on data included in the dispatched action:

export function* startSaga() {
  while (true) {
    const startAction = yield take(START);
    const id = startAction.id || false;
    ...

To test this, I am importing the saga and then calling it:

import { startSaga } from '../sagas.js';
startGenerator = startSaga();
...

Because of this there is no action kicking the saga off, and so the value of id is always going to be false.

My actions and reducers are tested separately: when testing sagas in a standalone fashion like this, is there a simple way to get this to work?


Source: (StackOverflow)

Using React-Redux where should I keep List item specific state like isUpdating isUpdated isErroneous

I've seen numerous examples about this, but every example incorporates details about persistent values like todo is "completed". I understand we should keep this ("completed") value in store for each TODO, and when store gets recomputed using reducers, the component is re-rendered.

Where do we keep information like "isUpdating" etc for each todo, which I would use to show a loader on a particular todo item (not for the list of todos) when user marks a todo complete and a subsequent ajax call is involved to mark todo as complete in database.

I also understand that as this information might not be useful for other components I should better keep it under the presentational component "TODO". But if these flags are kept in the component, how will the component know that the update on todo was successful or failure on store update ?


Source: (StackOverflow)

Using "material-components-web" within "react-boilerplate" code

After some research on the existing boilerplate code on GitHub, I've decided to use react-boilerplate to get started with my React application. I was planning on adding the Material styles on my website, and since the react-mdl is deprecated now, I was planning on using the material-components-web dependency on my project.

This is my first React application, and I'd like to know a clean way to remove the default styles and add dependency to material-components-web on my project.

Any help is highly appreciated. Thanks.


Source: (StackOverflow)

substate.get() is not a function using React Boilerplate

I have a component called Login, and these selectors:

const selectLogin = () => (state) => state.get('login');
const selectUser = () => createSelector(
  selectLogin(),
  (loginState) => loginState.get('user')
);

Here's what state looks like for the "login" component:

login: {
    user: {
      id: 206
    }
}

In another component, I want to select the "user" object.

At the top of my file, I have

import { createStructuredSelector } from 'reselect';

import {
  selectLogin,
  selectUser
} from 'containers/Login/selectors';

const mapStateToProps = createStructuredSelector({
  login: selectLogin(),
  user: selectUser(),
});

When I use "selectUser()", I get "loginState.get is not a function".

If I remove all references to "selectUser()", I can access this.props.login.user. That works for me, but I want to know why I can't select from within the "login" state. The examples use the same "substate" convention in the selector, and they work. Any ideas?


Source: (StackOverflow)

How do I access the Twitter API from my website to display my latest tweet?

Background:

I'm using the react-boilerplate to build a personal website, and I would like to display my latest tweet in the footer. I do not want the embedded card, only the tweet itself (similar to the Momentum extension).

This appears to be what I am looking for: https://dev.twitter.com/rest/reference/get/statuses/user_timeline

Question:

How is my website supposed to authenticate with the Twitter API, without including the authentication data in the website's codebase?

Should I have an app in the middle that processes the requests, or is it possible for my website to directly retrieve my latest tweet each time a user accesses my page?

Thanks


Source: (StackOverflow)

Using react-icons package with react-boilerplate

When I install react-icons and trying to import

import FaBeer from 'react-icons/fa/beer'; I get an error

Module parse failed: /Users/firfi/work/react-redux-todo/node_modules/react-icons/fa/beer.js Unexpected token (8:12)

If I change import to import FaBeer from 'react-icons/lib/fa/beer'; I get

Module parse failed: /Users/firfi/work/react-redux-todo/node_modules/react-icon-base/index.js Unexpected token (3:50)
You may need an appropriate loader to handle this file type.

Reading the error message, I figured out I should change my webpack config.

So I changed exlude statement in

{
  test: /\.js$/, // Transform all .js files required somewhere with Babel
  loader: 'babel',
  exclude: /node_modules/,
  query: options.babelQuery,
}

to exclude: /node_modules\/(?!(react-icon-base|react-icons)\/).*/,

And now I can import FaBeer from 'react-icons/fa/beer';

However, when I use it as in my render method, it give me an error

warning.js:36Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofFaBeer.

So how do I get some beer?


Source: (StackOverflow)

React Boilerplate Performance Issues

I'm dealing with some performance issues. When I have ImmutableJS map of ~40 elements, shown as checkboxes, when toggling a checkbox (via redux) dev tools throws me a violation info:

[Violation] 'click' handler took 231ms

Is this because I badly created a substate?


Source: (StackOverflow)