reactstrap-react-lib

reactstrap-react-lib

This is build with typescript for using with react and reactstrap

This contains forloowing lib modules

• FormSubmit
• React-Table
• DeleteForm

FormSubmit

This is for submiting data to server. it has inbuilt submit button and also reset button.

• declare states as {} your component asign it curObj prop like this ={["POST", curObj]}
• asign your form submission uri to curUri prop
• onSuccess prop is function which has two arguments first one is response from server and secons one is succusscalback function
• onError prop is function which has two arguments first one is response from server and second one is Errorcalback function
• successCalback is prop which has to passed in onSuccess function
• errorCalback is prop which has to passed in onError function

import{FormSubmit} from "reactstrap-react-lib"
import React,{useState} from 'react'
import {Container, Row, Col, FormGroup, Input, Label} from "reactstrap"

function submitForm(props) {

    const initObj = {firstName:"", lastName : "", email : ""}//intial value sof inputs
    const [obj, setObj] = useState(initObj)
    return (
        <Container>
            {/* FormSubmit */}
            <Row>
                <Col>
                
                <FormSubmit
                    Inputs={
                        <>
                            <FormGroup>
                                <Label className="required">Firtname</Label>
                                <Input type="text" value={obj.firstName} onChange={(e)=>setObj({...obj, firstName : e.target.value})} required={true}/>
                            </FormGroup>
                            
                            <FormGroup>
                                <Label>lastName</Label>
                                <Input type="text" value={obj.lastName} onChange={(e)=>setObj({...obj, lastName : e.target.value})} required={true}/>
                            </FormGroup>
                            <FormGroup>
                                <Label>email</Label>
                                <Input type="email" value={obj.email} onChange={(e)=>setObj({...obj, email : e.target.value})} required={true}/>
                            </FormGroup>

                        </>
                    }

                    curObj = {["POST", obj]} //"POST , "GET", "PUT", "DELETE", "ACTON"
                    curUri = "/api/auth/login" //login


                    onSuccess = {(res)=>{
                        return res.data.mes // mes is key of json sent from api
                    }}

                    onError={(err)=>{
                        return err.response.data
                    }
                    }
                    

                    validation ={()=>{
                        // return "validation error"
                        // if no error return ""
                       
                        return ""
                    }}

  
                    
                    reset={()=>setObj(initObj)}// this resets the inputs to intialstate
                    AxiosRequestConfig={{//axios config setting}}
                
                />
                </Col>
            </Row>
         </Container>
      }

React-Table

This is react-table following code shows the implimentation.

• columns prop has to be assigned the way shown in code below
• Filter props accepts one othe follwign strings Filter : "Global" | "Column" | "Both" | "None"
• sort prop is boolean by defualt it is true

import React from 'react'
import {Row, Col, Container} from "reactstrap"
import {LinkP, Table} from "reactstrap-react-lib"



export default function table() {

    const columns = [
        {
            Header : "Id",
            accessor : "id",
            Cell : ({value})=> <LinkP link = {`/edit/${value}`} value = {value} />,
            dataType : "number"
            
    
        },
        {
            Header : "Name",
            accessor : "name",
            dataType : "string"

            
        },{
            Header : "Age",
            accessor : "age",
            dataType : "number"

        }
        ,{
            Header : "Date",
            accessor : "date",
            Cell : ({value})=> new Date(value).toDateString(),
            dataType : "Date"

        }
    ]

    const data  = [
        { id : 1, name : "umesh", age : 53,     date : "1969-09-29"},
        { id : 2, name : "Ramya", age : 38,     date : "1983-08-11"},
        { id : 3, name : "Pradyumna", age : 21, date : "1999-12-03"},
        { id : 4, name : "Prajnya", age : 21,   date : "1999-12-03"},
        { id : 5, name : "Nischita", age : 11,  date : "1999-01-02"},
    ]
    return (
        <>
            <Container>
                    <Row>
                        <Col>
                            <Table
                                columns={columns}
                                data={data}
                                filter= "Both"
                                // sort = {false}
                                

                            />
                        </Col>
                    </Row>
            </Container>
            
        </>

    )
}

AdminPanel / Sidebar

This is for admin panel

import{SectioPanel,Sidebar} from "reactstrap-react-lib"
import React,{useState} from 'react'


function AdminPanel(props) {
    const Employee =[

        {name : "create", link : "/employee/create"},
        {name : "edit", link : "/employee/edit"},
        {name : "delete", link : "/employee/delete"},
                    ]
    const Shifts = [
        {name : "create", link : "/shifts/create"},
        {name : "edit", link : "/shifts/edit"},
        {name : "delete", link : "/shifts/delete"},
    ]

    const Roster = [
        {name : "create", link : "/shifts/create"},
        {name : "edit", link : "/shifts/edit"},
        {name : "delete", link : "/shifts/delete"},
    ]

    const Onboarding = [
        {name : "create", link : "/shifts/create"},
        {name : "edit", link : "/shifts/edit"},
        {name : "delete", link : "/shifts/delete"},
    ]


   const  section  = [
        {title : "Employee",sectionElements : Employee},
        {title : "Shifts", sectionElements : Shifts},
        {title : "Roster", sectionElements : Roster},
        {title : "Onboarding", sectionElements : Onboarding}

    ]

        return(
                <Sidebar
                    Main ={<h3>Component to rendered here </h3>}
                    orgName = "JJH Hubli"
                    userName = "umesh"
                    siderBarLinks ={[
                        {name : "Zoho", link : "/admin/Zoho"},
                        {name : "Employee", panel: {"panelTitle": "Employee" , "section" :  section }}
                    ]}


                />
            

            </Col>
        </Row>
    )


}

##FormDelete

import{FormDelete} from "reactstrap-react-lib"
import React,{useState} from 'react'
import {Container, Row, Col, FormGroup, Input, Label} from "reactstrap"

function deleteForm(props) {
    return(
        {/* Form Delete */}
            <Row>
                <Col>
                
                    <FormDelete
            
                        curUri="api/form-delete"
                        curObj = {["POST", {id : 1}]}
                        onSuccess={(res)=>{
                            return res.data.mes
                        }}
                        onError={(err)=>{
                            console.log(err.response)
                            return err.response.data
                        }}
                    />
                </Col>
            </Row>
    )