Skip to content

Instantly share code, notes, and snippets.

View alqamabinsadiq's full-sized avatar
Serverless with React

Alqama Bin Sadiq alqamabinsadiq

Serverless with React
View GitHub Profile
@alqamabinsadiq
alqamabinsadiq / ChatAfter.js
Created October 6, 2018 10:11
Migrating From Unsafe React Lifecycles Hooks - ReactKHI meetup #01
import React, { Component } from 'react';
import Message from './message';
import { getMessage } from './getMessage';
class Chat extends Component {
// Initial State.
state = {
messages: [getMessage()],
isStreaming: this.props.isStreaming
}
@alqamabinsadiq
alqamabinsadiq / ChatBefore.js
Created October 22, 2018 07:55
Chat component using the old unsafe lifecycle hooks of React.
import React, { Component } from 'react';
import Message from './message';
import { getMessage } from './getMessage';
class Chat extends Component {
// Initial State.
state = {
messages: [getMessage()],
isStreaming: this.props.isStreaming
}
@alqamabinsadiq
alqamabinsadiq / ChatAfter.js
Created October 22, 2018 09:16
Chat component using new lifecycle hooks.
import React, { Component } from 'react';
import Message from './message';
import { getMessage } from './getMessage';
class Chat extends Component {
// Initial State.
state = {
messages: [getMessage()],
isStreaming: this.props.isStreaming
}
@alqamabinsadiq
alqamabinsadiq / ChatUsafe.js
Created October 22, 2018 09:20
Chat component using Unsafe React lifecycles hooks.
import React, { Component } from 'react';
import Message from './message';
import { getMessage } from './getMessage';
class Chat extends Component {
// Initial State.
state = {
messages: [getMessage()],
isStreaming: this.props.isStreaming
}
@alqamabinsadiq
alqamabinsadiq / HooksExample.js
Created December 15, 2018 18:14
Code From Getting Started With Hooks - ReactKHI Meetup #02
import React, { useState, useEffect } from 'react';
const Counter = () => {
// initial state.
const initialState = {
counter: 0
};
const [state, setState] = useState(initialState);
@alqamabinsadiq
alqamabinsadiq / user.action.js
Created December 29, 2018 08:54
Gist for article "Structuring your React app"
// action types.
export const actions = {
SET_USER_INFO: "SET_USER_INFO",
SET_ALL_USERS: "SET_ALL_USERS",
SET_CURRENT_USER: "SET_CURRENT_USER",
};
// set's the user to redux.
export const setUser = (data) => ({
type: actions.SET_USER_INFO,
@alqamabinsadiq
alqamabinsadiq / company.services.js
Created December 29, 2018 09:42
Gist for Structuring your React app.
import { openNotificationWithIcon } from 'utils/notification';
import api from 'utils/api';
import { setAllCompanies } from '../actions/company.action';
export const getAllCompanies = (resolve, reject) => {
return (dispatch) => {
getRequest(`${api.url}company`)
.then(({ data }) => {
dispatch(setAllCompanies(data));
resolve();
@alqamabinsadiq
alqamabinsadiq / company.reducer.js
Created December 29, 2018 09:53
Gist for Structuring your React app.
import { actions } from 'actions/company.action';
// Initial State
const INITIAL_STATE = {
allCompanies: null,
currentCompany: null
};
// Company Reducer.
export default (state = INITIAL_STATE, { type, data }) => {
@alqamabinsadiq
alqamabinsadiq / reducer.index.js
Created December 29, 2018 09:55
Gist for Structuring your React app.
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import users from './user.reducer';
import modal from './modal.reducer';
import company from './company.reducer';
// Root Reducer.
export default combineReducers({
routing: routerReducer,
users,
@alqamabinsadiq
alqamabinsadiq / routes.js
Created December 29, 2018 10:08
Gist for Structuring your React app.
import Dashboard from './Dashboard/Dashboard.index';
import Users from './Users/Users.index';
import Company from './Company/Company.index';
import Profile from './Profile/Profile.index';
// router configuration.
let routes = [
{
path: '/dashboard',
name: 'Project Dashboard',