single image toggle in image guard

Author: bkdiehl

src/components/ImageGuard/ImageGuard.tsx

@@ -167,22 +167,83 @@ type ToggleProps = {
   children: ({ status }: { status: ToggleStatus }) => React.ReactElement;
 };
 
-// !important - don't remove this until we know we'll never need to toggle individual images
-// ImageGuard.ToggleImage = function ToggleImage({ children }: ToggleProps) {
-//   const { image } = useImageGuardContentContext();
-//   const showImage = useStore((state) => state.showingImages[image.id.toString()]);
-//   const toggleImage = useStore((state) => state.toggleImage);
+ImageGuard.ToggleImage = function ToggleImage({
+  position = 'top-left',
+  sx,
+  className,
+}: {
+  position?: 'static' | 'top-left' | 'top-right';
+  sx?: Sx;
+  className?: string;
+}) {
+  const currentUser = useCurrentUser();
+  const { isModerator, blurNsfw: toggleable } = currentUser ?? {};
+  const { connect } = useImageGuardContext();
+  const { image } = useImageGuardContentContext();
+  const showImage = useStore((state) => state.showingImages[image.id.toString()]);
+  const toggleImage = useStore((state) => state.toggleImage);
 
-//   if (!image.nsfw) return null;
+  const showToModerator = image.imageNsfw && isModerator;
 
-//   return (
-//     <ImageGuardPopover>
-//       {cloneElement(children({ status: showImage ? 'hide' : 'show' }), {
-//         onClick: () => toggleImage(image.id),
-//       })}
-//     </ImageGuardPopover>
-//   );
-// };
+  if (!image.nsfw && !showToModerator && !connect) return null;
+  const showing = showImage;
+
+  return (
+    <ImageGuardPopover>
+      <Badge
+        color="red"
+        variant="filled"
+        size="sm"
+        px={6}
+        sx={(theme) => ({
+          cursor: toggleable ? 'pointer' : undefined,
+          userSelect: 'none',
+          ...(position !== 'static'
+            ? {
+                position: 'absolute',
+                top: theme.spacing.xs,
+                left: position === 'top-left' ? theme.spacing.xs : undefined,
+                right: position === 'top-right' ? theme.spacing.xs : undefined,
+                zIndex: 10,
+              }
+            : {}),
+          ...(sx && sx instanceof Function ? sx(theme) : sx),
+        })}
+        className={className}
+        onClick={toggleable ? () => toggleImage(image.id) : undefined}
+      >
+        <Group spacing={5} noWrap>
+          <Text
+            weight="bold"
+            sx={{
+              whiteSpace: 'nowrap',
+
+              ...(toggleable
+                ? {
+                    borderRight: '1px solid rgba(0,0,0,.15)',
+                    boxShadow: '0 1px 0 1px rgba(255,255,255,.1)',
+                    paddingRight: 5,
+                  }
+                : {}),
+            }}
+            component="span"
+          >
+            18
+            <Box component="span" sx={{ marginLeft: 1 }}>
+              <IconPlus size={8} strokeWidth={5} />
+            </Box>
+          </Text>
+          {toggleable &&
+            (showing ? (
+              <IconEyeOff size={14} strokeWidth={2.5} />
+            ) : (
+              <IconEye size={14} strokeWidth={2.5} />
+            ))}
+        </Group>
+      </Badge>
+    </ImageGuardPopover>
+  );
+};
 
 // Old/dynamic version
 // ImageGuard.ToggleConnect = function ToggleConnect({ children }: ToggleProps) {

src/components/User/Username.tsx

@@ -1,4 +1,6 @@
 import { Badge, BadgeProps, Group, MantineSize, Text, TextProps } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { useFeatureFlags } from '~/providers/FeatureFlagsProvider';
 import { getRandom } from '~/utils/array-helpers';
 
@@ -28,14 +30,21 @@ const textBadgeProps: Record<SupportLevel, { textProps: TextProps; badgeProps: B
 export function Username({
   username,
   deletedAt,
-  supportLevel,
+  supportLevel: initialSupportLevel,
   size = 'sm',
   inherit = false,
 }: Props) {
   const features = useFeatureFlags();
+
+  // TODO justin: remove random once final support badge is implemented
+  // Briant made a change to `supportLevel` to fix ssr mismatches
+  const [supportLevel, setSupportLevel] = useState<SupportLevel>('common');
+  useEffect(() => {
+    setSupportLevel(features.memberBadges ? getRandom(levels) : 'common');
+  }, []); // eslint-disable-line
+
   if (deletedAt) return <Text size={size}>[deleted]</Text>;
 
-  supportLevel = features.memberBadges ? getRandom(levels) : 'common'; // TODO justin: remove random once final support badge is implemented
   const { textProps, badgeProps } = textBadgeProps[supportLevel];
 
   return (