Skip to content

Instantly share code, notes, and snippets.

Avatar

Clarian 01Clarian

  • NFTuity
  • New York
View GitHub Profile
@01Clarian
01Clarian / products.provider.js
Created Dec 10, 2019
Migrating Products Data to Context API from Redux
View products.provider.js
import React,{createContext, useState, useEffect} from 'react'
import shop from '../api/shop'
export const ProductsContext = createContext({
test: '',
products: []
})
const ProductsProvider = ({children}) => {
const [test] = useState('the products provider has been successfully connected :)')
@01Clarian
01Clarian / productsContainer.js
Created Dec 10, 2019
Bringing in test string from products provider to test the provider
View productsContainer.js
import React,{useContext} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { addToCart } from '../actions'
import { getVisibleProducts } from '../reducers/products'
import ProductItem from '../components/ProductItem'
import ProductsList from '../components/ProductsList'
import {ProductsContext} from '../provider/products.provider'
const ProductsContainer = ({ products, addToCart }) => {
@01Clarian
01Clarian / index.js
Created Dec 10, 2019
Wrapping the Products Provider around the Application
View index.js
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducer from './reducers'
import { getAllProducts } from './actions'
import App from './containers/App'
import ProductsProvider from './provider/products.provider'
@01Clarian
01Clarian / products.provider.js
Created Dec 10, 2019
Products Provider Test demonstration
View products.provider.js
import React,{createContext, useState} from 'react'
export const ProductsContext = createContext({
test: ''
})
const ProductsProvider = ({children}) => {
const [test] = useState('the products provider has been successfully connected :)')
return (
<ProductsContext.Provider value={{test}}>
@01Clarian
01Clarian / HoverCounter.jsx
Created Nov 30, 2019
HoverCounter Component Refactored HOC Pattern
View HoverCounter.jsx
import React from 'react';
import EnhanceComponent from './EnhanceComponent'
const HoverCounter = (props) => {
return (
<h2 onMouseOver={props.increment}>
{props.count}</h2>
);
}
export default EnhanceComponent(HoverCounter);
@01Clarian
01Clarian / ClickCounter.jsx
Created Nov 30, 2019
ClickCounter refactored for HOC pattern
View ClickCounter.jsx
import React from 'react';
import EnhanceComponent from './EnhanceComponent';
const ClickCounter = (props) => {
return (
<button onClick={props.increment}>
{props.count}</button>
);
}
@01Clarian
01Clarian / EnhanceComponent.js
Created Nov 30, 2019
HOC for Click Counter and Hover Counter Component
View EnhanceComponent.js
import React from 'react'
const EnhanceComponent = (OrignComponent) => {
class ModComponent extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
@01Clarian
01Clarian / EnhanceComponent.js
Created Nov 30, 2019
HOC to enhance Click and Hover Component
View EnhanceComponent.js
import React from 'react'
const EnhanceComponent = (OrignComponent) => {
class ModComponent extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
@01Clarian
01Clarian / HoverCounter.jsx
Created Nov 30, 2019
HoverCounter pre HOC pattern
View HoverCounter.jsx
import React from 'react';
class HoverCounter extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
}
increment = () => {
@01Clarian
01Clarian / HoverCounter.jsx
Created Nov 30, 2019
HoverCounter Pre HOC
View HoverCounter.jsx
import React from 'react';
class HoverCounter extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
}
increment = () => {