Fix issue #11 - Report user photos

src/common/card/NitroCardHeaderView.tsx

@@ -5,13 +5,15 @@ import { Base, Column, ColumnProps, Flex } from '..';
 interface NitroCardHeaderViewProps extends ColumnProps
 {
     headerText: string;
+    isGalleryPhoto?: boolean;
     noCloseButton?: boolean;
+    onReportPhoto?: (event: MouseEvent) => void;
     onCloseClick: (event: MouseEvent) => void;
 }
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, noCloseButton = false, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -32,6 +34,11 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
         <Column center position="relative" classNames={ getClassNames } { ...rest }>
             <Flex fullWidth center>
                 <span className="nitro-card-header-text">{ headerText }</span>
+                { isGalleryPhoto &&
+                    <Base position="absolute" className="end-4 nitro-card-header-report-camera" onClick={ onReportPhoto }>
+                        <FontAwesomeIcon icon="flag" />
+                    </Base>
+                }
                 <Base position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                     <FontAwesomeIcon icon="times" />
                 </Base>

src/common/card/NitroCardView.scss

@@ -36,11 +36,34 @@ $nitro-card-tabs-height: 33px;
                     rgba(194, 48, 39, 1) 50%,
                     rgba(194, 48, 39, 1) 100%
                 );
-        
+
                 &:hover {
                     filter: brightness(1.2);
                 }
-        
+
+                &:active {
+                    filter: brightness(0.8);
+                }
+            }
+
+            .nitro-card-header-report-camera {
+                cursor: pointer;
+                padding: 1px 3px;
+                line-height: 1;
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
+
+                &:hover {
+                    filter: brightness(1.2);
+                }
+
                 &:active {
                     filter: brightness(0.8);
                 }
@@ -101,7 +124,7 @@ $nitro-card-tabs-height: 33px;
             width: 100%;
             margin: 0;
             padding-top:2px;
-            
+
             &:before {
                 position: absolute;
                 content: " ";
@@ -137,7 +160,32 @@ $nitro-card-tabs-height: 33px;
                 &:hover {
                     filter: brightness(1.2);
                 }
-        
+
+                &:active {
+                    filter: brightness(0.8);
+                }
+            }
+
+            .nitro-card-header-report-camera {
+                cursor: pointer;
+                padding: 0px 2px;
+                margin-right: 4px;
+                line-height: 1;
+                @include font-size($h7-font-size);
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
+
+                &:hover {
+                    filter: brightness(1.2);
+                }
+
                 &:active {
                     filter: brightness(0.8);
                 }

src/components/help/views/ReportSummaryView.tsx

@@ -1,6 +1,6 @@
-import { CallForHelpFromForumMessageMessageComposer, CallForHelpFromForumThreadMessageComposer, CallForHelpFromIMMessageComposer, CallForHelpFromPhotoMessageComposer, CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
+import { CallForHelpFromForumMessageMessageComposer, CallForHelpFromForumThreadMessageComposer, CallForHelpFromIMMessageComposer, CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { GetSessionDataManager, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
+import { LocalizeText, ReportType, SendMessageComposer } from '../../../api';
 import { Button, Column, Text } from '../../../common';
 import { useHelp } from '../../../hooks';
 
@@ -16,7 +16,8 @@ export const ReportSummaryView: FC<{}> = props =>
         {
             case ReportType.BULLY:
             case ReportType.EMERGENCY:
-            case ReportType.ROOM: {
+            case ReportType.ROOM:
+            case ReportType.PHOTO: {
                 const reportedRoomId = ((activeReport.roomId <= 0) ? activeReport.reportedChats[0].roomId : activeReport.roomId);
 
                 activeReport.reportedChats.forEach(entry => chats.push(entry.webId, entry.message));
@@ -35,9 +36,6 @@ export const ReportSummaryView: FC<{}> = props =>
             case ReportType.MESSAGE:
                 SendMessageComposer(new CallForHelpFromForumMessageMessageComposer(activeReport.groupId, activeReport.threadId, activeReport.messageId, activeReport.cfhTopic, activeReport.message));
                 break;
-            case ReportType.PHOTO:
-                SendMessageComposer(new CallForHelpFromPhotoMessageComposer(activeReport.extraData, activeReport.cfhTopic, activeReport.roomId, GetSessionDataManager().userId, activeReport.roomObjectId));
-                break;
         }
 
         setActiveReport(null);

src/components/room/widgets/furniture/FurnitureExternalImageView.tsx

@@ -1,17 +1,20 @@
+import { GetSessionDataManager, ReportType } from 'api';
 import { FC } from 'react';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
-import { useFurnitureExternalImageWidget } from '../../../../hooks';
+import { useFurnitureExternalImageWidget, useHelp, useNavigator } from '../../../../hooks';
 import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView';
 
 export const FurnitureExternalImageView: FC<{}> = props =>
 {
     const { objectId = -1, currentPhotoIndex = -1, currentPhotos = null, onClose = null } = useFurnitureExternalImageWidget();
+    const { navigatorData = null } = useNavigator();
+    const { report = null } = useHelp();
 
     if((objectId === -1) || (currentPhotoIndex === -1)) return null;
 
     return (
         <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
-            <NitroCardHeaderView headerText="" onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText="" isGalleryPhoto={ true } onReportPhoto={ () => report(ReportType.PHOTO, { reportedUserId: GetSessionDataManager().userId, roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName }) } onCloseClick={ onClose } />
             <NitroCardContentView>
                 <CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
             </NitroCardContentView>

src/hooks/help/useHelp.ts

@@ -39,6 +39,7 @@ const useHelpState = () =>
                 newReport.currentStep = ReportState.SELECT_CHATS;
                 break;
             case ReportType.ROOM:
+            case ReportType.PHOTO:
                 newReport.roomId = options.roomId;
                 newReport.roomName = options.roomName;
                 newReport.currentStep = ReportState.SELECT_TOPICS;
@@ -54,8 +55,6 @@ const useHelpState = () =>
                 newReport.messageId = options.messageId;
                 newReport.currentStep = ReportState.SELECT_TOPICS;
                 break;
-            case ReportType.PHOTO:
-                break;
             case ReportType.GUIDE:
                 break;
         }