Add program public/private to settings

src/components/atomic/Toggle.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Switch } from "@headlessui/react";
+
+interface ToggleProps {
+  enabled: boolean;
+  onClick(checked: boolean): void;
+}
+
+const Toggle = (props: ToggleProps) => {
+  const { enabled, onClick } = props;
+
+  return (
+    <Switch
+      checked={enabled}
+      onChange={onClick}
+      className={`${
+        enabled ? "bg-primary" : "bg-secondary"
+      } relative inline-flex items-center h-6 rounded-full w-11`}
+    >
+      <span className="sr-only">Enable notifications</span>
+      <span
+        className={`${
+          enabled ? "translate-x-6" : "translate-x-1"
+        } inline-block w-4 h-4 transform bg-white rounded-full`}
+      />
+    </Switch>
+  );
+};
+
+export default Toggle;

src/components/atomic/index.tsx

@@ -7,3 +7,4 @@ export { default as Modal } from "./Modal";
 export { default as Tag } from "./Tag";
 export { default as Text } from "./Text";
 export { default as TextArea } from "./TextArea";
+export { default as Toggle } from "./Toggle";

src/graphql/queries/getProgramBySlug.graphql

@@ -15,5 +15,6 @@ query getProgramBySlug($slug: String!) {
       name
       listIndex
     }
+    public
   }
 }

src/layouts/ChooseTabLayout.tsx

@@ -1,20 +1,17 @@
 import { useRouter } from "next/router";
-import React, { Fragment } from "react";
+import React from "react";
 import { AuthorizationLevel, useAuthorizationLevel } from "../hooks";
 import { parseParam } from "../utils";
 import { MAP_PROFILETYPE_TO_ROUTE } from "../utils/constants";
-import { AdminTabLayout, MenteeTabLayout, MentorTabLayout } from "./TabLayout";
+import {
+  AdminTabLayout,
+  MenteeTabLayout,
+  MentorTabLayout,
+  NotInProgramTabLayout,
+} from "./TabLayout";
 import NoMatchingProfileLayout from "./TabLayout/NoMatchingProfileTabLayout";
 import { BaseTabLayoutProps } from "./TabLayout/TabLayout";
 
-const NotInProgramTabLayout: React.FC<BaseTabLayoutProps> = ({
-  children,
-  basePath,
-}) => {
-  basePath;
-  return <Fragment>{children}</Fragment>;
-};
-
 function getTabLayout(
   authLevel: AuthorizationLevel
 ): React.FC<BaseTabLayoutProps> {

src/layouts/TabLayout/NotInProgramTabLayout.tsx

@@ -0,0 +1,32 @@
+import { Home, Users } from "../../components/icons";
+import { useCurrentProgram } from "../../hooks";
+import TabLayout, { BaseTabLayoutProps, joinPath } from "./TabLayout";
+
+const { PageItem } = TabLayout;
+
+const NotInProgramTabLayout: React.FC<BaseTabLayoutProps> = ({
+  children,
+  basePath,
+}) => {
+  const { currentProgram } = useCurrentProgram();
+  const { public: programIsPublic } = currentProgram || {
+    public: false,
+  };
+
+  return (
+    <TabLayout currentPageChildren={children}>
+      <PageItem label="Homepage" Icon={Home} path={joinPath(basePath)} />
+      {programIsPublic ? (
+        <PageItem
+          label="All Mentors"
+          Icon={Users}
+          path={joinPath(basePath, "mentors")}
+        />
+      ) : (
+        <></>
+      )}
+    </TabLayout>
+  );
+};
+
+export default NotInProgramTabLayout;

src/layouts/TabLayout/index.tsx

@@ -1,3 +1,4 @@
 export { default as AdminTabLayout } from "./AdminTabLayout";
 export { default as MentorTabLayout } from "./MentorTabLayout";
 export { default as MenteeTabLayout } from "./MenteeTabLayout";
+export { default as NotInProgramTabLayout } from "./NotInProgramTabLayout";

src/pages/program/[slug]/[profileRoute]/settings.tsx

@@ -1,5 +1,11 @@
 import React, { ChangeEvent, Fragment, useEffect, useState } from "react";
-import { Button, Card, Input, Text } from "../../../../components/atomic";
+import {
+  Button,
+  Card,
+  Input,
+  Text,
+  Toggle,
+} from "../../../../components/atomic";
 import CatchUnsavedChangesModal from "../../../../components/CatchUnsavedChangesModal";
 import UploadIconWithPreview from "../../../../components/UploadIconWithPreview";
 import {
@@ -50,11 +56,19 @@ const AdminBox = (user: User) => {
 
 const SettingsPage: Page = () => {
   const { currentProgram, refetchCurrentProgram } = useCurrentProgram();
-  const { programId, name, description, iconUrl, slug } = currentProgram || {
+  const {
+    programId,
+    name,
+    description,
+    iconUrl,
+    public: programIsPublic,
+    slug,
+  } = currentProgram || {
     programId: "",
     name: "",
     description: "",
     iconUrl: "/static/DefaultLogo.svg",
+    public: false,
     slug: "",
   };
 
@@ -228,6 +242,44 @@ const SettingsPage: Page = () => {
         <Button disabled size="small">
           + add admin
         </Button>
+        <div className="h-4"></div>
+        <div className="grid gap-4 justify-center items-center">
+          <Text h3 b>
+            Program Privacy
+          </Text>
+          <div />
+          <div className="flex items-center">
+            <Text className="col-span-1" b secondary>
+              Turn {programIsPublic ? "on" : "off"} program privacy:
+            </Text>
+            <Toggle
+              enabled={programIsPublic}
+              onClick={async () => {
+                updateProgram({
+                  variables: {
+                    programId,
+                    data: {
+                      public: !programIsPublic,
+                    },
+                  },
+                })
+                  .then(() => {
+                    refetchCurrentProgram();
+                    console.log("refetch");
+                    setSnackbarMessage({ text: "Saved settings!" });
+                  })
+                  .catch((err) => setError(err));
+              }}
+            />
+          </div>
+          <div />
+          <Text b secondary>
+            Enabling program privacy means that those who are not part of your
+            mentorship cannot view the mentor directory. Toggling this feature
+            off allows anyone online to be able to view both the homepage and
+            the mentors under your mentorship.
+          </Text>
+        </div>
       </Card>
     </Fragment>
   );