Create isAdmin bool value from cookie to avoid bug

webportal_plugin/src/app/context.js

@@ -6,5 +6,6 @@ export default React.createContext({
   api: null,
   user: null,
   token: null,
+  isAdmin: false,
   history: null,
 });

webportal_plugin/src/app/index.jsx

@@ -9,7 +9,7 @@ import MarketList from '../app/market_list';
 import MarketDetail from '../app/market_detail';
 
 const App = props => {
-  const { api, user, token } = props;
+  const { api, user, token, isAdmin } = props;
 
   return (
     <Fabric style={{ height: '100%' }}>
@@ -22,6 +22,7 @@ const App = props => {
               api={api}
               user={user}
               token={token}
+              isAdmin={isAdmin}
               routeProps={props}
             />
           )}
@@ -33,6 +34,7 @@ const App = props => {
               api={api}
               user={user}
               token={token}
+              isAdmin={isAdmin}
               routeProps={props}
             />
           )}
@@ -46,6 +48,7 @@ App.propTypes = {
   api: PropTypes.string,
   user: PropTypes.string,
   token: PropTypes.string,
+  isAdmin: PropTypes.bool,
 };
 
 export default App;

webportal_plugin/src/app/market_detail/components/summary.jsx

@@ -34,8 +34,7 @@ const { spacing } = getTheme();
 
 export default function Summary(props) {
   const { marketItem } = props;
-  const { user } = useContext(Context);
-  const admin = cookies.get('admin');
+  const { user, isAdmin } = useContext(Context);
 
   const [hideDialog, setHideDialog] = useState(true);
   const [hideApproveDialog, setHideApproveDialog] = useState(true);
@@ -56,6 +55,10 @@ export default function Summary(props) {
     fetchStarRelationWrapper();
   }, []);
 
+  const checkAuthorAdmin = useCallback(() => {
+    return isAdmin || user === marketItem.author;
+  });
+
   const clickStar = useCallback(async () => {
     if (stared) {
       await deleteStar(user, marketItem.id);
@@ -88,6 +91,8 @@ export default function Summary(props) {
     );
   };
 
+  console.log(checkAuthorAdmin());
+
   return (
     <div
       style={{
@@ -190,24 +195,28 @@ export default function Summary(props) {
                 }}
                 onClick={clickSubmit}
               />
-              <DefaultButton
-                text='Edit'
-                styles={{
-                  root: {
-                    fontSize: 14,
-                    fontWeight: FontWeights.regular,
-                  },
-                }}
-                onClick={e => {
-                  setHideDialog(false);
-                }}
-              />
-              <EditMarketItem
-                hideDialog={hideDialog}
-                setHideDialog={setHideDialog}
-                marketItem={marketItem}
-              />
-              {admin && (
+              {checkAuthorAdmin() && (
+                <Stack>
+                  <DefaultButton
+                    text='Edit'
+                    styles={{
+                      root: {
+                        fontSize: 14,
+                        fontWeight: FontWeights.regular,
+                      },
+                    }}
+                    onClick={e => {
+                      setHideDialog(false);
+                    }}
+                  />
+                  <EditMarketItem
+                    hideDialog={hideDialog}
+                    setHideDialog={setHideDialog}
+                    marketItem={marketItem}
+                  />
+                </Stack>
+              )}
+              {checkAuthorAdmin() && (
                 <Stack>
                   <DefaultButton
                     text='Delete'

webportal_plugin/src/app/market_detail/index.jsx

@@ -19,7 +19,7 @@ import { SpinnerLoading } from 'App/components/loading';
 import { getItemById } from 'App/utils/marketplace_api';
 
 const MarketDetail = props => {
-  const { api, user, token, routeProps } = props;
+  const { api, user, token, isAdmin, routeProps } = props;
 
   const [loading, setLoading] = useState(true);
   const [marketItem, setMarketItem] = useState(null);
@@ -44,6 +44,7 @@ const MarketDetail = props => {
     user,
     api,
     token,
+    isAdmin,
     history: routeProps.history,
   };
 
@@ -67,6 +68,7 @@ MarketDetail.propTypes = {
   api: PropTypes.string,
   user: PropTypes.string,
   token: PropTypes.string,
+  isAdmin: PropTypes.bool,
   routeProps: PropTypes.object,
 };
 

webportal_plugin/src/app/market_list/index.jsx

@@ -17,15 +17,14 @@ import ListView from './list_view';
 import { getPendingItems, ensureUser } from 'App/utils/marketplace_api';
 
 const MarketList = props => {
-  const { api, user, token, routeProps } = props;
-  const admin = cookies.get('admin');
+  const { api, user, token, isAdmin, routeProps } = props;
 
   const [status, setStatus] = useState(initStatus());
   const [pendingListNumber, setPendingListNumber] = useState(0);
 
   function initStatus() {
     const status = qs.parse(routeProps.location.search).status;
-    if (!admin) {
+    if (!isAdmin) {
       return 'approved';
     }
     if (isNil(status)) {
@@ -41,6 +40,7 @@ const MarketList = props => {
     api,
     user,
     token,
+    isAdmin,
     history: routeProps.history,
   };
 
@@ -82,7 +82,7 @@ const MarketList = props => {
             >
               <ListView status={status} />
             </PivotItem>
-            {admin && (
+            {isAdmin && (
               <PivotItem
                 itemKey='pending'
                 headerText='Pending list'
@@ -103,6 +103,7 @@ MarketList.propTypes = {
   api: PropTypes.string,
   user: PropTypes.string,
   token: PropTypes.string,
+  isAdmin: PropTypes.bool,
   routeProps: PropTypes.object,
 };
 

webportal_plugin/src/index.js

@@ -11,11 +11,15 @@ class PAIMarketplacePluginElement extends HTMLElement {
     const api = this.getAttribute('pai-rest-server-uri');
     const user = this.getAttribute('pai-user');
     const token = this.getAttribute('pai-rest-server-token');
+    const isAdmin = cookies.get('admin') === 'true';
     if (user === null || token === null) {
       window.location.href = '/login.html';
       return;
     }
-    ReactDOM.render(React.createElement(App, { api, user, token }), this);
+    ReactDOM.render(
+      React.createElement(App, { api, user, token, isAdmin }),
+      this,
+    );
   }
 
   disconnectedCallback() {