From 5d5446afab8212872829375ed177909c1fb7e65a Mon Sep 17 00:00:00 2001
From: BlazingRockStorm <rocker.gryphon@gmail.com>
Date: Thu, 22 Aug 2024 22:38:19 +0900
Subject: [PATCH] debuging React Component

---
 app/javascript/components/ArtistSongForm.tsx | 89 ++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 app/javascript/components/ArtistSongForm.tsx

diff --git a/app/javascript/components/ArtistSongForm.tsx b/app/javascript/components/ArtistSongForm.tsx
new file mode 100644
index 0000000..252e7de
--- /dev/null
+++ b/app/javascript/components/ArtistSongForm.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+
+interface ArtistSongProps {
+  id: number;
+  artist_id: number;
+  song_id: number;
+  artist_type: string;
+}
+
+const ArtistSongForm = ({ initialArtistSongs = [] }) => {
+  const [artistSongs, setArtistSongs] = useState(initialArtistSongs);
+
+  const handleAddArtistSong = () => {
+    setArtistSongs([...artistSongs, { artistId: '', artistType: '' }]);
+  };
+
+  const handleRemoveArtistSong = (index) => {
+    const updatedArtistSongs = [...artistSongs];
+    updatedArtistSongs.splice(index, 1);
+    setArtistSongs(updatedArtistSongs);
+  };
+
+  const handleArtistChange = (event, index) => {
+    const updatedArtistSongs = [...artistSongs];
+    updatedArtistSongs[index] = {
+      ...updatedArtistSongs[index],
+      [event.target.name]: event.target.value,
+    };
+    setArtistSongs(updatedArtistSongs);
+  };
+
+  return (
+    <div>
+      {artistSongs.map((artistSong, index) => (
+        <div key={index} className="mb-3">
+          <label htmlFor={`artist_id_${index}`} className="form-label">
+            Artist
+          </label>
+          <select
+            id={`artist_id_${index}`}
+            name="artistId"
+            className="form-control"
+            value={artistSong.artistId}
+            onChange={(event) => handleArtistChange(event, index)}
+          >
+            <option value="">-- Select Artist --</option>
+            {Artist.all.map((artist) => (
+              <option key={artist.id} value={artist.id}>
+                {artist.name}
+              </option>
+            ))}
+          </select>
+          <label htmlFor={`artist_type_${index}`} className="form-label">
+            Artist Type
+          </label>
+          <select
+            id={`artist_type_${index}`}
+            name="artistType"
+            className="form-control"
+            value={artistSong.artistType}
+            onChange={(event) => handleArtistChange(event, index)}
+          >
+            <option value="">-- Select Type --</option>
+            <option value="main">Main</option>
+            <option value="featuring">Featuring</option>
+          </select>
+          {index > 0 && (
+            <button
+              type="button"
+              className="btn btn-secondary mb-3"
+              onClick={() => handleRemoveArtistSong(index)}
+            >
+              Remove Featuring Artist
+            </button>
+          )}
+        </div>
+      ))}
+      <button
+        type="button"
+        className="btn btn-link mb-3"
+        onClick={handleAddArtistSong}
+      >
+        Add Featuring Artist
+      </button>
+    </div>
+  );
+};
+
+export default ArtistSongForm;
\ No newline at end of file