trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor: simplify GiftedDialog with explicit entity type props

Browse Source 
Replace complex updateEntityTypes() method with explicit giverEntityType and
recipientEntityType props. This makes the component more declarative and
maintainable by removing hidden logic and making entity type relationships
clear at the call site.

- Remove updateEntityTypes() method and related watchers
- Add explicit giverEntityType and recipientEntityType props with defaults
- Update all views to use inline logic for entity type determination
- Fix entity type preservation in navigation flows
- Enhance query parameter passing for better context preservation
- Fix recipient reset issue in ContactGiftingView
- Resolve entity type mismatch in HomeView project button flow

Files changed:
- GiftedDialog.vue: Remove complex logic, add explicit props
- EntitySelectionStep.vue: Enhanced query parameter handling
- ContactGiftingView.vue: Improved context preservation
- HomeView.vue, ProjectViewView.vue, ClaimView.vue, ContactsView.vue:
  Updated to use explicit entity type props
- Add refactoring documentation
This commit is contained in:
Jose Olarte III
2025-08-03 11:49:46 +08:00
parent 371cf763c8
commit 06f3a4c7c2
8 changed files with 288 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/EntitySelectionStep.vue
View File

@@ -234,11 +234,7 @@ export default class EntitySelectionStep extends Vue {
* Query parameters for "Show All" navigation
*/
get showAllQueryParams(): Record<string, string> {
if (this.shouldShowProjects) {
return {};
}
return {
const baseParams = {
stepType: this.stepType,
giverEntityType: this.giverEntityType,
recipientEntityType: this.recipientEntityType,
@@ -247,26 +243,31 @@ export default class EntitySelectionStep extends Vue {
amountInput: this.amountInput,
unitCode: this.unitCode,
offerId: this.offerId,
...(this.stepType === "giver"
? {
recipientProjectId: this.toProjectId || "",
recipientProjectName: this.receiver?.name || "",
recipientProjectImage: this.receiver?.image || "",
recipientProjectHandleId: this.receiver?.handleId || "",
recipientDid: this.receiver?.did || "",
}
: {
giverProjectId: this.fromProjectId || "",
giverProjectName: this.giver?.name || "",
giverProjectImage: this.giver?.image || "",
giverProjectHandleId: this.giver?.handleId || "",
giverDid: this.giver?.did || "",
}),
fromProjectId: this.fromProjectId,
toProjectId: this.toProjectId,
showProjects: this.showProjects.toString(),
isFromProjectView: this.isFromProjectView.toString(),
};
if (this.shouldShowProjects) {
// For project contexts, still pass entity type information
return baseParams;
}
return {
...baseParams,
// Always pass both giver and recipient info for context preservation
giverProjectId: this.fromProjectId || "",
giverProjectName: this.giver?.name || "",
giverProjectImage: this.giver?.image || "",
giverProjectHandleId: this.giver?.handleId || "",
giverDid: this.giver?.did || "",
recipientProjectId: this.toProjectId || "",
recipientProjectName: this.receiver?.name || "",
recipientProjectImage: this.receiver?.image || "",
recipientProjectHandleId: this.receiver?.handleId || "",
recipientDid: this.receiver?.did || "",
};
}
/**

84
src/components/GiftedDialog.vue
View File

@@ -3,7 +3,7 @@
<div
class="dialog"
data-testid="gifted-dialog"
:data-recipient-entity-type-override="recipientEntityTypeOverride"
:data-recipient-entity-type="recipientEntityType"
>
<!-- Step 1: Entity Selection -->
<EntitySelectionStep
@@ -11,7 +11,9 @@
:step-type="stepType"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:show-projects="showProjects"
:show-projects="
giverEntityType === 'project' || recipientEntityType === 'project'
"
:is-from-project-view="isFromProjectView"
:projects="projects"
:all-contacts="allContacts"
@@ -60,7 +62,7 @@
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
import { Vue, Component, Prop } from "vue-facing-decorator";
import {
createAndSubmitGive,
@@ -105,29 +107,13 @@ export default class GiftedDialog extends Vue {
@Prop() fromProjectId = "";
@Prop() toProjectId = "";
@Prop({ default: false }) showProjects = false;
@Prop() isFromProjectView = false;
@Prop() recipientEntityTypeOverride?: "person" | "project";
@Watch("showProjects")
onShowProjectsChange() {
this.updateEntityTypes();
}
@Watch("fromProjectId")
onFromProjectIdChange() {
this.updateEntityTypes();
}
@Watch("toProjectId")
onToProjectIdChange() {
this.updateEntityTypes();
}
@Watch("recipientEntityTypeOverride")
onRecipientEntityTypeOverrideChange() {
this.updateEntityTypes();
}
@Prop({ default: "person" }) giverEntityType = "person" as
| "person"
| "project";
@Prop({ default: "person" }) recipientEntityType = "person" as
| "person"
| "project";
activeDid = "";
allContacts: Array<Contact> = [];
@@ -203,50 +189,6 @@ export default class GiftedDialog extends Vue {
}
stepType = "giver";
giverEntityType = "person" as "person" | "project";
recipientEntityType = "person" as "person" | "project";
updateEntityTypes() {
// Reset and set entity types based on current context
this.giverEntityType = "person";
this.recipientEntityType = "person";
// If recipient entity type is explicitly overridden, use that
if (this.recipientEntityTypeOverride) {
this.recipientEntityType = this.recipientEntityTypeOverride;
}
// Determine entity types based on current context
if (this.showProjects) {
// HomeView "Project" button or ProjectViewView "Given by This"
this.giverEntityType = "project";
// Only override recipient if not already set by recipientEntityTypeOverride
if (!this.recipientEntityTypeOverride) {
this.recipientEntityType = "person";
}
} else if (this.fromProjectId) {
// ProjectViewView "Given by This" button (project is giver)
this.giverEntityType = "project";
// Only override recipient if not already set by recipientEntityTypeOverride
if (!this.recipientEntityTypeOverride) {
this.recipientEntityType = "person";
}
} else if (this.toProjectId) {
// ProjectViewView "Given to This" button (project is recipient)
this.giverEntityType = "person";
// Only override recipient if not already set by recipientEntityTypeOverride
if (!this.recipientEntityTypeOverride) {
this.recipientEntityType = "project";
}
} else {
// HomeView "Person" button
this.giverEntityType = "person";
// Only override recipient if not already set by recipientEntityTypeOverride
if (!this.recipientEntityTypeOverride) {
this.recipientEntityType = "person";
}
}
}
async open(
giver?: libsUtil.GiverReceiverInputInfo,
@@ -261,7 +203,6 @@ export default class GiftedDialog extends Vue {
this.giver = giver;
this.receiver = receiver;
this.offerId = offerId || "";
console.log("offerId", this.offerId);
this.prompt = prompt || "";
this.description = description || "";
this.amountInput = amountInput || "0";
@@ -270,8 +211,7 @@ export default class GiftedDialog extends Vue {
this.firstStep = !giver;
this.stepType = "giver";
// Update entity types based on current props
this.updateEntityTypes();
// Entity types are now set via props, no need to call updateEntityTypes()
try {
const settings = await this.$settings();

3
src/views/ClaimView.vue
View File

@@ -201,12 +201,13 @@
</div>
<GiftedDialog
ref="customGiveDialog"
:giver-entity-type="'person'"
:recipient-entity-type="projectInfo ? 'project' : 'person'"
:to-project-id="
detailsForGive?.fulfillsPlanHandleId ||
detailsForOffer?.fulfillsPlanHandleId ||
''
"
:recipient-entity-type-override="projectInfo ? 'project' : 'person'"
/>
<div v-if="libsUtil.isGiveAction(veriClaim)">

42
src/views/ContactGiftingView.vue
View File

@@ -67,9 +67,10 @@
<GiftedDialog
ref="giftedDialog"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:from-project-id="fromProjectId"
:to-project-id="toProjectId"
:show-projects="showProjects"
:is-from-project-view="isFromProjectView"
/>
</section>
@@ -213,7 +214,7 @@ export default class ContactGiftingView extends Vue {
// Preserve the existing giver from the context
if (this.giverEntityType === "project") {
giver = {
// no did, because it's a project
did: this.giverProjectHandleId,
name: this.giverProjectName,
image: this.giverProjectImage,
handleId: this.giverProjectHandleId,
@@ -253,7 +254,7 @@ export default class ContactGiftingView extends Vue {
// We're selecting a giver, so the contact becomes the giver
giver = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
// Recipient is either a project or the current user
// Preserve the existing recipient from the context
if (this.recipientEntityType === "project") {
recipient = {
did: this.recipientProjectHandleId,
@@ -262,7 +263,20 @@ export default class ContactGiftingView extends Vue {
handleId: this.recipientProjectHandleId,
};
} else {
recipient = { did: this.activeDid, name: "You" };
// Check if the preserved recipient was "Unnamed" (empty DID) or a regular contact
if (this.recipientDid === "") {
// Recipient was "Unnamed"
recipient = { did: "", name: "Unnamed" };
} else if (this.recipientDid) {
// Recipient was a regular contact
recipient = {
did: this.recipientDid,
name: this.recipientProjectName || "Someone",
};
} else {
// Fallback to current user
recipient = { did: this.activeDid, name: "You" };
}
}
} else {
// We're selecting a recipient, so the contact becomes the recipient
@@ -276,13 +290,21 @@ export default class ContactGiftingView extends Vue {
image: this.giverProjectImage,
handleId: this.giverProjectHandleId,
};
} else if (this.giverDid) {
giver = {
did: this.giverDid,
name: this.giverProjectName || "Someone",
};
} else {
giver = { did: this.activeDid, name: "You" };
// Check if the preserved giver was "Unnamed" (empty DID) or a regular contact
if (this.giverDid === "") {
// Giver was "Unnamed"
giver = { did: "", name: "Unnamed" };
} else if (this.giverDid) {
// Giver was a regular contact
giver = {
did: this.giverDid,
name: this.giverProjectName || "Someone",
};
} else {
// Fallback to current user
giver = { did: this.activeDid, name: "You" };
}
}
}

6
src/views/ContactsView.vue
View File

@@ -107,7 +107,11 @@
@copy-selected="copySelectedContacts"
/>
<GiftedDialog ref="customGivenDialog" />
<GiftedDialog
ref="customGivenDialog"
:giver-entity-type="'person'"
:recipient-entity-type="'person'"
/>
<OfferDialog ref="customOfferDialog" />
<ContactNameDialog ref="contactNameDialog" />

6
src/views/HomeView.vue
View File

@@ -151,7 +151,11 @@ Raymer * @version 1.0.0 */
</div>
</div>
<GiftedDialog ref="giftedDialog" :show-projects="showProjectsDialog" />
<GiftedDialog
ref="giftedDialog"
:giver-entity-type="showProjectsDialog ? 'project' : 'person'"
:recipient-entity-type="'person'"
/>
<GiftedPrompts ref="giftedPrompts" />
<FeedFilters ref="feedFilters" />

5
src/views/ProjectViewView.vue
View File

@@ -216,6 +216,8 @@
<GiftedDialog
ref="giveDialogToThis"
:giver-entity-type="'person'"
:recipient-entity-type="'project'"
:to-project-id="projectId"
:is-from-project-view="true"
/>
@@ -486,8 +488,9 @@
</div>
<GiftedDialog
ref="giveDialogFromThis"
:giver-entity-type="'project'"
:recipient-entity-type="'person'"
:from-project-id="projectId"
:show-projects="true"
:is-from-project-view="true"
/>