safet.purkovic
/
PDFEngineDemoUI
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Added redux

master
Igor_Budimski 3 years ago
parent
4167d42634
commit
d634193ed4
8 changed files with 270 additions and 168 deletions
Unified View Show Diff Stats
  1. 3
    2
      package.json
  2. 24
    0
      src/actions/index.js
  3. 12
    1
      src/index.js
  4. 10
    0
      src/reducers/index.js
  5. 11
    0
      src/reducers/isLogged.js
  6. 13
    0
      src/reducers/user.js
  7. 2
    2
      src/views/dashboard/Dashboard.js
  8. 195
    163
      src/views/demoComponent/DemoComponent1.js

+ 3
- 2
package.json View File

"react": "^17.0.2", "react": "^17.0.2",
"react-app-polyfill": "^2.0.0", "react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"sass": "^1.32.8" "sass": "^1.32.8"
}, },
"devDependencies": { "devDependencies": {

+ 24
- 0
src/actions/index.js View File

export const setUserName =(value)=>{
return {
type: 'SET_USERNAME',
payload: value
}
}

export const getUserName =()=>{
return {
type: 'GET_USERNAME'
}
}

export const setLogged =()=>{
return {
type: 'SIGN_IN'
}
}

export const setNotLogged =()=>{
return {
type: 'SIGN_OUT'
}
}

+ 12
- 1
src/index.js View File

import { icons } from './assets/icons' import { icons } from './assets/icons'


import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import store from './store'
import { createStore, applyMiddleware } from 'redux';
import allReducer from './reducers/index.js';
import thunk from 'redux-thunk';


React.icons = icons React.icons = icons



let store = createStore(
allReducer,
applyMiddleware(thunk)
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

//store.subscribe(() => console.log(store.getState(allReducer)));

ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<App/> <App/>

+ 10
- 0
src/reducers/index.js View File

import userReducer from "./user";
import isLoggedReducer from "./isLogged";
import { combineReducers } from "redux";

const allReducers = combineReducers({
user: userReducer,
isLogged: isLoggedReducer
})

export default allReducers;

+ 11
- 0
src/reducers/isLogged.js View File

const loggedReducer = (state = false, action) => {
switch (action.type) {
case 'SIGN_IN':
return state = true
case 'SIGN_OUT':
return state = false;
default:
return state;
}
}
export default loggedReducer;

+ 13
- 0
src/reducers/user.js View File

const userReducer = (state = null, action) => {
switch (action.type) {
case 'SET_USERNAME':
return state = action.payload;

case 'GET_USERNAME':
return state;

default:
return state;
}
}
export default userReducer;

+ 2
- 2
src/views/dashboard/Dashboard.js View File

CCallout CCallout
} from '@coreui/react' } from '@coreui/react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import {PDFEngine} from 'PDFEngine'
// import {PDFEngine} from 'PDFEngine'


import MainChartExample from '../charts/MainChartExample.js' import MainChartExample from '../charts/MainChartExample.js'


</CRow> </CRow>
<div code="br-hidechildren"> <div code="br-hidechildren">
<br /> <br />
<button onClick={PDFEngine}>Test</button>
{/* <button onClick={PDFEngine}>Test</button> */}
<button>Test button 2</button> <button>Test button 2</button>
<p className="br-color">Title</p> <p className="br-color">Title</p>
<p className="br-color">first row</p> <p className="br-color">first row</p>

+ 195
- 163
src/views/demoComponent/DemoComponent1.js View File

import React, { lazy, useState } from 'react';
import React, { lazy, useState, useContext } from 'react';
import { import {
CBadge, CBadge,
CButton, CButton,
import CIcon from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import { PDFEngine } from 'PDFEngine'; import { PDFEngine } from 'PDFEngine';


import { useDispatch } from 'react-redux';
import { setUserName, setLogged, setNotLogged } from '../../actions';
import { ReactReduxContext } from 'react-redux';


import MainChartExample from '../charts/MainChartExample.js'; import MainChartExample from '../charts/MainChartExample.js';
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent1 = () => { const DemoComponent1 = () => {


const list = [{ name: "Four Cards" }, { name: "Chart1" }, { name: "Chart1 Buttons" }, { name: "Chart1 Legend" }, { name: "Chart2" }, { name: "Table" }]; const list = [{ name: "Four Cards" }, { name: "Chart1" }, { name: "Chart1 Buttons" }, { name: "Chart1 Legend" }, { name: "Chart2" }, { name: "Table" }];

let textInput = React.createRef();
//const user = useSelector(state => state.user);
const dispach = useDispatch();
const { store } = useContext(ReactReduxContext);


const handleSubmit = (event) => {
event.preventDefault();
dispach(setUserName(textInput.current.value));
}

const [checkedState, setCheckedState] = useState( const [checkedState, setCheckedState] = useState(
new Array(list.length).fill(false) new Array(list.length).fill(false)
); );

const exec = () => { const exec = () => {
const pdf = new PDFEngine(); const pdf = new PDFEngine();
pdf.execute(); pdf.execute();
setCheckedState(updatedCheckedState); setCheckedState(updatedCheckedState);
}; };


const GetStore = () => {
console.log(store.getState());//ovim pozivom dobijas podatke iz store-a
}

return ( return (
<> <>
<div code="br-hide"> <div code="br-hide">
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}> <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button> <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
</div> </div>
<form style={{margin: '15px'}} onSubmit={handleSubmit}>
<label>
Name:
<input ref={textInput} type="text" onChange={null} />
</label>
<input type="submit" value="Submit" />
<button onClick={() => dispach(setLogged())}>Log in</button>
<button onClick={() => dispach(setNotLogged())}>Log out</button>
<button onClick={() => GetStore()}>Log Store</button>
</form>
</div> </div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}> <div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
<p style={{paddingTop: "5px", fontWeight: "bold"}}>Select Elements to hide</p>
<p style={{ paddingTop: "5px", fontWeight: "bold" }}>Select Elements to hide</p>
<ul> <ul>
{list.map(({ name }, index) => { {list.map(({ name }, index) => {
return ( return (
</div> </div>
</CCol> </CCol>
</CRow> </CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} /> <MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody> </CCardBody>
<div code={checkedState[3] === true ? "br-hide" : null}> <div code={checkedState[3] === true ? "br-hide" : null}>
<CCardFooter> <CCardFooter>
</CCard> </CCard>
</div> </div>
<CRow> <CRow>
<CCol> <CCol>
<div code={checkedState[4] === true ? "br-hide" : null}>
<CCard>
<CCardHeader>
Traffic {' & '} Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12" md="6" xl="6">
<div code={checkedState[4] === true ? "br-hide" : null}>
<CCard>
<CCardHeader>
Traffic {' & '} Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12" md="6" xl="6">


<CRow>
<CCol sm="6">
<CCallout color="info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<CRow>
<CCol sm="6">
<CCallout color="info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>


<hr className="mt-0" />
<hr className="mt-0" />


<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" />
<CProgress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" />
<CProgress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" />
<CProgress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" />
<CProgress className="progress-xs" color="danger" value="78" />
</div>
</div> </div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" />
<CProgress className="progress-xs" color="danger" value="91" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" />
<CProgress className="progress-xs" color="danger" value="94" />
</div>
</div> </div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" />
<CProgress className="progress-xs" color="danger" value="67" />
</div>
</div> </div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" />
<CProgress className="progress-xs" color="danger" value="73" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" />
<CProgress className="progress-xs" color="danger" value="91" />
</div>
</div> </div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" />
<CProgress className="progress-xs" color="danger" value="73" />
</div>
</div> </div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" />
<CProgress className="progress-xs" color="danger" value="82" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" />
<CProgress className="progress-xs" color="danger" value="82" />
</div>
</div> </div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" />
<CProgress className="progress-xs" color="danger" value="69" />
</div>
</div> </div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" />
<CProgress className="progress-xs" color="danger" value="69" />
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div> </div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>
</CCol>


<CCol xs="12" md="6" xl="6">
<CCol xs="12" md="6" xl="6">


<CRow>
<CCol sm="6">
<CCallout color="warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<CRow>
<CCol sm="6">
<CCallout color="warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>


<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" />
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" />
</div>
</div> </div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
<div className="progress-group mb-5">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" />
</div>
</div> </div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" />
<div className="progress-group">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" />
</div>
</div> </div>
</div>


<div className="divider text-center">
<CButton color="link" size="sm" className="text-muted">
<CIcon name="cil-options" />
</CButton>
</div>
<div className="divider text-center">
<CButton color="link" size="sm" className="text-muted">
<CIcon name="cil-options" />
</CButton>
</div>


</CCol>
</CRow>
</CCol>
</CRow>


</CCardBody>
</CCard>
</CCardBody>
</CCard>
</div> </div>
<div> <div>
<table className="table table-hover table-outline mb-0 d-sm-table" code={checkedState[5] === true ? "br-hide" : null}> <table className="table table-hover table-outline mb-0 d-sm-table" code={checkedState[5] === true ? "br-hide" : null}>

Write Preview
Loading…
Cancel
Save