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

Fix: New banner step when editing a quest #1060

Merged
merged 4 commits into from
Jan 27, 2025
Merged

Fix: New banner step when editing a quest #1060

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2bf5111
bannerStep component created
sandragcarrillo Jan 23, 2025
0a0ffb8
Fix: Add Banner step before preview in admin form flow
sandragcarrillo Jan 24, 2025
2121b86
Merge branch 'testnet' into fix-1008
sandragcarrillo Jan 27, 2025
4368dab
adding banner to handleQuestInputChange
sandragcarrillo Jan 27, 2025
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
67 changes: 67 additions & 0 deletions components/admin/taskSteps/bannerStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React, { FunctionComponent } from "react";
import TextInput from "../textInput";

type BannerStepProps = {
handleTasksInputChange: (
e: React.ChangeEvent<HTMLInputElement>,
index: number
) => void;
step: StepMap;
index: number;
};
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

Add explicit import for StepMap type and resolve ambiguous type definition

The StepMap type is not imported in bannerStep.tsx, and there are two different definitions in the codebase:

  • types/frontTypes.d.ts: Base type definition
  • app/admin/quests/dashboard/[questId]/page.tsx: Extended type with id field

Add an explicit import from types/frontTypes.d.ts to ensure type consistency and prevent potential type mismatches.

🔗 Analysis chain

Verify the StepMap type import.

It's unclear how StepMap is declared or imported; ensure that this type is properly defined or imported to avoid potential “cannot find name StepMap” errors.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for StepMap type definition or import references.

# We'll look for StepMap definition or import statements across the codebase.
rg 'type StepMap\b|interface StepMap\b|import.*StepMap'

Length of output: 155

Script:

#!/bin/bash
# Get the type definitions and imports
echo "=== StepMap definition in types/frontTypes.d.ts ==="
rg -A 10 "type StepMap =" types/frontTypes.d.ts

echo -e "\n=== StepMap definition in app/admin/quests/dashboard/[questId]/page.tsx ==="
rg -A 10 "type StepMap =" "app/admin/quests/dashboard/[questId]/page.tsx"

echo -e "\n=== Imports in bannerStep.tsx ==="
rg "^import" "components/admin/taskSteps/bannerStep.tsx"

Length of output: 1859


const BannerStep: FunctionComponent<BannerStepProps> = ({
handleTasksInputChange,
step,
index,
}) => {
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

Consider defaulting to a fallback when banner is null or undefined.

If step.data.banner can be missing, this code will throw a runtime error when accessing its properties. Safeguard by providing a default object or verifying if the banner object is defined before rendering.

-const BannerStep: FunctionComponent<BannerStepProps> = ({
-  handleTasksInputChange,
-  step,
-  index,
-}) => {
+const BannerStep: FunctionComponent<BannerStepProps> = (props) => {
+  const { handleTasksInputChange, step, index } = props;
+  const banner = step?.data?.banner || {
+    tag: "",
+    title: "",
+    description: "",
+    cta: "",
+    href: "",
+    image: ""
+  };
   return (
     <div className="flex flex-col gap-4 pt-2">
📝 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
const BannerStep: FunctionComponent<BannerStepProps> = ({
handleTasksInputChange,
step,
index,
}) => {
const BannerStep: FunctionComponent<BannerStepProps> = (props) => {
const { handleTasksInputChange, step, index } = props;
const banner = step?.data?.banner || {
tag: "",
title: "",
description: "",
cta: "",
href: "",
image: ""
};

return (
<div className="flex flex-col gap-4 pt-2">
<TextInput
onChange={(e) => handleTasksInputChange(e, index)}
value={step.data.banner.tag}
name="tag"
label="Tag"
placeholder="Optional"
/>
<TextInput
onChange={(e) => handleTasksInputChange(e, index)}
value={step.data.banner.title}
name="title"
label="Title"
placeholder="Title"
/>
<TextInput
onChange={(e) => handleTasksInputChange(e, index)}
value={step.data.banner.description}
name="description"
label="Description"
placeholder="Description"
multiline={4}
/>
<TextInput
onChange={(e) => handleTasksInputChange(e, index)}
value={step.data.banner.cta}
name="cta"
label="CTA (Call to Action)"
placeholder="Call to Action"
/>
<TextInput
onChange={(e) => handleTasksInputChange(e, index)}
value={step.data.banner.href}
name="href"
label="CTA Link"
placeholder="https://example.com"
/>
<TextInput
onChange={(e) => handleTasksInputChange(e, index)}
value={step.data.banner.image}
name="image"
label="Image URL"
placeholder="/karnot/endurBanner.webp"
/>
</div>
);
};

export default BannerStep;
Loading