Implement delete goal functionality (#105)

src/components/Input.tsx

@@ -1,12 +1,12 @@
-interface InputProps {
+interface Props {
   label: string;
   placeholder: string;
   value?: number | string;
   onInput: (event: string) => void;
   onEnterKeyDown: () => void;
 }
 
-function Input({label, placeholder, value, onInput, onEnterKeyDown}: InputProps) {
+function Input({label, placeholder, value, onInput, onEnterKeyDown}: Props) {
   return (
     <div className="w-100">
       <label className="form-label text-muted">{label}</label>

src/components/Video.tsx

@@ -9,7 +9,12 @@ const CLICKED_BUTTON_TEXT = 'Link Copied';
 const CLOUDFRONT_BASE_URL = 'https://s3-redditsoccergoals.top90.io/';
 const REDDIT_COMMENTS_BASE_URL = 'https://www.reddit.com/r/soccer/comments/';
 
-function Video({goal}: {goal: Goal}) {
+interface Props {
+  goal: Goal;
+  onDelete?: () => void;
+}
+
+function Video({goal, onDelete}: Props) {
   const [loggedIn, setLoggedIn] = useState(false);
   const [buttonText, setButtonText] = useState(DEFAULT_BUTTON_TEXT);
   const [timer, setTimer] = useState<ReturnType<typeof setTimeout>>();
@@ -88,7 +93,9 @@ function Video({goal}: {goal: Goal}) {
           </a>
           {loggedIn && (
             <button
-              onClick={() => {}}
+              onClick={() => {
+                onDelete && onDelete();
+              }}
               disabled={disableButton}
               className="btn btn-outline-danger btn-sm border-0"
             >

src/lib/api/goals.ts

@@ -40,6 +40,10 @@ export interface GetGoalResponse {
   goal: Goal;
 }
 
+export interface DeleteGoalResponse {
+  rowsAffected: number;
+}
+
 export async function getGoals(pagination?: Pagination, filter?: GetGoalsFilter) {
   if (!pagination) {
     pagination = {skip: 0, limit: 5};
@@ -57,3 +61,11 @@ export async function getGoal(id: string) {
   const response = await axios.get<GetGoalResponse>(`${API_BASE_URL}/goals/${id}`);
   return response.data;
 }
+
+export async function deleteGoal(id: string) {
+  const token = localStorage.getItem('top90-auth-token');
+  const response = await axios.delete<DeleteGoalResponse>(`${API_BASE_URL}/goals/${id}`, {
+    headers: {Authorization: `Bearer ${token}`},
+  });
+  return response.data;
+}

src/pages/Goals.tsx

@@ -6,7 +6,7 @@ import Input from '../components/Input';
 import Select from '../components/Select';
 import Video from '../components/Video';
 import {Pagination} from '../lib/api/core';
-import {getGoals, GetGoalsFilter, GetGoalsResponse} from '../lib/api/goals';
+import {deleteGoal, getGoals, GetGoalsFilter, GetGoalsResponse, Goal} from '../lib/api/goals';
 import {Player, searchPlayers, SearchPlayersResponse} from '../lib/api/players';
 import {getTeams, GetTeamsResponse} from '../lib/api/teams';
 
@@ -138,6 +138,24 @@ function Goals() {
     });
   }
 
+  function handleDeleteGoal(goal: Goal) {
+    deleteGoal(goal.id)
+      .then((data) => {
+        alert('Deleted ' + data.rowsAffected + ' goal(s)');
+        if (getGoalsResponse) {
+          const updatedGoals = getGoalsResponse.goals.filter((g) => g.id !== goal.id);
+          setGetGoalsResponse({
+            ...getGoalsResponse,
+            goals: updatedGoals,
+          });
+        }
+      })
+      .catch((error) => {
+        const message = error?.response?.data?.message;
+        alert(message || error);
+      });
+  }
+
   return (
     <div id="home" role="tabpanel" aria-labelledby="home-tab">
       <div className="mt-3">
@@ -211,7 +229,7 @@ function Goals() {
 
       {getGoalsResponse?.goals?.map((goal) => (
         <div key={goal.id} data-cy="goal-container" className="mb-4">
-          <Video goal={goal}></Video>
+          <Video goal={goal} onDelete={() => handleDeleteGoal(goal)}></Video>
         </div>
       ))}
 

src/pages/Settings.tsx

@@ -14,23 +14,14 @@ function Settings() {
   const [password, setPassword] = useState('');
 
   useEffect(() => {
-    document.addEventListener('keydown', onKeyDown);
     document.addEventListener('dblclick', onDoubleClick);
     setLoggedIn(!!localStorage.getItem('top90-auth-token'));
 
     return function cleanup() {
-      document.removeEventListener('keydown', onKeyDown);
       document.removeEventListener('dblclick', onDoubleClick);
     };
   }, []);
 
-  function onKeyDown(event: KeyboardEvent) {
-    if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'Enter') {
-      event.preventDefault();
-      setShowLogin((show) => !show);
-    }
-  }
-
   function onDoubleClick() {
     setShowLogin((show) => !show);
   }