├── .gitignore
├── README.md
├── architecture.dio
├── child1
├── .babelrc
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│ ├── App.jsx
│ ├── Child1Content.jsx
│ ├── Feature1_M1.jsx
│ ├── Feature2_M1.jsx
│ ├── Feature3_M1.jsx
│ ├── Feature4_M1.jsx
│ ├── IndexPage.jsx
│ ├── index.html
│ ├── index.js
│ ├── index.scss
│ └── store.js
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock
├── child2
├── .babelrc
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
│ ├── App.jsx
│ ├── Child2Content.jsx
│ ├── Feature1_M2.jsx
│ ├── Feature2_M2.jsx
│ ├── Feature3_M2.jsx
│ ├── Feature4_M2.jsx
│ ├── IndexPage.jsx
│ ├── index.html
│ ├── index.js
│ ├── index.scss
│ └── store.js
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock
└── container
├── .babelrc
├── cypress.json
├── cypress
├── fixtures
│ └── example.json
├── integration
│ └── e2e_spec.js
├── plugins
│ └── index.js
└── support
│ ├── commands.js
│ └── index.js
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── App.jsx
├── MainLayout.jsx
├── NotDeployed.jsx
├── Test3.jsx
├── component
│ └── Layout.jsx
├── index.html
├── index.js
├── index.scss
├── reducers
│ ├── userReducer.js
│ └── utils.js
└── store.js
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | build
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | 
4 |
5 | 
6 |
7 | 
8 |
9 | 
10 |
--------------------------------------------------------------------------------
/architecture.dio:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
--------------------------------------------------------------------------------
/child1/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-react", "@babel/preset-env"],
3 | "plugins": [
4 | ["@babel/transform-runtime"]
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/child1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "child1",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "build": "webpack --mode production",
6 | "build:dev": "webpack --mode development",
7 | "build:start": "cd dist && PORT=3002 npx serve",
8 | "start": "webpack serve --open --mode development",
9 | "start:live": "webpack serve --open --mode development --live-reload --hot"
10 | },
11 | "license": "MIT",
12 | "author": {
13 | "name": "Syed Ashar",
14 | "email": "saghirashar@gmail.com"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.15.8",
18 | "@babel/plugin-transform-runtime": "^7.15.8",
19 | "@babel/preset-env": "^7.15.8",
20 | "@babel/preset-react": "^7.14.5",
21 | "autoprefixer": "^10.1.0",
22 | "babel-loader": "^8.2.2",
23 | "css-loader": "^6.3.0",
24 | "html-webpack-plugin": "^5.3.2",
25 | "postcss": "^8.2.1",
26 | "postcss-loader": "^4.1.0",
27 | "style-loader": "^3.3.0",
28 | "tailwindcss": "^2.0.2",
29 | "webpack": "^5.57.1",
30 | "webpack-cli": "^4.9.0",
31 | "webpack-dev-server": "^4.3.1"
32 | },
33 | "dependencies": {
34 | "@babel/runtime": "^7.13.10",
35 | "react": "^17.0.2",
36 | "react-dom": "^17.0.2",
37 | "react-redux": "^7.2.8",
38 | "react-router-dom": "^5.3.0",
39 | "redux": "^4.1.2",
40 | "redux-thunk": "^2.4.1",
41 | "remixicon": "^2.5.0",
42 | "rxjs": "^7.4.0",
43 | "windowed-observable": "^1.0.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/child1/postcss.config.js:
--------------------------------------------------------------------------------
1 | const autoprefixer = require("autoprefixer");
2 | const tailwindcss = require("tailwindcss");
3 |
4 | module.exports = {
5 | plugins: [tailwindcss, autoprefixer],
6 | };
7 |
--------------------------------------------------------------------------------
/child1/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 |
4 | import "remixicon/fonts/remixicon.css";
5 | import "./index.scss";
6 | import Child1Content from 'child1/Child1Content'
7 | import { Provider } from 'react-redux'
8 | import store from './store';
9 |
10 | ReactDOM.render(
11 |
12 | , document.getElementById("app"));
13 |
--------------------------------------------------------------------------------
/child1/src/Child1Content.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { BrowserRouter as Router, Route, Switch , Link } from "react-router-dom";
3 | import Feature1_M1 from "./Feature1_M1";
4 | import Feature2_M1 from "./Feature2_M1";
5 | import Feature3_M1 from "./Feature3_M1";
6 | import Feature4_M1 from "./Feature4_M1";
7 | import IndexPage from "./IndexPage";
8 | import { Observable } from 'windowed-observable';
9 | import { useDispatch } from 'react-redux'
10 |
11 | const observable = new Observable('child1');
12 |
13 | export default function Child1Content({}) {
14 |
15 | const dispatch = useDispatch()
16 |
17 | const handleNewMessage = (newMessage) => {
18 | console.log(newMessage);
19 | dispatch({ type: 'CHANGE_PERMS', payload: newMessage.modulePerms});
20 | };
21 |
22 | useEffect(() => {
23 | observable.subscribe(handleNewMessage);
24 | return () => {
25 | observable.unsubscribe(handleNewMessage)
26 | }
27 | }, [handleNewMessage]);
28 |
29 |
30 | return (
31 |
32 |
33 |
34 |
35 | } />
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/child1/src/Feature1_M1.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature1_M1() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 1 / Feature 1
11 | )
12 | }
--------------------------------------------------------------------------------
/child1/src/Feature2_M1.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature2_M1() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 1 / Feature 2
11 | )
12 | }
--------------------------------------------------------------------------------
/child1/src/Feature3_M1.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature3_M1() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 1 / Feature 3
11 | )
12 | }
--------------------------------------------------------------------------------
/child1/src/Feature4_M1.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature4_M1() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 1 / Feature 4
11 | )
12 | }
--------------------------------------------------------------------------------
/child1/src/IndexPage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { BrowserRouter as Switch , Link } from "react-router-dom";
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function IndexPage({}) {
6 |
7 |
8 | const [pre, setPre] = useState('/')
9 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
10 |
11 | useEffect(() => {
12 | setPre(modulePerms ? '/module1' : '' )
13 | }, [ ])
14 |
15 | return (
16 |
17 |
Module 1
18 | {(!modulePerms || modulePerms.m1_feature1 ) &&
Feature : 1
}
19 | {(!modulePerms || modulePerms.m1_feature2 ) &&
Feature : 2
}
20 | {(!modulePerms || modulePerms.m1_feature3 ) &&
Feature : 3
}
21 | {(!modulePerms || modulePerms.m1_feature4 ) &&
Feature : 4
}
22 |
30 |
31 |
32 |
33 | } />
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/child2/src/Feature1_M2.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature1_M2() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 2 / Feature 1
11 | )
12 | }
--------------------------------------------------------------------------------
/child2/src/Feature2_M2.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature2_M2() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 2 / Feature 2
11 | )
12 | }
--------------------------------------------------------------------------------
/child2/src/Feature3_M2.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature3_M2() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 2 / Feature 3
11 | )
12 | }
--------------------------------------------------------------------------------
/child2/src/Feature4_M2.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function Feature4_M2() {
6 |
7 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
8 |
9 | return (
10 | Module 2 / Feature 4
11 | )
12 | }
--------------------------------------------------------------------------------
/child2/src/IndexPage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { BrowserRouter as Router, Route, Switch , Link } from "react-router-dom";
3 | import { useSelector } from 'react-redux'
4 |
5 | export default function IndexPage({}) {
6 |
7 |
8 | const [pre, setPre] = useState('/')
9 | const modulePerms = useSelector((state) => state.userLogin.modulePerms);
10 |
11 | useEffect(() => {
12 | setPre(modulePerms ? '/module2' : '' )
13 | }, [ ])
14 |
15 | return (
16 |
17 |
Module 2
18 | {(!modulePerms || modulePerms.m2_feature1 ) &&
Feature : 1
}
19 | {(!modulePerms || modulePerms.m2_feature2 ) &&
Feature : 2
}
20 | {(!modulePerms || modulePerms.m2_feature3 ) &&
Feature : 3
}
21 | {(!modulePerms || modulePerms.m2_feature4 ) &&
Feature : 4
}
22 |
79 |
80 |
81 |
Home
82 |
|
83 |
84 |
|
85 |
86 |
87 |
88 | Change Controls
89 |
90 |
91 |
94 |
95 | {(modules && modules.m1) &&
handleRouteChange('/module1')} >
Module 1
}
96 | {(modules && modules.m2) &&
handleRouteChange('/module2')} >
Module 2
}
97 | {(modules && modules.m3) &&
handleRouteChange('/module3')} >
Module 3
}
98 |
99 |
100 |
101 |
102 | {modules && modulePerms ?
103 | Welcome
} />
104 |
105 | {modules.m1 && } />}
106 | {modulePerms.m1_feature1 && } />}
107 | {modulePerms.m1_feature2 && } />}
108 | {modulePerms.m1_feature3 && } />}
109 | {modulePerms.m1_feature4 && } />}
110 |
111 | {modules.m2 && } />}
112 | {modulePerms.m2_feature1 && } />}
113 | {modulePerms.m2_feature2 && } />}
114 | {modulePerms.m2_feature3 && } />}
115 | {modulePerms.m2_feature4 && } />}
116 |
117 | {modules.m3 && } />}
118 |
119 | Page Not Found
} />
120 |
121 |
122 | :
123 |
Please Log In First
124 | }
125 |
126 |
127 |
128 |
133 | Footer
134 |
135 |
136 | );
137 | }
138 |
--------------------------------------------------------------------------------
/container/src/NotDeployed.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useHistory } from 'react-router-dom'
3 |
4 | export default function NotDeployed() {
5 |
6 | const history = useHistory()
7 | return (
8 |
9 |
{history && history.location.pathname.split('/')[1]}
10 |
is Not Deployed. Please Contact Support.
11 |
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/container/src/component/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 |
4 | export default function Layout({children}) {
5 | return (
6 |
7 |
8 |
9 |
10 |
Home
11 |
|
12 |
13 |
14 |
15 |
16 | Change Controls
17 |
18 |
19 |
20 |
21 |
22 |
23 | {children}
24 |
25 |
26 |
27 | Footer
28 |
29 |
30 |