Skip to content

Instantly share code, notes, and snippets.

@artalar
artalar / SuccesBillsInput.jsx
Last active June 6, 2018 06:31
Example of styled-component good practice
// @flow
import * as React from 'react';
import styled from 'styled-components';
type Props = {
className: string,
};
@artalar
artalar / ImageEditor.jsx
Last active October 4, 2017 14:51
ImageEditor by react-cropper
import * as React from 'react';
import Dialog, { DialogActions, DialogTitle } from 'material-ui/Dialog';
import { withStyles } from 'material-ui/styles';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
const styles = {
paper: {
backgroundColor: '#2781ca',
borderRadius: '5px',
import * as React from 'react';
import styled from 'styled-components';
import { CircularProgress } from 'material-ui/Progress';
const BlockUIBody = styled.div`
position: fixed;
background-color: rgba(255, 255, 255, 0.5);
top: 0;
left: 0;
display: flex;
@artalar
artalar / config-overrides.js
Created November 1, 2017 08:37
Add styled-components class naming with CRA
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = (config, env) => {
config = injectBabelPlugin(
[
'babel-plugin-styled-components',
{
displayName: true,
},
@artalar
artalar / userReducer.jsx
Last active February 10, 2018 20:50
Example of declarative implementation of redux reducer by JSX
import * as React from 'react';
import PropTypes from 'prop-types';
// unexisted library, just for example
import { render } from 'react-store';
import { requestUserData, successUserData, errorUserData } from 'actions'
const typeRolesList = PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
privelege: PropTypes.string.isRequired,
const getAsyncType = (type, status) => `${type}_${status}`;
export const getMasterActionCreator = type => {
const reqType = getAsyncType(type, 'REQUEST');
const respType = getAsyncType(type, 'SUCCESS');
const errType = getAsyncType(type, 'ERROR');
const masterActionCreator = params => ({ params, type });
masterActionCreator.type = type;
import { inDevMode } from './enviroment';
const isObject = object => typeof object === 'object' && object !== null;
function Logger(location, addSnapshot) {
const logs = [];
this.setLog = (previosObject, newObject, key, description = 'objects not equal') => {
const log = {
previosObject,
@artalar
artalar / promise_queue.js
Last active April 23, 2021 11:56
What will be the order of print?
(async () => {
console.log(0);
(async () => {
console.log(1);
console.log(await 2);
console.log(await 3);
console.log(4);
})();
console.log(5);
(async () => {
@artalar
artalar / contextFactory.js
Last active March 31, 2018 23:37
contextFactory
import * as React from 'react';
import { createSubscription } from 'create-subscription';
const shallowCompare = (newObj, oldObj) => {
const newObjKeys = Object.keys(newObj);
const oldObjKeys = Object.keys(oldObj);
return (
newObjKeys.length === oldObjKeys.length && newObjKeys.every(key => newObj[key] === oldObj[key])
);
};
const isObject = o => typeof o === 'object' && o !== null;
const merge = (source, key, update) =>
Array.isArray(source)
? [...source.slice(0, key > 0 ? key - 1 : 0), update, ...source.slice(key + 1)]
: { ...source, [key]: update };
const mergeIn = (source, target, update) =>
source === target
? Array.isArray(source) ? update : { ...source, ...update }