Social groups UI

docs/contribution-guide.md

@@ -22,6 +22,20 @@ All displayed text must support translation - for this we use `react-intl`. Tran
 
 If you want to help translate the project, that is very much appreciated and needed, but please don't do it by manually editing files in `/locale`. Your changes will wind up getting overwritten by Lokalise.
 
+## Lodash 
+
+We frequently use a utility library called [lodash](https://lodash.com/docs/). When importing a utility function, be sure to use named imports rather than importing the entire library to reduce our bundle size. One incorrect import will cause the entire library to be bundled with the application.
+
+```
+import _ from 'lodash-es'; // incorrect, please don't do this
+_.random(10);
+
+import { random } from 'lodash-es'; // correct!
+random(10);
+```
+
+In situations where a lodash utility and a native utility exist, we should use the native utility unless there is a reason to use lodash (eg. `Array.map()` instead of `_.map()`).
+
 ## Conventions
 
 - Any file with a React component should have the suffix `.jsx`

locale/en.json

@@ -7,18 +7,27 @@
   "COMMUNITY_FORUMS": "Community forums",
   "ENCOUNTERS": "Encounters",
   "ADD_NEW": "Add new",
+  "ADD_SOCIAL_GROUP": "Add social group",
+  "EDIT_SOCIAL_GROUP": "Edit social group",
+  "SOCIAL_GROUP_SUBHEADER": "Social group created on {dateCreated}",
+  "ALL_SOCIAL_GROUPS": "All social groups",
   "BULK_IMPORT": "Bulk import",
   "LIME": "Lime",
   "LABEL": "Label",
   "TYPE": "Type",
   "FOREST": "Forest",
+  "NAME_OF_GROUP": "Name of group",
   "STAGE": "Stage",
   "NO_PENDING_PUBLIC_SIGHTINGS": "There are no pending public sightings",
   "DATA_UNAVAILABLE": "Data unavailable",
   "DATA_MANAGER": "Data Manager",
   "ANNOTATION_CLASS": "Annotation class",
   "INDIVIDUAL_METADATA": "Individual profile",
   "COMMIT": "Commit",
+  "UNNAMED_SOCIAL_GROUP": "Unnamed social group",
+  "SOCIAL_GROUP_NOT_FOUND": "Social group not found",
+  "SOCIAL_GROUP_NOT_FOUND_DESCRIPTION": "Social group lookup failed. There may be a problem with the URL or the social group may no longer exist.",
+  "SOCIAL_GROUP_DELETE_CONFIRMATION": "Are you sure you want to delete this social group? This action cannot be undone.",
   "REGION_MATCHING_SET_DESCRIPTION": "Select the region you would like to match against. Sub-regions will be included in the matching set. If no region is selected, all regions will be matched against.",
   "CREATED": "Created",
   "BLANK": " ",
@@ -187,7 +196,7 @@
   "FIRST_NAME": "First name",
   "ADOPTION_NAME": "Adoption name",
   "ALIAS": "Alias",
-  "SETTINGS_AND_PRIVACY": "My settings & privacy",
+  "PREFERENCES": "Preferences",
   "SEARCH_ITIS_SPECIES": "Search ITIS species",
   "SEARCH_INDIVIDUALS_INSTRUCTION": "Search for an individual by name or guid",
   "SEARCH_SIGHTINGS_INSTRUCTION": "Search for a sighting by location, owner or guid",
@@ -1066,12 +1075,15 @@
   "BLOCK_MERGE": "Block",
   "SELECT_RELATIONSHIP_TYPE": "Select relationship type",
   "SELECT_RELATIONSHIP_ROLE": "Select role from {ind}'s perspective",
-  "NO_RELATIONSHIPS": "This individual currently has no known relationships",
+  "NO_RELATIONSHIPS": "This individual does not have any relationships.",
+  "NO_SOCIAL_GROUPS_ON_INDIVIDUAL": "This individual is not part of any social groups.",
+  "NO_SOCIAL_GROUPS_ON_SITE": "There are no social groups on this site.",
   "NO_PERMISSIONS_ERROR_SUBTITLE": "Permissions error",
   "NOT_AUTHENTICATED_ERROR_SUBTITLE": "Authentication error",
   "NO_PERMISSIONS_ERROR_DETAILS": "You do not have permissions to access the requested resource.",
   "NOT_AUTHENTICATED_ERROR_DETAILS": "Your request could not be processed due to an authentication error. Log in and try again.",
   "CONFIRM_REMOVE_RELATIONSHIP": "Are you sure you want to delete this relationship?",
+  "CONFIRM_REMOVE_INDIVIDUAL_FROM_SOCIAL_GROUP": "Are you sure you want to remove this individual from this social group?",
   "TWITTER_HANDLE": "Twitter handle",
   "CONFIGURATION_INTELLIGENT_AGENT_TWITTERBOT_ENABLED_LABEL": "Allow Twitter submissions?",
   "CONFIGURATION_INTELLIGENT_AGENT_TWITTERBOT_ENABLED_DESCRIPTION": "Any Twitter user will be able to create submissions to this platform via tweet. Platform users can add their Twitter handle on their user profile to maintain ownership of the sightings. Otherwise, the data will be public. Make sure that the bio of the platform twitter account reminds users to include image(s), a hashtag of the species, region/location id, and time/date.",
@@ -1100,10 +1112,12 @@
   "PASSWORD_RESET_SUCCESS": "Password reset success",
   "RETURN_TO_LOGIN_PAGE": "Return to login page",
   "RESTORE": "Restore",
+  "NO_INDIVIDUALS_IN_SOCIAL_GROUP": "This group contains no individuals.",
   "COLLABORATION_RESTORE_SUCCESS": "Successfully restored the collaboration",
   "COLLABORATION_RESTORE_ERROR": "Error restoring the collaboration",
   "COLLAB_RESTORE_ERROR_SUPPLEMENTAL": "Collaboration was not successfully restored.",
   "PENDING": "pending",
+  "UNKNOWN_ROLE": "Unknown role",
   "PENDING_CITIZEN_SCIENCE_SIGHTINGS": "Pending citizen science sightings",
   "CANDIDATE_ANNOTATIONS": "Candidate annotations",
   "SIGHTING_DELETE_VULNERABLE_INDIVIDUAL_MESSAGE": "Deleting this sighting would result in assigned individuals being deleted. Are you sure you want to continue?",
@@ -1115,7 +1129,9 @@
   "PAGINATION_PREVIOUS_PAGE": "previous page",
   "PAGINATION_NEXT_PAGE": "next page",
   "SOCIAL_GROUPS": "Social groups",
-  "CONFIGURATION_SOCIAL_GROUP_ROLES_DESCRIPTION": "These roles populate the dropdown menu for any social groups made. It is recommended to include a generic role, such as, \"Member\"",
+  "SOCIAL_GROUP": "Social group",
+  "ADD_TO_SOCIAL_GROUP": "Add to social group",
+  "CONFIGURATION_SOCIAL_GROUP_ROLES_DESCRIPTION": "These roles populate the dropdown menu for any social groups made. It is recommended to include a generic role, such as \"Member\".",
   "CONFIGURATION_SOCIAL_GROUP_ROLES_LABEL": "Social group roles",
   "NEW_SOCIAL_GROUP_ROLE": "Add role",
   "ALLOW_MULTIPLE_OF_THIS_ROLE": "Allow multiple of this role",

src/AuthenticatedSwitch.jsx

@@ -19,6 +19,8 @@ import Individual from './pages/individual/Individual';
 import Sighting from './pages/sighting/Sighting';
 import AssetGroupSighting from './pages/sighting/AssetGroupSighting';
 import Splash from './pages/splash/Splash';
+import SocialGroups from './pages/socialGroups/SocialGroups';
+import SocialGroup from './pages/socialGroups/SocialGroup';
 import AssetGroup from './pages/assetGroup/AssetGroup';
 import PendingCitizenScienceSightings from './pages/pendingCitizenScienceSightings/PendingCitizenScienceSightings';
 import User from './pages/user/User';
@@ -39,7 +41,7 @@ import AuditLog from './pages/devTools/AuditLog';
 import Welcome from './pages/auth/Welcome';
 import EmailVerified from './pages/auth/EmailVerified';
 import Home from './pages/home/Home';
-import Settings from './pages/settings/Settings';
+import Preferences from './pages/preferences/Preferences';
 import ResendVerificationEmail from './pages/auth/ResendVerificationEmail';
 import Footer from './components/Footer';
 import { defaultCrossfadeDuration } from './constants/defaults';
@@ -94,36 +96,42 @@ export default function AuthenticatedSwitch({
                     <SiteSetup />
                   ) : (
                     <Switch location={location}>
-                      <Route path="/admin/front-page" exact>
+                      <Route path="/settings/front-page" exact>
                         <SplashSettings />
                       </Route>
-                      <Route path="/admin/front-page/preview">
+                      <Route path="/settings/front-page/preview">
                         <Splash />
                       </Route>
-                      <Route path="/admin/status">
+                      <Route path="/settings/status">
                         <SiteStatus />
                       </Route>
-                      <Route path="/admin/users">
+                      <Route path="/settings/users">
                         <UserManagement />
                       </Route>
-                      <Route path="/admin/actions">
+                      <Route path="/settings/actions">
                         <AdminActions />
                       </Route>
-                      <Route path="/admin/fields/save-custom-field/:type?/:id?">
+                      <Route path="/settings/fields/save-custom-field/:type?/:id?">
                         <SaveCustomField />
                       </Route>
-                      <Route path="/admin/fields">
+                      <Route path="/settings/fields">
                         <FieldManagement />
                       </Route>
-                      <Route path="/admin/settings">
+                      <Route path="/settings/general">
                         <GeneralSettings />
                       </Route>
-                      <Route path="/email_verified">
-                        <EmailVerified />
+                      <Route path="/settings/social-groups">
+                        <SocialGroups />
                       </Route>
-                      <Route path="/admin">
+                      <Route path="/settings/preferences">
+                        <Preferences />
+                      </Route>
+                      <Route path="/settings">
                         <ControlPanel />
                       </Route>
+                      <Route path="/email_verified">
+                        <EmailVerified />
+                      </Route>
                       <Route path="/create-individual">
                         <CreateIndividual />
                       </Route>
@@ -172,8 +180,8 @@ export default function AuthenticatedSwitch({
                       <Route path="/users">
                         <Users />
                       </Route>
-                      <Route path="/settings">
-                        <Settings />
+                      <Route path="/social-groups/:guid">
+                        <SocialGroup />
                       </Route>
                       <Route path="/bulk-import/success/:id">
                         <BulkImportSuccess />

src/components/AuthenticatedAppHeader/ActionsPane.jsx

@@ -7,7 +7,6 @@ import Popover from '@material-ui/core/Popover';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Divider from '@material-ui/core/Divider';
-import SettingsIcon from '@material-ui/icons/Settings';
 import PublicIcon from '@material-ui/icons/SupervisedUserCircle';
 import ControlPanelIcon from '@material-ui/icons/PermDataSetting';
 import BulkImportIcon from '@material-ui/icons/PostAdd';
@@ -32,17 +31,9 @@ const actions = [
     messageId: 'PENDING_CITIZEN_SCIENCE_SIGHTINGS',
     icon: PublicIcon,
   },
-  {
-    id: 'settings',
-    href: '/settings',
-    messageId: 'SETTINGS_AND_PRIVACY',
-    icon: SettingsIcon,
-  },
   {
     id: 'control-panel',
-    href: '/admin',
-    permissionsTest: userData =>
-      userData?.is_admin || userData?.is_user_manager,
+    href: '/settings',
     messageId: 'CONTROL_PANEL',
     icon: ControlPanelIcon,
   },

src/components/SettingsBreadcrumbs.jsx

@@ -23,7 +23,7 @@ export default function SettingsBreadcrumbs({
       <Link href="/" style={linkStyles}>
         <Text id="HOME" />
       </Link>
-      <Link href="/admin" style={linkStyles}>
+      <Link href="/settings" style={linkStyles}>
         <Text id="CONTROL_PANEL" />
       </Link>
       <Text id={currentPageTextId}>{currentPageText}</Text>

src/components/cards/CollaborationsCard.jsx

@@ -15,22 +15,18 @@ export default function CollaborationsCard({
   htmlId = null,
 }) {
   const intl = useIntl();
-  const [activeCollaboration, setActiveCollaboration] = useState(
-    null,
-  );
+  const [activeCollaboration, setActiveCollaboration] =
+    useState(null);
   const [
     collabDialogButtonClickLoading,
     setCollabDialogButtonClickLoading,
   ] = useState(false);
 
   const { data, loading } = useGetMe();
 
-  useEffect(
-    () => {
-      setCollabDialogButtonClickLoading(false);
-    },
-    [data],
-  );
+  useEffect(() => {
+    setCollabDialogButtonClickLoading(false);
+  }, [data]);
 
   const collaborations = get(data, ['collaborations'], []);
   const tableData = collaborations.map(collaboration => {

src/components/cards/EncountersCard.jsx

@@ -34,23 +34,20 @@ export default function EncountersCard({
   const mapModeClicked = () => setShowMapView(true);
   const listModeClicked = () => setShowMapView(false);
 
-  const encountersWithLocationData = useMemo(
-    () => {
-      // hotfix //
-      if (!encounters) return [];
-      // hotfix //
+  const encountersWithLocationData = useMemo(() => {
+    // hotfix //
+    if (!encounters) return [];
+    // hotfix //
 
-      return encounters.map(encounter => ({
-        ...encounter,
-        formattedLocation: formatLocationFromSighting(
-          encounter,
-          regionOptions,
-          intl,
-        ),
-      }));
-    },
-    [get(encounters, 'length')],
-  );
+    return encounters.map(encounter => ({
+      ...encounter,
+      formattedLocation: formatLocationFromSighting(
+        encounter,
+        regionOptions,
+        intl,
+      ),
+    }));
+  }, [get(encounters, 'length')]);
 
   const tooFewEncounters = encounters.length <= 1;
 

src/components/cards/RelationshipsCard.jsx

@@ -98,7 +98,7 @@ export default function RelationshipsCard({
   relationships = [],
   individualGuid,
   loading,
-  noDataMessage = 'NO_RELATIONSHIPS',
+  noDataMessageId = 'NO_RELATIONSHIPS',
   title,
   titleId,
 }) {
@@ -359,7 +359,7 @@ export default function RelationshipsCard({
       {noRelationships && (
         <Text
           variant="body2"
-          id={noDataMessage}
+          id={noDataMessageId}
           style={{ marginTop: 12 }}
         />
       )}

src/components/cards/SightingsCard.jsx

@@ -33,23 +33,20 @@ export default function SightingsCard({
   const mapModeClicked = () => setShowMapView(true);
   const listModeClicked = () => setShowMapView(false);
 
-  const sightingsWithLocationData = useMemo(
-    () => {
-      // hotfix //
-      if (!sightings) return [];
-      // hotfix //
+  const sightingsWithLocationData = useMemo(() => {
+    // hotfix //
+    if (!sightings) return [];
+    // hotfix //
 
-      return sightings.map(sighting => ({
-        ...sighting,
-        formattedLocation: formatLocationFromSighting(
-          sighting,
-          regionOptions,
-          intl,
-        ),
-      }));
-    },
-    [get(sightings, 'length')],
-  );
+    return sightings.map(sighting => ({
+      ...sighting,
+      formattedLocation: formatLocationFromSighting(
+        sighting,
+        regionOptions,
+        intl,
+      ),
+    }));
+  }, [get(sightings, 'length')]);
 
   const allColumns = [
     {