friedrith

Foo test

friedrith

feat: add user management

# description from a user point of view
Allow the admin to add a user, remove a user, edit a user.

# very often commit can be interpreted as markdown by git hosting solutions
> It is not including role management 

# Even if you write in markdown do not use # for title since git interprets it as comments
Technical details

friedrith

function estimateTotal(database, bag, isVIP, reductionCode, zipCode) {
  let price = 0
  let weight = 0
  
  for (const items of bag) {
    const product = database.products.find({ id: items.productId }) // should be lower level
    let itemsPrice = product.price * (1 + product.tax) * items.quantity 
    if (isVIP) {
      itemsPrice -= VIP_REDUCTION
    }

friedrith

import React from 'react'
import { AnimatedGroup, AnimatedItem } from 'react-progressive-entrance'

const Component = () => (
  <AnimatedGroup> {/* provide the counter using context */}
    <AnimatedItem> {/* consume the counter using context */}
      <span>Appears first</span>
    </AnimatedItem>
    <ul>
      <AnimatedItem> {/* consume the counter using context */}

friedrith

import React, { Component } from 'react'
import Context from './context.js

class AnimatedItem from Component {
  /* define which context must be store in the attribute this.context */
  static contextType = Context 
  /* the component will be registered using a unique id to be sure */
  static id = 0 
  
  componentDidMount() {

friedrith

import React, { Component } from 'react'
import Context from './context.js

class AnimatedItem from Component {
  /* define which context must be store in the attribute this.context */
  static contextType = Context 
  
  componentDidMount() {
    /* use this.context */
  }

friedrith

import React from 'react'
import { AnimatedGroup, AnimatedItem } from 'react-progressive-entrance'

const Component = () => (
  <AnimatedGroup itemsNumber={4}> {/* provide the counter using context */}
    <AnimatedItem index={1}> {/* consume the counter using context */}
      <span>Appears first</span>
    </AnimatedItem>
    <ul>
      <AnimatedItem index={2}> {/* consume the counter using context */}

friedrith

import React from 'react'

const Component = () => (
 <Form labelClassName="width200px">
  <Label label="Login">
    <Input />  
  </Label>
  <Label label="Password">
    <Input placeholder="12 characters minimum"/>
  </Label>

friedrith

import React from 'react'

const Component = () => (
 <Form>
   <Label className="width200px" label="Login">
     <Input placeholder="Login" />  
   </Label>
   <Label className="width200px" label="Password">
     <Input placeholder="12 characters minimum"/>
   </Label>

friedrith

import React from 'react'
import Context from './context.js'

// to consume a context
const GrandChild = () => (
  <Context.Consumer>
    {({ theme }) => (
      <div>
        {/* use the value theme */}
      </div>