Show hide a control in a page. Done

Author: foyzulkarim

client/src/App.js

@@ -9,7 +9,7 @@ import { Constants } from "./constants";
 import { checkPermission } from "./utils/permissionManager.js";
 import { ResourceCreate, ResourceList } from "./components/Resource";
 import { PermissionCreate, PermissionList } from "./components/Permission";
-import { RoleCreate } from './components/Role';
+import { RoleCreate, RoleList } from './components/Role';
 
 export const PrivateRoute = ({ component: Component, name: resource, ...rest }) => {
 
@@ -78,6 +78,7 @@ const App = () => {
  { name: 'link-permission-create', url: '/permission-create', text: 'Create permission', component: PermissionCreate },
  { name: 'link-permission-list', url: '/permission-list', text: 'List permissions', component: PermissionList },
  { name: 'link-role-create', url: '/role-create', text: 'Create role', component: RoleCreate },
+ { name: 'link-role-list', url: '/role-list', text: 'List role', component: RoleList },
  { name: 'link-resource-create', url: '/resource-create', text: 'Create resource', component: ResourceCreate },
  { name: 'link-resource-list', url: '/resource-list', text: 'List resource', component: ResourceList },
  ];

client/src/components/Posts.js

@@ -201,8 +201,8 @@ export const PostSummary = (post) => {
  <p>{post.emText}</p>
  <Link to={() => `/post-detail/${post.id}`}>Detail</Link> &nbsp;
  <Link to={() => `/post-edit/${post.id}`}>Edit</Link> &nbsp;
- <Link to={() => `/post-delete/${post.id}`}>Delete</Link> &nbsp;
- <SecuedLink resource='link-post-delete' url={ `/post-delete/${post.id}`} text='Delete'></SecuedLink>
+ {/* <Link to={() => `/post-delete/${post.id}` style={{ pointerEvents: 'none' }}}>Delete</Link> &nbsp; */}
+ <SecuedLink resource='link-post-delete' url={`/post-delete/${post.id}`} text='Delete'></SecuedLink>
  </div>
  )
 }

client/src/components/Role.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useHistory } from "react-router-dom";
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { Table, Row, Col } from 'react-bootstrap';
 
 const RoleSchema = Yup.object().shape({
  name: Yup.string()
@@ -48,3 +49,50 @@ export const RoleCreate = () => {
  </div>
  );
 };
+
+export const RoleList = () => {
+
+ let dispatch = useDispatch();
+
+ const roleContext = useSelector(state => {
+ return state.roleContext;
+ });
+
+ useEffect(() => {
+ dispatch({ type: "FETCH_ROLE" });
+ }, []);
+
+ console.log("Resources", roleContext.roleList);
+
+ return (
+ <>
+ <Row>
+ <h2>Role List {roleContext.roleList.length}</h2>
+ </Row>
+ <Row>
+ <Col>
+ <Table striped bordered hover>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Name</th>
+ </tr>
+ </thead>
+ <tbody>
+ {
+ roleContext.roleList.map((resource, index) => {
+ return (
+ <tr key={index}>
+ <td>{index + 1}</td>
+ <td>{resource.name}</td>
+ </tr>
+ )
+ })
+ }
+ </tbody>
+ </Table>
+ </Col>
+ </Row>
+ </>
+ );
+}