Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Delete Quest button added #911

Closed
wants to merge 3 commits into from
Closed

Delete Quest button added #911

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b28c5e
Delete Quest button added
GradleD Oct 27, 2024
5a285bb
Update page.tsx
GradleD Oct 27, 2024
a276c39
Update page.tsx
GradleD Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 45 additions & 21 deletions app/admin/quests/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,32 @@ export default function Page() {
},
[]
);
// Function to delete a quest
const deleteQuest = useCallback(async (questId: string) => {
if (!questId || typeof questId !== 'string') {
showNotification("Invalid quest ID", "error");
return;
}
if (!window.confirm('Are you sure you want to delete this quest? This action cannot be undone.')) {
return;
}

return (
setLoading(true);
try {
const response = await AdminService.deleteQuest(questId);
if (!response.success) {
throw new Error('Failed to delete quest');
}
setQuests((prevQuests) => prevQuests.filter((quest) => quest.id !== questId)); // Remove the quest from the state
showNotification("Quest deleted successfully", "success");
} catch (error) {
showNotification("Error deleting quest", "error");
console.error("Error deleting quest", error);
}finally {
setLoading(false);
}, [showNotification]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix syntax error in useCallback dependency array.

There's a syntax error in the closing of the useCallback. The finally block is not properly closed, and the dependency array is misplaced.

Apply this fix:

  const deleteQuest = useCallback(async (questId: string) => {
    if (!questId || typeof questId !== 'string') {
      showNotification("Invalid quest ID", "error");
      return;
    }
    if (!window.confirm('Are you sure you want to delete this quest? This action cannot be undone.')) {
      return;
    }

    setLoading(true);
    try {
      const response = await AdminService.deleteQuest(questId);
      if (!response.success) {
        throw new Error('Failed to delete quest');
      }
      setQuests((prevQuests) => prevQuests.filter((quest) => quest.id !== questId));
      showNotification("Quest deleted successfully", "success");
    } catch (error) {
      showNotification("Error deleting quest", "error");
      console.error("Error deleting quest", error);
    } finally {
      setLoading(false);
    }
-  }, [showNotification]);
+  }
+}, [showNotification]);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Function to delete a quest
const deleteQuest = useCallback(async (questId: string) => {
if (!questId || typeof questId !== 'string') {
showNotification("Invalid quest ID", "error");
return;
}
if (!window.confirm('Are you sure you want to delete this quest? This action cannot be undone.')) {
return;
}
return (
setLoading(true);
try {
const response = await AdminService.deleteQuest(questId);
if (!response.success) {
throw new Error('Failed to delete quest');
}
setQuests((prevQuests) => prevQuests.filter((quest) => quest.id !== questId)); // Remove the quest from the state
showNotification("Quest deleted successfully", "success");
} catch (error) {
showNotification("Error deleting quest", "error");
console.error("Error deleting quest", error);
}finally {
setLoading(false);
}, [showNotification]);
// Function to delete a quest
const deleteQuest = useCallback(async (questId: string) => {
if (!questId || typeof questId !== 'string') {
showNotification("Invalid quest ID", "error");
return;
}
if (!window.confirm('Are you sure you want to delete this quest? This action cannot be undone.')) {
return;
}
setLoading(true);
try {
const response = await AdminService.deleteQuest(questId);
if (!response.success) {
throw new Error('Failed to delete quest');
}
setQuests((prevQuests) => prevQuests.filter((quest) => quest.id !== questId)); // Remove the quest from the state
showNotification("Quest deleted successfully", "success");
} catch (error) {
showNotification("Error deleting quest", "error");
console.error("Error deleting quest", error);
} finally {
setLoading(false);
}
}
}, [showNotification]);
🧰 Tools
🪛 Biome

[error] 98-98: Expected a statement but instead found ', [showNotification])'.

Expected a statement here.

(parse)


return (
<div className="flex flex-col w-full pt-28 g-8">
<div className={styles.backButton}>
<BackButton onClick={() => router.back()} />
Expand Down Expand Up @@ -102,7 +126,7 @@ export default function Page() {
className="pb-4"
value={tabIndex}
onChange={handleChangeTab}
aria-label="quests and collectons tabs"
aria-label="quests and collections tabs"
indicatorColor="secondary"
>
<Tab
Expand Down Expand Up @@ -140,16 +164,20 @@ export default function Page() {
{quests?.map((quest) => {
if (!quest.disabled) {
return (
<Quest
key={quest.id}
title={quest.title_card}
onClick={() =>
router.push(`/admin/quests/dashboard/${quest.id}`)
}
imgSrc={quest.img_card}
reward={quest.disabled ? "Disabled" : "Active"}
id={quest.id}
/>
<div key={quest.id} className="quest-item">
<Quest
title={quest.title_card}
onClick={() =>
router.push(`/admin/quests/dashboard/${quest.id}`)
}
imgSrc={quest.img_card}
reward={quest.disabled ? "Disabled" : "Active"}
id={quest.id}
/>
<Button onClick={() => deleteQuest(quest.id)}>
<p>Delete Quest</p>
</Button>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Refactor duplicated quest rendering logic.

The quest rendering logic is duplicated between enabled and disabled tabs. Consider extracting this into a reusable component.

Create a new component:

type QuestItemProps = {
  quest: QuestDocument;
  onDelete: (id: string) => Promise<void>;
  onNavigate: (id: string) => void;
};

const QuestItem: React.FC<QuestItemProps> = ({ quest, onDelete, onNavigate }) => (
  <div className="quest-item">
    <Quest
      title={quest.title_card}
      onClick={() => onNavigate(quest.id)}
      imgSrc={quest.img_card}
      reward={quest.disabled ? "Disabled" : "Active"}
      id={quest.id}
    />
    <Button 
      onClick={() => onDelete(quest.id)}
      aria-label={`Delete quest ${quest.title_card}`}
      className="mt-2"
    >
      <p>Delete Quest</p>
    </Button>
  </div>
);

Then simplify the tab panels:

-<div key={quest.id} className="quest-item">
-  <Quest
-    title={quest.title_card}
-    onClick={() => router.push(`/admin/quests/dashboard/${quest.id}`)}
-    imgSrc={quest.img_card}
-    reward={quest.disabled ? "Disabled" : "Active"}
-    id={quest.id}
-  />
-  <Button onClick={() => deleteQuest(quest.id)}>
-    <p>Delete Quest</p>
-  </Button>
-</div>
+<QuestItem
+  key={quest.id}
+  quest={quest}
+  onDelete={deleteQuest}
+  onNavigate={(id) => router.push(`/admin/quests/dashboard/${id}`)}
+/>

Also applies to: 178-191

);
}
})}
Expand All @@ -160,16 +188,12 @@ export default function Page() {
{quests?.map((quest) => {
if (quest.disabled) {
return (
<Quest
<QuestItem
key={quest.id}
title={quest.title_card}
onClick={() =>
router.push(`/admin/quests/dashboard/${quest.id}`)
}
imgSrc={quest.img_card}
reward={quest.disabled ? "Disabled" : "Active"}
id={quest.id}
/>
quest={quest}
onDelete={deleteQuest}
onNavigate={(id) => router.push(`/admin/quests/dashboard/${id}`)}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Missing QuestItem component implementation

The QuestItem component is used in app/admin/quests/page.tsx but there's no implementation found in the codebase. The component is neither defined locally nor imported from any components directory.

  • The file app/admin/quests/page.tsx uses two different components for quest items:
    • Quest component (imported from "@components/admin/questCard") for enabled quests
    • QuestItem component (undefined) for disabled quests
🔗 Analysis chain

Verify QuestItem component implementation.

The code references a QuestItem component, but its implementation is not visible in the provided context.

Let's verify the component exists and is properly typed:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for QuestItem component definition
echo "Searching for QuestItem component definition..."
rg -t typescript -t tsx "QuestItem.*=.*React\.FC" --no-filename

# Search for QuestItem type definition
echo "Searching for QuestItem type definition..."
rg -t typescript -t tsx "type QuestItem(Props)? = " --no-filename

Length of output: 403

Script:

#!/bin/bash
# Search for QuestItem component definition with broader patterns
echo "Searching for QuestItem component definition..."
rg "export.*QuestItem" -A 5

# Search for files containing QuestItem
echo "Finding files containing QuestItem..."
fd -e tsx -e ts | xargs rg "QuestItem"

Length of output: 319

Script:

#!/bin/bash
# Let's try to find the component in components directory
echo "Searching for QuestItem component in components..."
fd QuestItem

# Search for imports of QuestItem to trace its location
echo "Searching for QuestItem imports..."
rg "import.*QuestItem"

# Look for any file containing QuestItem with more context
echo "Searching QuestItem with more context..."
rg "QuestItem" -B 5 -A 5

Length of output: 1154

Script:

#!/bin/bash
# Let's check the entire file content to find the component import
echo "Checking the entire quests page content..."
cat app/admin/quests/page.tsx

# Search for QuestItem in components directory with any case
echo "Searching for quest item component with case variations..."
fd -I -e tsx -e ts | xargs rg -i "questitem"

Length of output: 7685

Script:

#!/bin/bash
# Let's check components directory for Quest related components
echo "Checking components directory..."
fd -t f -e tsx -e ts . components

# Search for Quest related imports in the project
echo "Searching for Quest related imports..."
rg "from.*components.*[Qq]uest"

Length of output: 13534

);
}
})}
Expand Down