Update staging

.run/Admin.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+    <configuration default="false" name="Admin" type="js.build_tools.npm">
+        <package-json value="$PROJECT_DIR$/packages/admin/package.json"/>
+        <command value="run"/>
+        <scripts>
+            <script value="dev"/>
+        </scripts>
+        <node-interpreter value="project"/>
+        <envs/>
+        <method v="2"/>
+    </configuration>
+</component>

.run/GraphQL.run.xml

@@ -1,12 +1,13 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="GraphQL" type="js.build_tools.npm">
-    <package-json value="$PROJECT_DIR$/packages/graphql/package.json" />
-    <command value="run" />
+    <package-json value="$PROJECT_DIR$/packages/graphql/package.json"/>
+    <command value="run"/>
     <scripts>
-      <script value="dev" />
+      <script value="dev"/>
     </scripts>
-    <node-interpreter value="project" />
-    <envs />
-    <method v="2" />
+    <node-interpreter value="/usr/local/bin/node"/>
+    <package-manager value="/usr/local/Cellar/yarn/1.22.10/libexec"/>
+    <envs/>
+    <method v="2"/>
   </configuration>
 </component>

packages/admin/.env

@@ -1,3 +1,8 @@
+NEXT_PUBLIC_Firebase.ApiKey="AIzaSyClh8UZh-PDyVgwPrHZwURoA4HWuiXUbR8"
+NEXT_PUBLIC_Firebase.ProjectId="common-staging-50741"
+NEXT_PUBLIC_Firebase.AuthDomain="common-staging-50741.firebaseapp.com"
+NEXT_PUBLIC_Firebase.DatabaseUrl="https://common-staging-50741.firebaseio.com"
+
 NEXT_PUBLIC_ADMIN_GRAPH_ENDPOINT=https://us-central1-common-staging-50741.cloudfunctions.net/graph/graphql
 
 NEXT_PUBLIC_Firebase.apiKey=AIzaSyClh8UZh-PDyVgwPrHZwURoA4HWuiXUbR8

packages/admin/.env.local

@@ -1 +1,6 @@
-NEXT_PUBLIC_ADMIN_GRAPH_ENDPOINT=http://localhost:5003/common-staging-50741/us-central1/graph/graphql
+NEXT_PUBLIC_Firebase.ApiKey="AIzaSyClh8UZh-PDyVgwPrHZwURoA4HWuiXUbR8"
+NEXT_PUBLIC_Firebase.ProjectId="common-staging-50741"
+NEXT_PUBLIC_Firebase.AuthDomain="common-staging-50741.firebaseapp.com"
+NEXT_PUBLIC_Firebase.DatabaseUrl="https://common-staging-50741.firebaseio.com"
+
+NEXT_PUBLIC_GraphQl.Endpoint=http://localhost:4000/graphql

packages/admin/.env.local.example

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_Firebase.ApiKey="AIzaSyClh8UZh-PDyVgwPrHZwURoA4HWuiXUbR8"
+NEXT_PUBLIC_Firebase.ProjectId="common-staging-50741"
+NEXT_PUBLIC_Firebase.AuthDomain="common-staging-50741.firebaseapp.com"
+NEXT_PUBLIC_Firebase.DatabaseUrl="https://common-staging-50741.firebaseio.com"
+
+NEXT_PUBLIC_GraphQl.Endpoint=http://localhost:4000/graphql

packages/admin/codegen.yml

@@ -1,16 +1,27 @@
 overwrite: true
-schema: "http://localhost:5003/common-staging-50741/us-central1/graph/graphql"
-documents: "src/**/*.tsx"
+schema: "http://localhost:4000/graphql"
+documents:
+  - "src/core/**/*.tsx"
+  - "src/components/tables/LatestEventsTable.tsx"
+  - "src/components/CommonSettings.tsx"
+  - "src/pages/dashboard/index.tsx"
+  - "src/pages/commons/index.tsx"
+  - "src/pages/proposals/index.tsx"
+  - "src/pages/users/index.tsx"
+  - "src/pages/commons/details/[commonId].tsx"
+  - "src/pages/proposals/details/[proposalId].tsx"
+  - "src/pages/users/details/[userId].tsx"
+  - "src/pages/notifications/**/*.tsx"
 generates:
-  ./src/graphql/index.ts:
+  ./src/core/graphql/index.ts:
     plugins:
       - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"
-  ./src/graphql/schema.json:
+  ./src/core/graphql/schema.json:
     plugins:
       - "introspection"
-  ./src/graphql/schema.graphql:
+  ./src/core/graphql/schema.graphql:
     plugins:
       - schema-ast
     config:

packages/admin/next.config.js

@@ -1,3 +1,7 @@
 const withImages = require('next-images')
 
-module.exports = withImages()
+module.exports = withImages({
+  future: {
+    webpack5: true
+  }
+});

packages/admin/public/style.css

@@ -0,0 +1,3 @@
+* {
+    user-select: none;
+}

packages/admin/src/components/CommonSettings.tsx

@@ -1,81 +1,133 @@
 import React from 'react';
-
-import { gql } from '@apollo/client';
 import { Tooltip, Row, useToasts, Spacer } from '@geist-ui/react';
-import { Settings, Award, RefreshCcw, Edit, Trash2 } from '@geist-ui/react-icons';
+import { Award, RefreshCcw, Edit, Trash2, Slash, Settings } from '@geist-ui/react-icons';
+import { gql } from '@apollo/client';
 
+import { useWhitelistCommonMutation, useDelistCommonMutation } from '@core/graphql';
+import { Hoverable } from '@components/Hoverable';
 import { Centered } from '@components/Centered';
-import { useWhitelistCommonMutation } from '@graphql';
 
 interface ICommonSettingsProps {
   commonId: string;
+  whitelisted: boolean;
+  refetch: () => any;
 }
 
 const WhitelistCommonMutation = gql`
-  mutation whitelistCommon($commonId: ID!) {
+  mutation whitelistCommon($commonId: String!) {
     whitelistCommon(commonId: $commonId)
   }
 `;
 
-export const CommonSettings: React.FC<ICommonSettingsProps> = ({ commonId }) => {
+const DelistCommonMutation = gql`
+  mutation delistCommon($commonId: String!) {
+    delistCommon(commonId: $commonId)
+  }
+`;
+
+export const CommonSettings: React.FC<ICommonSettingsProps> = ({ commonId, whitelisted, refetch }) => {
   const [, setToast] = useToasts();
 
   // - Networking
-  const [whitelistCommon, { data }] = useWhitelistCommonMutation();
+  const [whitelistCommon, { data: whitelistResult }] = useWhitelistCommonMutation();
+  const [delistCommon, { data: delistResult }] = useDelistCommonMutation();
 
   // - Actions
-  const onCommonWhitelisted = async () => {
+  const onWhitelistCommon = async () => {
     await whitelistCommon({
       variables: {
         commonId
       }
     });
+
+    if (typeof refetch === 'function') {
+      refetch();
+    }
+  };
+
+  const onCommonDelist = async () => {
+    await delistCommon({
+      variables: {
+        commonId
+      }
+    });
+
+    if (typeof refetch === 'function') {
+      refetch();
+    }
   };
 
   // - Effects
   React.useEffect(() => {
-    if (data?.whitelistCommon) {
+    if (whitelistResult?.whitelistCommon) {
       setToast({
         text: 'Common whitelisted!'
       });
     }
-  }, [data]);
+  }, [whitelistResult]);
+
+  React.useEffect(() => {
+    if (delistResult?.delistCommon) {
+      setToast({
+        text: 'Common delisted!'
+      });
+    }
+  }, [delistResult]);
 
   return (
     <Tooltip
       placement="bottomEnd"
       trigger="click"
       text={(
-        <div style={{ width: '250px', margin: '.7rem 0' }}>
-          <Row style={{ cursor: 'pointer' }} onClick={onCommonWhitelisted}>
-            <Award/>
-            <Spacer x={.5} />
-            Whitelist Common
-          </Row>
-
-          <Spacer y={.7} />
-
-          <Row style={{ cursor: 'pointer' }}>
-            <RefreshCcw/>
-            <Spacer x={.5} />
-            Refresh Common Members
-          </Row>
-
-          <Spacer y={.7} />
-
-          <Row style={{ cursor: 'pointer' }}>
-            <Edit/>
-            <Spacer x={.5} />
-            Edit Common Details
-          </Row>
-
-          <Spacer y={.7} />
-
-          <Row style={{ cursor: 'pointer', color: 'red' }}>
-            <Trash2 />
-            <Spacer x={.5} />
-            Delete Common
-          </Row>
+        <div style={{ width: '270px', margin: '.3em -0.7em' }}>
+          <React.Fragment>
+            <Hoverable>
+              {whitelisted
+                ? (
+                  <Row style={{ cursor: 'pointer' }} onClick={onCommonDelist}>
+                    <Slash/>
+                    <Spacer x={.5}/>
+                    Delist Common
+                  </Row>
+                ) : (
+                  <Row style={{ cursor: 'pointer' }} onClick={onWhitelistCommon}>
+                    <Award/>
+                    <Spacer x={.5}/>
+                    Whitelist Common
+                  </Row>
+                )}
+            </Hoverable>
+
+            <Spacer y={.5}/>
+          </React.Fragment>
+
+          <Hoverable>
+            <Row style={{ cursor: 'pointer' }}>
+              <RefreshCcw/>
+              <Spacer x={.5}/>
+              Refresh Common Members
+            </Row>
+          </Hoverable>
+
+          <Spacer y={.5}/>
+
+          <Hoverable>
+            <Row style={{ cursor: 'pointer' }}>
+              <Edit/>
+              <Spacer x={.5}/>
+              Edit Common Details
+            </Row>
+          </Hoverable>
+
+          <Spacer y={.5}/>
+
+          <Hoverable>
+            <Row style={{ cursor: 'pointer', color: 'red' }}>
+              <Trash2/>
+              <Spacer x={.5}/>
+              Delete Common
+            </Row>
+          </Hoverable>
         </div>
       )}
     >

packages/admin/src/components/HasPermission.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 
-import { usePermissionsContext, useAuthContext } from '@context';
 import { useRouter } from 'next/router';
+import { useUserContext } from '@core/context';
 
 interface IHasPermissionProps {
   permission: string;
@@ -10,43 +10,40 @@ interface IHasPermissionProps {
 }
 
 export const HasPermission: React.FC<PropsWithChildren<IHasPermissionProps>> = ({ children, permission, redirect }) => {
-  const permissionsContext = usePermissionsContext();
-  const authContext = useAuthContext();
   const router = useRouter();
+  const userContext = useUserContext();
 
   const hasPermission = (permission: string): boolean => {
     let hasPermission = false;
 
-    if (permissionsContext.loaded) {
+    if (userContext.loaded) {
+      const permissions = userContext.permissions;
+
+      console.log(permissions);
+
       if (permission.includes('*')) {
-        hasPermission = permissionsContext.permissions
-          .some((userPermission) => matchRuleExpl(userPermission, permission));
+        hasPermission = permissions.some((userPermission) =>
+          matchRuleExpl(userPermission, permission));
       } else {
-        hasPermission = permissionsContext.permissions.includes(permission);
+        hasPermission = permissions.includes(permission);
       }
     }
 
     console.debug(`Permission check for [${permission}]: ${hasPermission}`);
 
-    if (!hasPermission && redirect) {
-      if (authContext.authenticated) {
-        router.push({
+    if (!hasPermission && userContext.loaded && redirect) {
+      router
+        .push({
           pathname: '/error/unauthorized',
           query: {
             redirected: true,
             redirectedFrom: router.pathname,
             failedPermission: permission
           }
+        })
+        .then(() => {
+          console.log('Redirected unauthorized request');
         });
-      } else {
-        router.push({
-          pathname: '/auth',
-          query: {
-            redirected: true,
-            redirectedFrom: router.pathname
-          }
-        });
-      }
     }
 
     return true;
@@ -72,13 +69,9 @@ export const HasPermission: React.FC<PropsWithChildren<IHasPermissionProps>> = (
   };
 
 
-  return (
+  return hasPermission(permission) && (
     <React.Fragment>
-      {permissionsContext.loaded && hasPermission(permission) && (
-        <React.Fragment>
-          {children}
-        </React.Fragment>
-      )}
+      {children}
     </React.Fragment>
   );
 };