Skip to content

Commit

Permalink
Merge pull request #98 from dzintars/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
dzintars authored Aug 1, 2020
2 parents 5848d0c + ba9268c commit 0a82453
Show file tree
Hide file tree
Showing 23 changed files with 130 additions and 63 deletions.
4 changes: 4 additions & 0 deletions docs/Redux/redux.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,3 +82,7 @@ How to name constants
How to name action types

How to name action creators

## Forms

[React & Redux #15. Authentication: Login Form](https://www.youtube.com/watch?v=tIajENrOJ0o)
5 changes: 4 additions & 1 deletion src/store/features/app-navigation/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,11 @@ export const fetchModuleFailure = (error: Error): AppNavigationActionTypes => ({
},
})

const loaded = (): AppNavigationActionTypes => ({
const loaded = (appid: string): AppNavigationActionTypes => ({
type: AppNavigationTypes.LOADED,
payload: {
appid,
},
})

const listModulesRequest = (id: string): AppNavigationActionTypes => ({
Expand Down
15 changes: 5 additions & 10 deletions src/store/features/app-navigation/sagas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,13 @@ import { AppNavigationTypes } from './constants'
import { ModxActions } from './actions'
import { websocketSend } from '../websocket'

function* workerSaga() {
// console.log('Worker hit', action)
function* workerSaga(action) {
const { id } = action.payload.appid
console.log('Worker hit', action.payload.appid)
// yield put({ ...action, type: `REMOTE_${action.type}` })
// TODO: No no!
yield delay(1000)
yield put(
websocketSend('APP_NAVIGATION__LIST_MODULES_REQUEST', {
payload: {
id: '54789c07-bb43-4db4-8b2d-1a8e1f8c67f1',
},
})
)
// yield delay(1000)
yield put(websocketSend('APP_NAVIGATION__LIST_MODULES_REQUEST', { id: action.payload.appid }))
}

function* watcherSaga() {
Expand Down
4 changes: 4 additions & 0 deletions src/store/features/app-navigation/selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { RootState } from '../../reducer'

// INPUT/BASE SELECTORS
const getState = (state: RootState) => state.appModules
const getApplicationState = (state: RootState) => state.applications

// MEMOIZED SELECTORS
export const selectFetchState = createSelector([getState], state => state.fetching)
Expand All @@ -23,7 +24,10 @@ export const selectModuleById = createSelector([selectAllModules, selectSelected

export const selectModuleName = createSelector([selectModuleById], application => application.title)

const selectCurrentApplicationId = createSelector([getApplicationState], state => state.currentApplication)

export const AppNavigationSelectors = {
selectFetchState,
selectAllModulesArray,
selectCurrentApplicationId,
}
3 changes: 3 additions & 0 deletions src/store/features/app-navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ interface FetchModuleFailure {

interface Loaded {
readonly type: AppNavigationTypes.LOADED
readonly payload: {
appid: string
}
}

interface ListModulesRequest {
Expand Down
4 changes: 3 additions & 1 deletion src/store/features/applications/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ export const fetchApplicationFailure = (id: string, error: Error): ApplicationAc

export const startApplication = (id: string): ApplicationActionTypes => ({
type: ApplicationTypes.START,
id,
payload: {
id,
},
})

export const getApplications = (): ApplicationActionTypes => ({
Expand Down
18 changes: 12 additions & 6 deletions src/store/features/applications/reducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,24 @@ const initialState: ApplicationsState = {
entities: {
1: {
id: '1',
title: 'Test',
title: 'Dispatch',
component: 'my-component',
permalink: '/dispatch',
modules: [],
defaultModule: '',
lastModule: '',
},
2: {
id: '2',
title: 'Sales',
component: 'my-component',
permalink: '/sales',
modules: [],
defaultModule: '',
lastModule: '',
},
},
ids: ['1'],
ids: ['1', '2'],
fetching: false,
selected: {
id: '',
Expand Down Expand Up @@ -74,10 +83,7 @@ export default (state: ApplicationsState = initialState, action: ApplicationActi
case ApplicationTypes.START:
return {
...state,
selected: {
...state.selected,
id: action.id,
},
currentApplication: action.payload.id,
}

case ApplicationTypes.GET:
Expand Down
4 changes: 3 additions & 1 deletion src/store/features/applications/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@ interface FetchFailure {

interface StartApplication {
readonly type: ApplicationTypes.START
readonly id: string
readonly payload: {
id: string
}
}
interface StartingApplication {
readonly type: ApplicationTypes.STARTING
Expand Down
14 changes: 8 additions & 6 deletions src/store/features/system/actions.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createAction, ActionsUnion } from '../../actions'
// import { createAction, ActionsUnion } from '../../actions'
import { SystemTypes, SystemActionTypes } from './types'
import { SystemState } from './models'
// import { SystemState } from './models'

// ACTION CREATORS
const select = (id: string): SystemActionTypes => ({
Expand All @@ -10,9 +10,11 @@ const select = (id: string): SystemActionTypes => ({
},
})

const loaded = (): SystemActionTypes => ({
type: SystemTypes.LOADED,
})

export const SystemActions = {
select: (id: string) => createAction(SystemTypes.SELECT, { id }),
loaded: () => createAction(SystemTypes.LOADED, null),
select,
loaded,
}

export type SystemActions = ActionsUnion<typeof SystemActions>
3 changes: 2 additions & 1 deletion src/store/features/websocket/middleware.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@ const websocketMiddleware = ({ dispatch }) => next => {
case WebsocketTypes.SEND: {
const message = {
type: action.payload.type,
payload: action.payload.payload ? action.payload.payload : undefined,
payload: action.payload.payload,
}
console.log('WSS Message: ', message)
websocket.send(JSON.stringify(message))
break
}
Expand Down
1 change: 1 addition & 0 deletions src/store/features/websocket/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ import { WebsocketTypes } from './types'

export interface WebsocketState {
readonly state: WebsocketTypes
readonly connected: boolean
}
5 changes: 3 additions & 2 deletions src/store/features/websocket/reducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export { WebsocketState }

export const websocketState: WebsocketState = {
state: WebsocketTypes.DISCONNECTED,
connected: false,
}

export default (state: WebsocketState = websocketState, action: WebsocketActionTypes): WebsocketState => {
Expand All @@ -14,13 +15,13 @@ export default (state: WebsocketState = websocketState, action: WebsocketActionT
case WebsocketTypes.CONNECTING:
return { ...state, state: action.type }
case WebsocketTypes.CONNECTED:
return { ...state, state: action.type }
return { ...state, state: action.type, connected: true }
case WebsocketTypes.SEND:
return { ...state, state: action.type }
case WebsocketTypes.DISCONNECT:
return { ...state, state: action.type }
case WebsocketTypes.DISCONNECTED:
return { ...state, state: action.type }
return { ...state, state: action.type, connected: false }

default:
return state
Expand Down
1 change: 1 addition & 0 deletions src/store/features/websocket/selectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ const getState = (state: RootState) => state.websocket
//eslint-disable-next-line @typescript-eslint/no-namespace
export namespace WebsocketSelectors {
export const state = createSelector([getState], state => state.state)
export const selectConnectedState = createSelector([getState], state => state.connected)
}
4 changes: 3 additions & 1 deletion src/ui/containers/app-navigation-connected/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import {
export class AppNavigationConnectedElement extends connect(store, AppNavigationElement) {
connectedCallback() {
super.connectedCallback()
store.dispatch(AppNavigationActions.loaded())
console.log(this.appid)
store.dispatch(AppNavigationActions.loaded(this.appid))
}

// Map state to props (Connect lib)
Expand All @@ -24,6 +25,7 @@ export class AppNavigationConnectedElement extends connect(store, AppNavigationE
pathname: RoutingSelectors.pathname(state),
isApplicationsFetching: ApplicationSelectors.selectFetchState(state),
isModulesFetching: ModuleSelectors.selectFetchState(state),
appid: AppNavigationSelectors.selectCurrentApplicationId(state),
modules: AppNavigationSelectors.selectAllModulesArray(state),
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/ui/containers/system-router/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import { connect } from '../../../utils/connect'
import { store, RootState, RoutingSelectors } from '../../../store'
// import '../app-shell'
import '../../views/view-dispatch'
import '../../containers/view-dispatch-connected'
import '../../views/view-dispatch-consignments'
import '../../views/view-sales'
import '../../containers/view-sales-connected'
import '../../views/view-signin'
import '../../views/view-signup'
import '../../views/view-error'
Expand Down
4 changes: 2 additions & 2 deletions src/ui/containers/system-shell/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import style from './style'

@customElement('system-shell')
export class SystemShellElement extends connect(store, LitElement) {
@property({ type: String }) websocketState: string = WebsocketSelectors.state.toString()
@property({ type: Boolean }) websocketState: boolean = false
@property({ type: Boolean }) isLauncherVisible: boolean = false
@property({ type: Object }) theme: object = {}

mapState(state: RootState) {
return {
websocketState: WebsocketSelectors.state(state),
websocketState: WebsocketSelectors.selectConnectedState(state),
isLauncherVisible: UiSelectors.getLauncherVisibility(state),
theme: ThemeSelectors.getTheme(state),
}
Expand Down
14 changes: 10 additions & 4 deletions src/ui/containers/system-shell/template.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ import '../system-router'

export default function template(this: SystemShellElement): TemplateResult {
return html`
${this.isLauncherVisible
${this.websocketState
? html`
<main-launcher id="main-launcher" noshadow></main-launcher>
${this.isLauncherVisible
? html`
<main-launcher id="main-launcher" noshadow></main-launcher>
`
: ``}
<system-router></system-router>
`
: ``}
<system-router></system-router>
: html`
<h1>Connecting</h1>
`}
`
}
21 changes: 21 additions & 0 deletions src/ui/containers/view-dispatch-connected/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ViewDispatchElement } from '../../views/view-dispatch'
import { connect } from '../../../utils/connect'
import { store, RootState, startApplication } from '../../../store'

export class ViewDispatchConnectedElement extends connect(store, ViewDispatchElement) {
connectedCallback() {
super.connectedCallback()
store.dispatch(startApplication(this.appid))
// store.dispatch(getApplications())
// store.dispatch(getModules())
}

// Map state to props (Connect lib)
// mapState(state: RootState) {
// return {

// }
// }
}

customElements.define(ViewDispatchElement.is, ViewDispatchConnectedElement)
1 change: 1 addition & 0 deletions src/ui/containers/view-dispatch-connected/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './component'
21 changes: 21 additions & 0 deletions src/ui/containers/view-sales-connected/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ViewSalesElement } from '../../views/view-sales'
import { connect } from '../../../utils/connect'
import { store, RootState, startApplication } from '../../../store'

export class ViewSalesConnectedElement extends connect(store, ViewSalesElement) {
connectedCallback() {
super.connectedCallback()
store.dispatch(startApplication(this.appid))
// store.dispatch(getApplications())
// store.dispatch(getModules())
}

// Map state to props (Connect lib)
// mapState(state: RootState) {
// return {

// }
// }
}

customElements.define(ViewSalesElement.is, ViewSalesConnectedElement)
1 change: 1 addition & 0 deletions src/ui/containers/view-sales-connected/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './component'
22 changes: 9 additions & 13 deletions src/ui/views/view-dispatch/component.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
import { customElement, TemplateResult, CSSResultArray, property } from 'lit-element'
import { ViewBaseElement } from '../view-base'
import { connect } from '../../../utils/connect'
import { store, RootState, ModuleSelectors, getApplications, getModules, startApplication } from '../../../store'
import { TemplateResult, CSSResultArray, property, LitElement } from 'lit-element'
import template from './template'
import style from './style'

@customElement('view-dispatch')
export class ViewDispatchElement extends connect(store, ViewBaseElement) {
@property({ type: String }) appid: string = '54789c07-bb43-4db4-8b2d-1a8e1f8c67f1'

connectedCallback(): void {
super.connectedCallback()
// store.dispatch(startApplication(this.appid))
// store.dispatch(getApplications())
// store.dispatch(getModules())
export class ViewDispatchElement extends LitElement {
static get is() {
return 'view-dispatch'
}
@property({ type: String }) appid: string = '54789c07-bb43-4db4-8b2d-1a8e1f8c67f1'

protected render(): TemplateResult {
return template.call(this)
Expand All @@ -23,6 +15,10 @@ export class ViewDispatchElement extends connect(store, ViewBaseElement) {
public static get styles(): CSSResultArray {
return [style]
}

protected createRenderRoot(): Element | ShadowRoot {
return this.hasAttribute('noshadow') ? this : super.createRenderRoot()
}
}

declare global {
Expand Down
22 changes: 7 additions & 15 deletions src/ui/views/view-sales/component.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,22 @@
import { LitElement, customElement, property, TemplateResult, CSSResultArray } from 'lit-element'
import { ViewBaseElement } from '../view-base'
import { connect } from '../../../utils/connect'
import { store, RootState, ModuleSelectors, getApplications, getModules, startApplication } from '../../../store'
import { LitElement, property, TemplateResult, CSSResultArray } from 'lit-element'
import template from './template'
import style from './style'

@customElement('view-sales')
export class ViewSalesElement extends connect(store, ViewBaseElement) {
@property({ type: String }) appid: string = '178025e-a209-4c50-8c34-36d35f36494c'

connectedCallback(): void {
super.connectedCallback()
store.dispatch(startApplication(this.appid))
store.dispatch(getApplications())
store.dispatch(getModules())
export class ViewSalesElement extends LitElement {
static get is() {
return 'view-sales'
}
@property({ type: String }) appid: string = 'c178025e-a209-4c50-8c34-36d35f36494c'

protected render(): TemplateResult {
return template.call(this)
}

static get styles(): CSSResultArray {
public static get styles(): CSSResultArray {
return [style]
}

createRenderRoot(): Element | ShadowRoot {
protected createRenderRoot(): Element | ShadowRoot {
return this.hasAttribute('noshadow') ? this : super.createRenderRoot()
}
}
Expand Down

0 comments on commit 0a82453

Please sign in to comment.