Button to remove shows entirely (#1101)

app/controllers/api/your_shows_controller.rb

@@ -50,6 +50,15 @@ def update
       end
     end
 
+    def destroy
+      authorize! { current_human.present? }
+
+      show = Show.find_by(slug: params.require(:id))
+      RemoveMyShow.call(show, current_human)
+
+      render json: {}
+    end
+
     private
 
     def search(my_shows)

app/javascript/components/AddShowButton.tsx

@@ -1,49 +1,39 @@
-import { Show, YourRelationshipToShow, YourShow } from "../types"
+import { Show, YourShow } from "../types"
 import { Button } from "./Button"
 import { FunctionComponent } from "react"
 
 interface Props {
   show: Show
-  yourRelationship?: YourRelationshipToShow
   token: string
   setYourShow: (yourShow: YourShow) => void
 }
 
-export const AddShowButton: FunctionComponent<Props> = ({
-  show,
-  token,
-  yourRelationship,
-  setYourShow,
-}: Props) => {
-  if (yourRelationship) {
-    return <Button disabled={true}>Added</Button>
-  } else {
-    return (
-      <Button
-        onClick={async () => {
-          const response = await fetch(`/api/your-shows.json`, {
-            headers: {
-              "Content-Type": "application/json",
-              "X-SEASONING-TOKEN": token,
+export const AddShowButton: FunctionComponent<Props> = ({ show, token, setYourShow }: Props) => {
+  return (
+    <Button
+      onClick={async () => {
+        const response = await fetch(`/api/your-shows.json`, {
+          headers: {
+            "Content-Type": "application/json",
+            "X-SEASONING-TOKEN": token,
+          },
+          body: JSON.stringify({
+            show: {
+              id: show.id,
             },
-            body: JSON.stringify({
-              show: {
-                id: show.id,
-              },
-            }),
-            method: "POST",
-          })
+          }),
+          method: "POST",
+        })
 
-          if (response.ok) {
-            const data: { your_show: YourShow } = await response.json()
-            setYourShow(data.your_show)
-          } else {
-            throw new Error("Could not add show")
-          }
-        }}
-      >
-        Add
-      </Button>
-    )
-  }
+        if (response.ok) {
+          const data: { your_show: YourShow } = await response.json()
+          setYourShow(data.your_show)
+        } else {
+          throw new Error("Could not add show")
+        }
+      }}
+    >
+      Add
+    </Button>
+  )
 }

app/javascript/components/RemoveShowButton.tsx

@@ -0,0 +1,42 @@
+import { Button } from "./Button"
+import { Show } from "../types"
+
+interface Props {
+  show: Show
+  token: string
+  onRemove: () => void
+}
+
+export const RemoveShowButton = ({ show, token, onRemove }: Props) => {
+  return (
+    <Button
+      onClick={async () => {
+        if (
+          !confirm(
+            "Are you sure? This will lose track of your note to self and show status (but not reviews or which episodes you've seen"
+          )
+        ) {
+          return
+        }
+
+        // N.B. here we're specifying the show id rather than the my_shows id, because that's what we've expoed to the front-end
+        // and it's non-ambiguous
+        const response = await fetch(`/api/your-shows/${show.slug}.json`, {
+          headers: {
+            "Content-Type": "application/json",
+            "X-SEASONING-TOKEN": token,
+          },
+          method: "DELETE",
+        })
+
+        if (response.ok) {
+          onRemove()
+        } else {
+          throw new Error("Could not remove show")
+        }
+      }}
+    >
+      Remove
+    </Button>
+  )
+}

app/javascript/pages/ChangelogPage.tsx

@@ -7,6 +7,7 @@ const changelog = `
 
   But here's some highlights of when things happened.
 
+  1. **May 22, 2023** — Humans can now remove a show from their "Your shows" list entirely. Seasoning will forget your "note to self" and the assigned status. It will still remember which episodes you've checked off that you've seen, and your season reviews.
   1. **April 17, 2023** — Humans can optionally set a limit on how many shows they are currently watching
   1. **March 31, 2023** — Show "last refreshed at" show data on season page and episode page
   1. **February 23, 2023** — Automatically toggle shows from "waiting for more" to "next up" _only when there is a new episode available to watch_, not just when the season is announced.

app/javascript/pages/CreditsPage.tsx

@@ -36,8 +36,8 @@ export const CreditsPage: FunctionComponent = () => {
         </li>
         <li>
           The television icon you see up top is{" "}
-          <a href="https://shannonethomas.com">by Shannon E Thomas</a>, which I got from the defunct{" "}
-          <a href="https://www.toicon.com/icons/avocado_watch">to icon</a> project.
+          <a href="https://shannonethomas.com">by Shannon E Thomas</a>, which I got from the now
+          defunct <a href="https://www.toicon.com/icons/avocado_watch">to icon</a> project.
         </li>
       </ul>
     </div>

app/javascript/pages/RoadmapPage.tsx

@@ -8,7 +8,6 @@ const roadmap = `
 
   1. Pagination on [the reviews page](/reviews)
   1. Pagination on a person's reviews page, for example [mine](/maxjacobson/reviews)
-  1. Possible to remove a show from your shows
   1. Like button on reviews
   1. Comments on reviews
   1. Possible to edit reviews after publishing them -- body, star rating, visibility

app/javascript/pages/ShowPage.tsx

@@ -5,6 +5,7 @@ import { ChooseShowStatusButton } from "../components/ChooseShowStatusButton"
 import { MoreInfo } from "../components/MoreInfo"
 import { NoteToSelf } from "../components/NoteToSelf"
 import { Poster } from "../components/Poster"
+import { RemoveShowButton } from "../components/RemoveShowButton"
 import { SeasonsList } from "../components/SeasonsList"
 import { setHeadTitle } from "../hooks"
 import { ShowMetadata } from "../components/ShowMetadata"
@@ -80,14 +81,23 @@ export const ShowPage = () => {
           <>
             {guest.authenticated && (
               <span className="mr-2">
-                <AddShowButton
-                  token={guest.token}
-                  show={data.show}
-                  yourRelationship={data.your_relationship}
-                  setYourShow={(yourShow) => {
-                    setShowData({ loading: false, data: yourShow })
-                  }}
-                />
+                {data.your_relationship ? (
+                  <RemoveShowButton
+                    show={data.show}
+                    token={guest.token}
+                    onRemove={() => {
+                      setShowData({ loading: false, data: { show: data.show } })
+                    }}
+                  />
+                ) : (
+                  <AddShowButton
+                    token={guest.token}
+                    show={data.show}
+                    setYourShow={(yourShow) => {
+                      setShowData({ loading: false, data: yourShow })
+                    }}
+                  />
+                )}
               </span>
             )}
           </>

app/services/remove_my_show.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+RemoveMyShow = lambda do |show, human|
+  my_show = MyShow.find_by(human:, show:) or raise ArgumentError, "No relationship to destroy"
+  my_show.destroy!
+end

config/routes.rb

@@ -6,7 +6,7 @@
       resource :guest, only: [:show]
       resources :magic_links, only: %i[create show], path: "/magic-links"
       resources :humans, only: [:create]
-      resources :your_shows, only: %i[index create update], path: "/your-shows"
+      resources :your_shows, only: %i[index create update destroy], path: "/your-shows"
       resources :your_seasons, only: %i[update], path: "/your-seasons" do
         resources :episodes, only: %i[update], controller: "your_episodes"
       end