wombit v0.0.4

Wombit Bertil - Base repo for Wombit frontend Environment´

Prerequisites

Authenticate to the Wombit feed

To install any package from bertil™, you need to authorize against Azure DevOps in your working theme folder. If you are working in the theme for client Xyz, do following steps:

1. cd C:/Projects/xyz/Presentation/Nop.Web/Themes/nop-theme-base/
2. vsts-npm-auth -config .npmrc

Styleguide

1. Components
2. Slices

1. Components

Examples below.

• All components that render code should be named in PascalCase. Ex: MyComponent.js.
• All components should preferably be a functional, not classes.
• All components that recieve props should be destructured in the function parameters, and is required to use propTypes to define props.
• All commonly used functions, utility functions, etc. should use param notation.

Example of an Component:

import { h } from 'preact'
import { useState, useEffect } from 'preact/hooks'
import PropTypes from 'prop-types'
import { useSelector, useDispatch } from 'react-redux'

export default function MyComponent({ parameter1, parameter2 }) {
    const dispatch = useDispatch()

    const selectorValue = useSelector(mySelector)
    const [state, setState] = useState(null)

    return (
        <div>
            <span>My Component</span>
        </div>
    )
}

MyComponent.propTypes = {
    parameter1: PropTypes.objectOf(PropTypes.any),
    parameter2: PropTypes.number.isRequired,
}

MyComponent.defaultProps = {
    parameter1: {},
}

2. Slices

Examples below

• Every feature that need to handle redux should have a slice and selector file.
• The slice will be named featureSlice.js and featureSelectors.js
• Every thunk that makes a httpsRequest should be named with request at the start. Ex: requestGetItems

Example Slice:

import { createSlice } from '@reduxjs/toolkit'

export const initialState = {
    isLoading: false,
    error: null,

    entities: {
        items: {},
    },

    result: [],
}

function addItemStart() {}
function addItemSuccess() {}
function addItemFailure() {}

const exampleSlice = createSlice({
    name: 'example',
    initialState,
    reducers: {
        exampleAddItemStart: addItemStart,
        exampleAddItemSuccess: addItemSuccess,
        exampleAddItemFailure: addItemFailure,
    },
})

export const {
    exampleAddItemStart,
    exampleAddItemSuccess,
    exampleAddItemFailure,
} = exampleSlice.actions

export function requestExampleFunction() {
    return async dispatch => {
        dispatch(exampleAddItemStart())
        const data = await makeRequest()

        dispatch(exampleAddItemSuccess(data))
        try {
        } catch (error) {
            dispatch(exampleAddItemFailure({ error }))
        }
    }
}

export default exampleSlice.reducer