Feature 2264 guilds query parameters

web-ui/src/components/guild-results/EditGuildModal.jsx

@@ -187,6 +187,9 @@ const EditGuildModal = ({ guild = {}, open, onSave, onClose, headerText }) => {
               ? editedGuild.guildMembers.filter(guildMember => guildMember.lead)
               : []
           }
+          isOptionEqualToValue={(option, value) =>
+            value && option.id === value.memberId
+          }
           onChange={onLeadsChange}
           getOptionLabel={option => option.name}
           renderInput={params => (
@@ -211,7 +214,7 @@ const EditGuildModal = ({ guild = {}, open, onSave, onClose, headerText }) => {
           onChange={onGuildMembersChange}
           getOptionLabel={option => option.name}
           isOptionEqualToValue={(option, value) =>
-            value ? value.id === option.id : false
+            value && option.id === value.memberId
           }
           renderInput={params => (
             <TextField

web-ui/src/components/guild-results/GuildResults.jsx

@@ -1,13 +1,17 @@
-import React, { useContext, useState } from 'react';
-
+import PropTypes from 'prop-types';
+import React, { useContext, useEffect, useState } from 'react';
+import GroupIcon from '@mui/icons-material/Group';
+import { Button, TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import GuildSummaryCard from './GuildSummaryCard';
+
+import { createGuild } from '../../api/guild';
+import { ADD_GUILD } from '../../context/actions';
 import { AppContext } from '../../context/AppContext';
-import GuildsActions from './GuildsActions';
-import PropTypes from 'prop-types';
-import { TextField } from '@mui/material';
-import './GuildResults.css';
+import AddGuildModal from './EditGuildModal';
+import GuildSummaryCard from './GuildSummaryCard';
 import SkeletonLoader from '../skeleton_loader/SkeletonLoader';
+import { useQueryParameters } from '../../helpers/query-parameters';
+import './GuildResults.css';
 
 const PREFIX = 'GuildResults';
 const classes = {
@@ -33,10 +37,39 @@ const propTypes = {
 const displayName = 'GuildResults';
 
 const GuildResults = () => {
-  const { state } = useContext(AppContext);
-  const { guilds } = state;
+  const { dispatch, state } = useContext(AppContext);
+  const { csrf, guilds, userProfile } = state;
+  const [addOpen, setAddOpen] = useState(false);
+  const [openedGuildId, setOpenedGuildId] = useState('');
   const [searchText, setSearchText] = useState('');
 
+  useQueryParameters([
+    {
+      name: 'addOpen',
+      default: false,
+      value: addOpen,
+      setter: setAddOpen
+    },
+    {
+      name: 'guild',
+      default: '',
+      value: openedGuildId,
+      setter: setOpenedGuildId
+    },
+    {
+      name: 'search',
+      default: '',
+      value: searchText,
+      setter: setSearchText
+    }
+  ]);
+
+  const handleOpen = () => setAddOpen(true);
+
+  const handleClose = () => setAddOpen(false);
+
+  const isAdmin = userProfile?.role?.includes('ADMIN');
+
   return (
     <Root>
       <div className="guild-search">
@@ -49,7 +82,33 @@ const GuildResults = () => {
             setSearchText(e.target.value);
           }}
         />
-        <GuildsActions />
+        <div className="guild-actions">
+          {isAdmin && (
+            <>
+              <Button startIcon={<GroupIcon />} onClick={handleOpen}>
+                Add Guild
+              </Button>
+              <AddGuildModal
+                open={addOpen}
+                onClose={handleClose}
+                onSave={async guild => {
+                  if (csrf) {
+                    let res = await createGuild(guild, csrf);
+                    let data =
+                      res.payload && res.payload.data && !res.error
+                        ? res.payload.data
+                        : null;
+                    if (data) {
+                      dispatch({ type: ADD_GUILD, payload: data });
+                    }
+                    handleClose();
+                  }
+                }}
+                headerText="Add A New Guild"
+              />
+            </>
+          )}
+        </div>
       </div>
       <div className="guilds">
         {guilds?.length
@@ -59,6 +118,8 @@ const GuildResults = () => {
                   key={`guild-summary-${guild.id}`}
                   index={index}
                   guild={guild}
+                  isOpen={guild.id === openedGuildId}
+                  onGuildSelect={setOpenedGuildId}
                 />
               ) : null
             )

web-ui/src/components/guild-results/GuildSummaryCard.jsx

@@ -57,10 +57,10 @@ const propTypes = {
 
 const displayName = 'GuildSummaryCard';
 
-const GuildSummaryCard = ({ guild, index }) => {
+const GuildSummaryCard = ({ guild, index, isOpen, onGuildSelect }) => {
   const { state, dispatch } = useContext(AppContext);
   const { guilds, userProfile, csrf } = state;
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(isOpen);
   const [openDelete, setOpenDelete] = useState(false);
   const [tooltipIsOpen, setTooltipIsOpen] = useState(false);
   const isAdmin =
@@ -80,8 +80,14 @@ const GuildSummaryCard = ({ guild, index }) => {
       ? false
       : leads.some(lead => lead.memberId === userProfile.memberProfile.id);
 
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const handleOpen = () => {
+    setOpen(true);
+    onGuildSelect(guild.id);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    onGuildSelect('');
+  };
 
   const handleOpenDeleteConfirmation = () => setOpenDelete(true);
   const handleCloseDeleteConfirmation = () => setOpenDelete(false);