Merge pull request #200 from novaforgood/dev

deploy

.github/workflows/dev.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
           cache: "npm"
 
       - name: Install Hasura CLI

.github/workflows/prod.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
           cache: "npm"
 
       - name: Install Hasura CLI

hasura/.gitignore

@@ -1,2 +1,2 @@
-.env
+.env*
 /db_data

hasura/docker-compose.dev.yml

@@ -0,0 +1,47 @@
+version: "3.6"
+services:
+  postgres:
+    image: postgres:12
+    restart: always
+    volumes:
+      - db_data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_PASSWORD: postgrespassword
+  graphql-engine:
+    image: hasura/graphql-engine:v2.16.0
+    ports:
+      - "8080:8080"
+    depends_on:
+      - "postgres"
+    restart: always
+    environment:
+      ## postgres database to store Hasura metadata
+      HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs
+      PG_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## enable the console served by server
+      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
+      ## enable debugging mode. It is recommended to disable this in production
+      HASURA_GRAPHQL_DEV_MODE: "true"
+      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
+      ## uncomment next line to set an admin secret
+      HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
+      ## Hasura JWT Secret
+      HASURA_GRAPHQL_JWT_SECRET: "${HASURA_GRAPHQL_JWT_SECRET}"
+      ## Unauthorized role
+      HASURA_GRAPHQL_UNAUTHORIZED_ROLE: "public"
+
+      ## CRON Webhook URL
+      CANOPY_CRON_WEBHOOK_URL: "${CANOPY_CRON_WEBHOOK_URL}"
+      ## CRON Client Key
+      CANOPY_CRON_CLIENT_KEY: "${CANOPY_CRON_CLIENT_KEY}"
+
+      ## Event Webhook URL
+      CANOPY_EVENT_WEBHOOK_URL: "${CANOPY_EVENT_WEBHOOK_URL}"
+      ## Event Client Key
+      CANOPY_EVENT_CLIENT_KEY: "${CANOPY_EVENT_CLIENT_KEY}"
+volumes:
+  db_data:

hasura/docker-compose.yml

@@ -4,44 +4,20 @@ services:
     image: postgres:12
     restart: always
     volumes:
-      - db_data:/var/lib/postgresql/data
+      - canopy_prod_db:/var/lib/postgresql/data
     ports:
       - "5432:5432"
-    environment:
-      POSTGRES_PASSWORD: postgrespassword
+    env_file:
+      - .env.prod
   graphql-engine:
     image: hasura/graphql-engine:v2.16.0
     ports:
       - "8080:8080"
     depends_on:
       - "postgres"
     restart: always
-    environment:
-      ## postgres database to store Hasura metadata
-      HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
-      ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs
-      PG_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
-      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
-      ## enable the console served by server
-      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
-      ## enable debugging mode. It is recommended to disable this in production
-      HASURA_GRAPHQL_DEV_MODE: "true"
-      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
-      ## uncomment next line to set an admin secret
-      HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
-      ## Hasura JWT Secret
-      HASURA_GRAPHQL_JWT_SECRET: "${HASURA_GRAPHQL_JWT_SECRET}"
-      ## Unauthorized role
-      HASURA_GRAPHQL_UNAUTHORIZED_ROLE: "public"
+    env_file:
+      - .env.prod
 
-      ## CRON Webhook URL
-      CANOPY_CRON_WEBHOOK_URL: "${CANOPY_CRON_WEBHOOK_URL}"
-      ## CRON Client Key
-      CANOPY_CRON_CLIENT_KEY: "${CANOPY_CRON_CLIENT_KEY}"
-
-      ## Event Webhook URL
-      CANOPY_EVENT_WEBHOOK_URL: "${CANOPY_EVENT_WEBHOOK_URL}"
-      ## Event Client Key
-      CANOPY_EVENT_CLIENT_KEY: "${CANOPY_EVENT_CLIENT_KEY}"
 volumes:
-  db_data:
+  canopy_prod_db:

web/components/EditProfileListing.tsx

@@ -18,6 +18,10 @@ import { EditResponse } from "./edit-profile/EditResponse";
 import { ProfileSocialsDisplay } from "./edit-socials-info/ProfileSocialsDisplay";
 import { ProfileSocialsModal } from "./edit-socials-info/ProfileSocialsModal";
 import PublishedToggleSwitch from "./PublishedToggleSwitch";
+import { useSpaceAttributes } from "../hooks/useSpaceAttributes";
+import { CheckBox } from "./atomic/CheckBox";
+import { handleError } from "../lib/error";
+import toast from "react-hot-toast";
 
 function EditProfileImage() {
   const { currentProfile } = useCurrentProfile();
@@ -53,9 +57,15 @@ interface EditProfileListingProps {
 export function EditProfileListing(props: EditProfileListingProps) {
   const { showPublishedToggle = true } = props;
 
-  const { currentProfile, currentProfileHasRole } = useCurrentProfile();
+  const {
+    currentProfile,
+    currentProfileHasRole,
+    profileAttributes,
+    updateProfileAttributes,
+  } = useCurrentProfile();
   const { currentSpace } = useCurrentSpace();
   const { userData } = useUserData();
+  const { attributes } = useSpaceAttributes();
 
   const [socialsOpened, socialsHandlers] = useDisclosure(false);
 
@@ -78,7 +88,43 @@ export function EditProfileListing(props: EditProfileListingProps) {
           profileListingId={currentProfile.profile_listing?.id ?? ""}
         />
       )}
+
       <div className="h-4"></div>
+      {attributes?.communityGuidelinesUrl && (
+        <>
+          <CheckBox
+            label={
+              <span>
+                I agree to the{" "}
+                <a
+                  href={attributes.communityGuidelinesUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-lime-700 underline"
+                >
+                  community guidelines
+                </a>
+              </span>
+            }
+            checked={profileAttributes.agreedToCommunityGuidelines}
+            onChange={(e) => {
+              const newVal = e.target?.checked ?? false;
+
+              toast.promise(
+                updateProfileAttributes({
+                  agreedToCommunityGuidelines: newVal,
+                }),
+                {
+                  loading: "Loading",
+                  success: `${newVal ? "Agreed" : "Disagreed"} to guidelines`,
+                  error: (err) => err.message,
+                }
+              );
+            }}
+          />
+          <div className="h-4"></div>
+        </>
+      )}
       <div className="flex w-full max-w-3xl flex-col rounded-lg border border-black bg-white pb-12">
         <div className="h-20 rounded-t-lg bg-gray-100"></div>
         <div className="-mt-4 px-4 sm:px-12">

web/components/account-settings/ProfileSettings.tsx

@@ -17,7 +17,10 @@ import { useCurrentSpace } from "../../hooks/useCurrentSpace";
 import { usePrevious } from "../../hooks/usePrevious";
 import { useSaveChangesState } from "../../hooks/useSaveChangesState";
 import { useUserData } from "../../hooks/useUserData";
-import { ProfileAttributes } from "../../lib/profileAttributes";
+import {
+  DEFAULT_PROFILE_ATTRIBUTES,
+  ProfileAttributes,
+} from "../../lib/profileAttributes";
 import { Button, Text } from "../atomic";
 import { CheckBox } from "../atomic/CheckBox";
 
@@ -57,8 +60,6 @@ export function ProfileSettings() {
     return true;
   }, [client, currentProfile?.profile_listing]);
 
-  console.log(settings);
-
   return (
     <>
       <Text variant="heading3">Settings for {currentSpace?.name}</Text>
@@ -88,6 +89,7 @@ export function ProfileSettings() {
           }
 
           setSettings((prev) => ({
+            ...DEFAULT_PROFILE_ATTRIBUTES,
             ...prev,
             enableChatIntros: newVal,
           }));

web/components/admin/SetPrivacySettings.tsx

@@ -2,37 +2,36 @@ import { useEffect, useMemo, useState } from "react";
 
 import toast from "react-hot-toast";
 
-import { Button, Text } from "../../components/atomic";
+import { Button, Input, Text } from "../../components/atomic";
 import {
   useUpdateSpaceAttributesMutation,
   useUpdateSpaceMutation,
 } from "../../generated/graphql";
 import { useCurrentSpace } from "../../hooks/useCurrentSpace";
-import {
-  PrivacySettings,
-  usePrivacySettings,
-} from "../../hooks/usePrivacySettings";
+import { useSpaceAttributes } from "../../hooks/useSpaceAttributes";
 import { useSaveChangesState } from "../../hooks/useSaveChangesState";
 import { CheckBox } from "../atomic/CheckBox";
+import { TextInput } from "../inputs/TextInput";
+import { SpaceAttributes } from "../../lib/spaceAttributes";
 
 export function SetPrivacySettings() {
   const { currentSpace } = useCurrentSpace();
 
-  const { privacySettings } = usePrivacySettings();
+  const { attributes } = useSpaceAttributes();
 
-  const [settings, setSettings] = useState<PrivacySettings>();
+  const [attributesState, setAttributesState] = useState<SpaceAttributes>();
   const { mustSave, setMustSave } = useSaveChangesState();
 
   useEffect(() => {
-    if (privacySettings) {
-      setSettings(privacySettings);
+    if (attributes) {
+      setAttributesState(attributes);
     }
-  }, [privacySettings]);
+  }, [attributes]);
 
   const [loading, setLoading] = useState(false);
   const [_, updateSpaceAttributes] = useUpdateSpaceAttributesMutation();
 
-  if (!settings) {
+  if (!attributesState) {
     return null;
   }
 
@@ -48,24 +47,24 @@ export function SetPrivacySettings() {
       <div className="h-4"></div>
       <CheckBox
         label={`Public (visible to anyone who visits ${window.location.origin}/space/${currentSpace?.slug}, not just members in your space)`}
-        checked={settings.public}
+        checked={attributesState.public}
         onChange={(e) => {
           const newVal = e.target?.checked ?? false;
 
           setMustSave(true);
-          setSettings({ ...settings, public: newVal });
+          setAttributesState({ ...attributesState, public: newVal });
         }}
       />
       <div className="h-4"></div>
 
       <CheckBox
         label={`Only allow members with published profiles to view other profiles. (Admins will still be able to view all published profiles)`}
-        checked={settings.allowOnlyPublicMembersToViewProfiles}
+        checked={attributesState.allowOnlyPublicMembersToViewProfiles}
         onChange={(e) => {
           const newVal = e.target?.checked ?? false;
           setMustSave(true);
-          setSettings({
-            ...settings,
+          setAttributesState({
+            ...attributesState,
             allowOnlyPublicMembersToViewProfiles: newVal,
           });
         }}
@@ -74,19 +73,52 @@ export function SetPrivacySettings() {
       <div className="h-4"></div>
       <CheckBox
         label={`Opt new users in to matches by default (when they join the space)`}
-        checked={settings.optUsersInToMatchesByDefault}
+        checked={attributesState.optUsersInToMatchesByDefault}
         onChange={(e) => {
           const newVal = e.target?.checked ?? false;
 
           setMustSave(true);
-          setSettings({
-            ...settings,
+          setAttributesState({
+            ...attributesState,
             optUsersInToMatchesByDefault: newVal,
           });
         }}
       />
 
+      <div className="h-12"></div>
+      <TextInput
+        label="Comma-separated allowed domains to join space. Empty = allow all domains"
+        placeholder="example.com,example.org"
+        value={attributesState.domainWhitelists?.join(",") ?? ""}
+        onChange={(e) => {
+          const newVal = e.target.value;
+
+          setMustSave(true);
+          setAttributesState({
+            ...attributesState,
+            domainWhitelists: newVal
+              ? newVal.split(",").map((x) => x.trim())
+              : null,
+          });
+        }}
+      />
+
+      <div className="h-4"></div>
+      <TextInput
+        label="Community guidelines URL (users must agree to guidelines before publishing profile)"
+        value={attributesState.communityGuidelinesUrl || ""}
+        onChange={(e) => {
+          const newVal = e.target.value;
+          setMustSave(true);
+          setAttributesState({
+            ...attributesState,
+            communityGuidelinesUrl: newVal || null,
+          });
+        }}
+      />
+
       <div className="h-8"></div>
+      {/* <pre>{JSON.stringify(settings, null, 2)}</pre> */}
       <Button
         disabled={!mustSave}
         rounded
@@ -97,7 +129,7 @@ export function SetPrivacySettings() {
           }
           setLoading(true);
           updateSpaceAttributes({
-            changes: settings,
+            changes: attributesState,
             space_id: currentSpace.id,
           })
             .then((res) => {

web/components/atomic/CheckBox.tsx

@@ -1,8 +1,9 @@
+import { ReactNode } from "react";
 import { Text } from ".";
 
 export function CheckBox(
   props: {
-    label?: string;
+    label?: ReactNode;
   } & React.InputHTMLAttributes<HTMLInputElement>
 ) {
   const { label, ...rest } = props;