DEV Community: Aboucodeur

React router private Routes

Aboucodeur — Fri, 25 Mar 2022 11:45:13 +0000

import React from "react"
import {Outlet,Navigate} from "react-router-dom"
import {useJwt} from "react-jwt" // decode token
import jsCookie from "js-cookie" // store cookie if login

const ProtectedRoutes = () =>{
  const {state} = useAppState() // consum the context

// add persistent in route in application
const retrieveToken = jsCookie.get("token")
const {decodeToken} = useJwt(retrievesToken)

useEffect(()=>{
    if(token){
      // persist route and update app state like user informations
      dispatch({type : "Auth/Ok"}) //state.isAuth :true
      dispatch({type : "Users/Ok" , payload : {users : ...decodeToken}}) 
    }
},[])

 return (state.isAuth || token ) ? <Outlet/> : <Navigate to="/"/>
}

React / Styled-Components Example : Design System

Aboucodeur — Mon, 07 Mar 2022 10:44:44 +0000

Everybody talk design system ?
What is this ?

Example => create re-usable heading .

import styled from "styled-components"

/**
* The problem heading are multiple level (1-6)
* how to refactor my code
* The simple way is create for each heading level => 
*/

// re-usable heading with small code
export const Heading = ({level,color,children,...props})=>{
    // refactor heading level
    const StyledHeading = styled[`h${level}`]`
        color:${(color)=>color};
      `
    return(
        <StyledHeading 
            color={color}
            {...props}
          >{children}
       </StyledHeading>
    )
}

Pern Stack pagination middleware

Aboucodeur — Wed, 02 Mar 2022 23:11:50 +0000


module.exports = (table, _max_limits) => {
    // global variable
    let queryString = `select * from ${table}`
    let arr = []
    let results = {}

    find(queryString)
        .then((data) => arr = data)
        .catch(err => res.status(400).json({ err }))


    return (req, res, next) => {
        // like convention
        const { page, limit } = req.query

        // user input
        const intPage = parseInt(page, 10) || 1
        const intLimit = parseInt(limit, 10)
        // control user limit
        const intCtrLimit = intLimit > _max_limits ? _max_limits : intLimit // user limit > _max_limits

        // algorithms
        let totals = arr.length
        let numberOfPages = Math.round(((totals) / intCtrLimit))
        let startIndex = (intPage - 1) * intCtrLimit
        let endIndex = ((intPage * intCtrLimit) - 1)

        // output
        let prevPage = (intPage > 0 && intPage <= numberOfPages) ? intPage - 1 : 1
        let nexPage = (intPage < numberOfPages) ? intPage + 1 : numberOfPages // not equals but is add one

        // errors gestion
        if (intPage <= numberOfPages) {
            if (intPage > 0) {
                results = {
                    log: `result of request : page=${intPage} & limit=${intCtrLimit} `,
                    totals,
                    prevPage,
                    nexPage,
                    numberOfPages,
                    limit: intCtrLimit,
                    startIndex,
                    endIndex: endIndex + 1 // like array slice 
                }
            }
        }

        // like user paigination
        let paginateDatas = arr.slice(results?.startIndex, results?.endIndex)
        results.datas = paginateDatas

        // like middleware principe
        req.paginateResults = results
        next()
    }
}

Test your app success best Formula

Aboucodeur — Mon, 21 Feb 2022 22:12:41 +0000

The Formula to test your app success

The total of features : sumFeatures

appSucess = sumFeatures!/1;

JavaScript Filter

Aboucodeur — Thu, 16 Dec 2021 17:52:52 +0000

// Filter in Javascript

// Datas
const userDatas = [
  {firstName : "Aboubacar" , lastName : "Barry"},
  {firstName : "Bill" , lastName : "Gates"},
  {firstName : "Amadou" , lastName : "Diakité"}
]

// filter function
const filteredDatas = (datas,props,str)=>{
  if(!props || props === null){
    return null;
  }
    const filter = datas.filter(data=>{
      if(data.[props].startsWith(str)){
        return data
      }
    })
//     global return 
    return (filter.length === 0 ? "Not Founds In Tables" : filter); 
}

// results
filteredDatas(userDatas,"firstName","A") 
// [ {firstName : "Aboubacar" , lastName : "Barry"}, {firstName : "Amadou" , lastName : "Diakité"}]

filteredDatas(userDatas,"","M") 
// null