From 20f29d9df62a4af34a9b07e473851dd91dbf8d7b Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Thu, 29 Jul 2021 20:32:30 +0200
Subject: [PATCH] fix lint errors fix clickability of threedotsicon

---
 src/elements/Preview/Preview.tsx              | 36 +++++++++++-----
 .../QuickActionPop/QuickActionPop.tsx         | 20 +++++----
 src/elements/Tag/Tag.tsx                      | 14 +++++--
 src/pages/Player/Player.tsx                   | 42 ++++++++++---------
 4 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/elements/Preview/Preview.tsx b/src/elements/Preview/Preview.tsx
index 8316e5d..3b3ffc8 100644
--- a/src/elements/Preview/Preview.tsx
+++ b/src/elements/Preview/Preview.tsx
@@ -6,9 +6,7 @@ import GlobalInfos from '../../utils/GlobalInfos';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faPhotoVideo} from '@fortawesome/free-solid-svg-icons';
 import {faEllipsisV} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import QuickActionPop from '../QuickActionPop/QuickActionPop';
-import {APINode, callAPIPlain} from '../../utils/Api';
+import QuickActionPop, {ContextItem} from '../QuickActionPop/QuickActionPop';
 
 interface PreviewProps {
     name: string;
@@ -62,11 +60,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
             <div
                 className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}
                 onClick={this.props.onClick}>
-                <div className={style.quickactions} onClick={(): void => this.setState({optionsvisible: true})}>
-                    <FontAwesomeIcon style={{
-                        verticalAlign: 'middle',
-                        fontSize: '25px'
-                    }} icon={faEllipsisV} size='1x'/>
+                <div
+                    className={style.quickactions}
+                    onClick={(e): void => {
+                        this.setState({optionsvisible: true});
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }}>
+                    <FontAwesomeIcon
+                        style={{
+                            verticalAlign: 'middle',
+                            fontSize: '25px'
+                        }}
+                        icon={faEllipsisV}
+                        size='1x'
+                    />
                 </div>
                 {this.popupvisible()}
                 <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
@@ -94,10 +102,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
     }
 
     popupvisible(): JSX.Element {
-        if (this.state.optionsvisible)
-            return (<QuickActionPop position={{x: 50, y: 50}} onHide={(): void => this.setState({optionsvisible: false})}>heeyyho</QuickActionPop>);
-        else
+        if (this.state.optionsvisible) {
+            return (
+                <QuickActionPop position={{x: 350, y: 45}} onHide={(): void => this.setState({optionsvisible: false})}>
+                    <ContextItem title='Delete' onClick={(): void => {}} />
+                    <ContextItem title='Delete' onClick={(): void => {}} />
+                </QuickActionPop>
+            );
+        } else {
             return <></>;
+        }
     }
 }
 
diff --git a/src/elements/QuickActionPop/QuickActionPop.tsx b/src/elements/QuickActionPop/QuickActionPop.tsx
index 659f9ff..8f47c9c 100644
--- a/src/elements/QuickActionPop/QuickActionPop.tsx
+++ b/src/elements/QuickActionPop/QuickActionPop.tsx
@@ -3,10 +3,10 @@ import style from './QuickActionPopup.module.css';
 
 interface props {
     position: {
-        x: number,
-        y: number
-    },
-    onHide: () => void
+        x: number;
+        y: number;
+    };
+    onHide: () => void;
 }
 
 class QuickActionPop extends React.Component<props> {
@@ -20,7 +20,6 @@ class QuickActionPop extends React.Component<props> {
         this.handleClickOutside = this.handleClickOutside.bind(this);
     }
 
-
     componentDidMount(): void {
         document.addEventListener('mousedown', this.handleClickOutside);
     }
@@ -49,11 +48,18 @@ class QuickActionPop extends React.Component<props> {
 
 interface Itemprops {
     title: string;
-    onClick: () => void
+    onClick: () => void;
 }
 
 export const ContextItem = (props: Itemprops): JSX.Element => (
-    <div onClick={props.onClick} className={style.ContextItem}>{props.title}</div>
+    <div
+        onClick={(e): void => {
+            e.preventDefault();
+            props.onClick();
+        }}
+        className={style.ContextItem}>
+        {props.title}
+    </div>
 );
 
 export default QuickActionPop;
diff --git a/src/elements/Tag/Tag.tsx b/src/elements/Tag/Tag.tsx
index a1023e7..6e67f5b 100644
--- a/src/elements/Tag/Tag.tsx
+++ b/src/elements/Tag/Tag.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {SyntheticEvent, PointerEvent} from 'react';
 
 import styles from './Tag.module.css';
 import {Link} from 'react-router-dom';
@@ -7,7 +7,7 @@ import {TagType} from '../../types/VideoTypes';
 interface props {
     onclick?: (_: string) => void;
     tagInfo: TagType;
-    onContextMenu?: (pos: {x: number, y: number}) => void;
+    onContextMenu?: (pos: {x: number; y: number}) => void;
 }
 
 interface state {
@@ -38,7 +38,11 @@ class Tag extends React.Component<props, state> {
 
     renderButton(): JSX.Element {
         return (
-            <button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag' onContextMenu={this.contextmenu}>
+            <button
+                className={styles.tagbtn}
+                onClick={(): void => this.TagClick()}
+                data-testid='Test-Tag'
+                onContextMenu={this.contextmenu}>
                 {this.props.tagInfo.TagName}
             </button>
         );
@@ -61,7 +65,9 @@ class Tag extends React.Component<props, state> {
      * @private
      */
     private contextmenu(e: SyntheticEvent): void {
-        if (!this.props.onContextMenu) return;
+        if (!this.props.onContextMenu) {
+            return;
+        }
 
         const event = e as unknown as PointerEvent;
         event.preventDefault();
diff --git a/src/pages/Player/Player.tsx b/src/pages/Player/Player.tsx
index 56f064a..c74e7e9 100644
--- a/src/pages/Player/Player.tsx
+++ b/src/pages/Player/Player.tsx
@@ -20,7 +20,6 @@ import {ActorType, TagType} from '../../types/VideoTypes';
 import PlyrJS from 'plyr';
 import {Button} from '../../elements/GPElements/Button';
 import {VideoTypes} from '../../types/ApiTypes';
-import GlobalInfos from "../../utils/GlobalInfos";
 import QuickActionPop, {ContextItem} from '../../elements/QuickActionPop/QuickActionPop';
 import GlobalInfos from '../../utils/GlobalInfos';
 
@@ -140,10 +139,14 @@ export class Player extends React.Component<Props, mystate> {
                 <Line />
                 <SideBarTitle>Tags:</SideBarTitle>
                 {this.state.tags.map((m: TagType) => (
-                    <Tag key={m.TagId} tagInfo={m} onContextMenu={(pos): void => {
-                        this.setState({tagContextMenu: true});
-                        this.contextpos = {...pos, tagid: m.TagId};
-                    }}/>
+                    <Tag
+                        key={m.TagId}
+                        tagInfo={m}
+                        onContextMenu={(pos): void => {
+                            this.setState({tagContextMenu: true});
+                            this.contextpos = {...pos, tagid: m.TagId};
+                        }}
+                    />
                 ))}
                 <Line />
                 <SideBarTitle>Tag Quickadd:</SideBarTitle>
@@ -305,7 +308,6 @@ export class Player extends React.Component<Props, mystate> {
         );
     }
 
-
     /**
      * click handler for the like btn
      */
@@ -374,10 +376,10 @@ export class Player extends React.Component<Props, mystate> {
     private renderContextMenu(): JSX.Element {
         if (this.state.tagContextMenu) {
             return (
-                <QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})}
-                                position={this.contextpos}>
-                    <ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)}/>
-                </QuickActionPop>);
+                <QuickActionPop onHide={(): void => this.setState({tagContextMenu: false})} position={this.contextpos}>
+                    <ContextItem title='Delete' onClick={(): void => this.deleteTag(this.contextpos.tagid)} />
+                </QuickActionPop>
+            );
         } else {
             return <></>;
         }
@@ -387,19 +389,21 @@ export class Player extends React.Component<Props, mystate> {
      * delete a tag from the current video
      */
     private deleteTag(tag_id: number): void {
-        callAPI<GeneralSuccess>(APINode.Tags,
+        callAPI<GeneralSuccess>(
+            APINode.Tags,
             {action: 'deleteVideoTag', video_id: this.props.match.params.id, tag_id: tag_id},
             (res) => {
                 if (res.result !== 'success') {
-                    console.log("deletion errored!");
+                    console.log('deletion errored!');
 
                     this.setState({tagContextMenu: false});
-                }else{
+                } else {
                     // check if tag has already been added
-                    const tagIndex = this.state.tags.map(function (e: TagType) {
-                        return e.TagId;
-                    }).indexOf(tag_id);
-
+                    const tagIndex = this.state.tags
+                        .map(function (e: TagType) {
+                            return e.TagId;
+                        })
+                        .indexOf(tag_id);
 
                     // delete tag from array
                     const newTagArray = this.state.tags;
@@ -407,9 +411,9 @@ export class Player extends React.Component<Props, mystate> {
 
                     this.setState({tags: newTagArray, tagContextMenu: false});
                 }
-            });
+            }
+        );
     }
 }
 
 export default withRouter(Player);
-