Merge pull request guardian#4321 from bbc/t1834-myUploads-bugs

fixing myUploads bugs

kahuna/public/js/components/gr-my-uploads/gr-my-uploads.tsx

@@ -1,30 +1,56 @@
 import * as React from "react";
 import * as angular from "angular";
 import { react2angular } from "react2angular";
-import { useState, KeyboardEvent } from "react";
+import { useState, useEffect, KeyboardEvent } from "react";
 
 import "./gr-my-uploads.css";
 
 const MY_UPLOADS = "My uploads";
 const MY_UPLOADS_SHORT = "My uploads";
 
 export interface MyUploadsProps {
+  myUploads: boolean,
   onChange: (selected: boolean) => void;
 }
 
 export interface MyUploadsWrapperProps {
   props: MyUploadsProps;
 }
 
+//-- logo click event --
+interface LogoClickEventDetail { showPaid: boolean }
+interface LogoClickEvent extends CustomEvent<LogoClickEventDetail> {optional?: string}
+
+//-- filter change event --
+interface Filter { uploadedByMe: boolean }
+interface FilterChangeEventDetail { filter: Filter }
+interface FilterChangeEvent extends CustomEvent<FilterChangeEventDetail> {optional?: string}
+
+//-- uploadedBy check event --
+interface UploadedByEventDetail { userEmail: string, uploadedBy: string }
+interface UploadedByEvent extends CustomEvent<UploadedByEventDetail> {optional?: string}
+
+//-- payable images event --
+interface PayableImagesEventDetail { showPaid: boolean }
+
+//-- main control --
 const MyUploads: React.FC<MyUploadsWrapperProps> = ({ props }) => {
 
-  const [myUploads, setMyUploads] = useState(false);
+  const [myUploads, setMyUploads] = useState(props.myUploads);
 
   const handleCheckboxClick = () => {
     setMyUploads(prevChkd => {
       props.onChange(!prevChkd);
-      return !prevChkd;
+
+      //-- raise payable images event --
+      const event = new CustomEvent<PayableImagesEventDetail>('setPayableImages', {
+        detail: { showPaid: !prevChkd },
+        bubbles: true
       });
+      window.dispatchEvent(event);
+
+      return !prevChkd;
+    });
   };
 
   const handleKeyboard = (event:KeyboardEvent<HTMLDivElement>) => {
@@ -35,10 +61,34 @@ const MyUploads: React.FC<MyUploadsWrapperProps> = ({ props }) => {
     }
   };
 
+  const handleLogoClick = (event: LogoClickEvent) => {
+    setMyUploads(false);
+  };
+
+  const handleFilterChange = (event: FilterChangeEvent) => {
+    setMyUploads(event.detail.filter.uploadedByMe);
+  };
+
+  const handleUploadedBy =  (event: UploadedByEvent) => {
+    const matches: boolean = (event.detail.userEmail === event.detail.uploadedBy);
+    setMyUploads(matches);
+  };
+
+  useEffect(() => {
+    window.addEventListener('logoClick', handleLogoClick);
+    window.addEventListener('filterChangeEvent', handleFilterChange);
+    window.addEventListener('uploadedByEvent', handleUploadedBy);
+    return () => {
+      window.removeEventListener('logoClick', handleLogoClick);
+      window.removeEventListener('filterChangeEvent', handleFilterChange);
+      window.removeEventListener('uploadedByEvent', handleUploadedBy);
+    };
+  }, []);
+
   return (
     <div className="my-uploads-container" tabIndex={0} aria-label={MY_UPLOADS} onKeyDown={handleKeyboard}>
       <label className="custom-checkbox">
-        <input type="checkbox" checked={myUploads} onChange={handleCheckboxClick}/>
+        <input type="checkbox" checked={myUploads} onClick={handleCheckboxClick}/>
         <div className="label-wrapper" >
           <span className="custom-span"></span>
           <span className="custom-label no-select">{MY_UPLOADS}</span>

kahuna/public/js/components/gr-permissions-filter/gr-permissions-filter.tsx

@@ -63,6 +63,10 @@ const hasClassInSelfOrParent = (node: Element | null, className: string): boolea
   return false;
 };
 
+//-- payable images event (optional param to avoid CI check issues) --
+interface PayableImagesEventDetail { showPaid: boolean }
+interface PayableImagesEvent extends CustomEvent<PayableImagesEventDetail> {optional?: string}
+
 //-- query change event - adding optional param to avoid CI/CD check issue!--
 interface QueryChangeEventDetail { query: string, showPaid: boolean }
 interface QueryChangeEvent extends CustomEvent<QueryChangeEventDetail> {optional?: string}
@@ -98,7 +102,11 @@ const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
     setIsChargeable(event.detail.showPaid);
   };
 
-  const handleQueryChange = (event: QueryChangeEvent ) => {
+  const handleSetPayableImages = (event: PayableImagesEvent) => {
+    setIsChargeable(event.detail.showPaid);
+  };
+
+  const handleQueryChange = (event: QueryChangeEvent) => {
     const newQuery = event.detail.query ? (" " + event.detail.query) : "";
 
     if (propsRef.current.query !== newQuery) {
@@ -122,6 +130,7 @@ const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
   useEffect(() => {
     window.addEventListener('queryChangeEvent', handleQueryChange);
     window.addEventListener('logoClick', handleLogoClick);
+    window.addEventListener('setPayableImages', handleSetPayableImages);
     window.addEventListener('mouseup', autoHideListener);
     window.addEventListener('scroll', autoHideListener);
     window.addEventListener('keydown', autoHideListener);
@@ -132,9 +141,10 @@ const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
       setCurrentIndex(-1);
       window.removeEventListener('queryChangeEvent', handleQueryChange);
       window.removeEventListener('logoClick', handleLogoClick);
-      window.removeEventListener("mouseup", autoHideListener);
-      window.removeEventListener("scroll", autoHideListener);
-      window.removeEventListener("keydown", autoHideListener);
+      window.removeEventListener('setPayableImages', handleSetPayableImages);
+      window.removeEventListener('mouseup', autoHideListener);
+      window.removeEventListener('scroll', autoHideListener);
+      window.removeEventListener('keydown', autoHideListener);
     };
   }, []);
 
@@ -223,13 +233,13 @@ const PermissionsFilter: React.FC<PermissionsWrapperProps> = ({ props }) => {
         <div className="ts-toggle-container" tabIndex={0} aria-label={SHOW_CHARGEABLE + " " + (isChargeable ? SELECTED : NOT_SELECTED)} onKeyDown={handleKeyToggle} onClick={handleToggle}>
           <div className="ts-toggle-label no-select">{SHOW_CHARGEABLE}</div>
           <label className="ts-toggle-switch">
-            <input type="checkbox" checked={isChargeable} onChange={handleToggle}/>
+            <input type="checkbox" checked={isChargeable} onClick={handleToggle}/>
             <span className="ts-slider"></span>
           </label>
         </div>
         <div className="ts-toggle-container-short" tabIndex={0} aria-label={SHOW_CHARGEABLE + " " + (isChargeable ? SELECTED : NOT_SELECTED)} onKeyDown={handleToggle}>
           <label className="chargeable-checkbox">
-            <input type="checkbox" checked={isChargeable} onChange={handleToggle}/>
+            <input type="checkbox" checked={isChargeable} onClick={handleToggle}/>
             <div className="chargeable-label-wrapper" >
               <span className="chargeable-span"></span>
               <span className="chargeable-label no-select">{SHOW_CHARGEABLE_SHORT}</span>