@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.5 → 1.0.2-beta.7

package/src/screens/ListingScreen.jsx

@@ -46,7 +46,6 @@ import styles from "./ListingScreen.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPen, faTrash } from "@fortawesome/free-solid-svg-icons";
 
-
 const { Button, Text } = PlussCore.Components;
 
 const ListingScreen = (props) => {

package/src/selectors/featureBuilderSelectors.js

@@ -26,7 +26,7 @@ export const selectFormState = (state) => getFeatureBuilderState(state).form;
  */
 export const selectFormTitle = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.title;
+	return formState?.title;
 };
 
 /**
@@ -37,7 +37,7 @@ export const selectFormTitle = (state) => {
  */
 export const selectFormIcon = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.icon;
+	return formState?.icon;
 };
 
 /**
@@ -48,7 +48,7 @@ export const selectFormIcon = (state) => {
  */
 export const selectFormDisplayName = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.displayName;
+	return formState?.displayName;
 };
 
 /**
@@ -59,7 +59,7 @@ export const selectFormDisplayName = (state) => {
  */
 export const selectFormLayout = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState.layout;
+	return formState?.layout;
 };
 
 /**
@@ -70,7 +70,7 @@ export const selectFormLayout = (state) => {
  */
 export const selectFormFields = (state) => {
 	const formState = selectFormState(state);
-	return (formState && formState.fields) || [];
+	return formState?.fields || [];
 };
 
 export const selectFormField = (fieldId) => (state) =>
@@ -78,21 +78,21 @@ export const selectFormField = (fieldId) => (state) =>
 
 export const selectFormIsInitial = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._isInitial;
+	return formState?._isInitial;
 };
 export const selectFormIsSubmitting = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._isSubmitting;
+	return formState?._isSubmitting;
 };
 
 export const selectFormSubmitError = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._submitError;
+	return formState?._submitError;
 };
 
 export const selectFormSubmitSuccess = (state) => {
 	const formState = selectFormState(state);
-	return formState && formState._submitSuccess;
+	return formState?._submitSuccess;
 };
 
 // ============ DEFINITION SELECTORS ============
@@ -102,35 +102,44 @@ export const selectDefinitionState = (state) =>
 
 export const selectDefinition = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.definition;
+	return definitionState?.definition;
 };
 export const selectDefinitionId = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.id;
+	return definitionState?.id;
 };
 export const selectDefinitionIsLoading = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.isLoading;
+	return definitionState?.isLoading;
 };
 export const selectDefinitionError = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.error;
+	return definitionState?.error;
 };
 export const selectDefinitionIsCreating = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.isCreating;
+	return definitionState?.isCreating;
 };
 export const selectDefinitionIsEditing = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.isEditing;
+	return definitionState?.isEditing;
 };
 export const selectDefinitionMode = (state) => {
 	const definitionState = selectDefinitionState(state);
-	return definitionState && definitionState.mode;
+	return definitionState?.mode;
 };
 
-// Check if we have a definition loaded
-export const selectHasDefinition = (state) => !!selectDefinition(state);
+// Check if we have a definition loaded or if we've determined the mode
+// This is used by hiddenFromFeaturePicker to determine if feature should be shown
+// When mode is "create", definition is null but we've determined the feature doesn't exist
+// When mode is "edit", definition exists and we've determined the feature exists
+export const selectHasDefinition = (state) => {
+	const definition = selectDefinition(state);
+	const mode = selectDefinitionMode(state);
+	// Consider feature "loaded" if definition exists OR mode is set
+	// Mode being set means we've successfully fetched and determined the state
+	return !!definition || !!mode;
+};
 
 // ============ LISTINGS SELECTORS ============
 
@@ -139,35 +148,35 @@ export const selectListingsState = (state) =>
 
 export const selectListings = (state) => {
 	const listingsState = selectListingsState(state);
-	return (listingsState && listingsState.listings) || [];
+	return listingsState?.listings || [];
 };
 export const selectListingsIsLoading = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isLoading;
+	return listingsState?.isLoading;
 };
 export const selectListingsError = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.error;
+	return listingsState?.error;
 };
 export const selectListingsIsCreating = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isCreating;
+	return listingsState?.isCreating;
 };
 export const selectListingsIsEditing = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isEditing;
+	return listingsState?.isEditing;
 };
 export const selectListingsIsDeleting = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isDeleting;
+	return listingsState?.isDeleting;
 };
 export const selectListingsIsRestoring = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isRestoring;
+	return listingsState?.isRestoring;
 };
 export const selectListingsIsInitiallyLoaded = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.isInitiallyLoaded;
+	return listingsState?.isInitiallyLoaded;
 };
 
 // Get a specific listing by ID
@@ -303,7 +312,7 @@ export const selectWizardState = (state) =>
 
 export const selectWizardMode = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.mode;
+	return wizardState?.mode;
 };
 
 // Mode detection selectors - wizard mode is the SINGLE SOURCE OF TRUTH for create/edit mode
@@ -315,57 +324,57 @@ export const selectIsEditMode = (state) => selectWizardMode(state) === "edit";
 
 export const selectNavigationState = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.navigation;
+	return wizardState?.navigation;
 };
 
 export const selectCurrentStep = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.currentStep;
+	return navigationState?.currentStep;
 };
 
 export const selectCanGoBack = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.canGoBack;
+	return navigationState?.canGoBack;
 };
 
 export const selectPreviousStep = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.previousStep;
+	return navigationState?.previousStep;
 };
 
 export const selectCanGoForward = (state) => {
 	const navigationState = selectNavigationState(state);
-	return navigationState && navigationState.canGoForward;
+	return navigationState?.canGoForward;
 };
 
 export const selectStepValidation = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.stepValidation;
+	return wizardState?.stepValidation;
 };
 
 export const selectStepValidationState = (step) => (state) => {
 	const stepValidation = selectStepValidation(state);
-	return stepValidation && stepValidation[step];
+	return stepValidation?.[step];
 };
 
 export const selectIsStepValid = (step) => (state) => {
 	const stepValidationState = selectStepValidationState(step)(state);
-	return stepValidationState && stepValidationState.isValid;
+	return stepValidationState?.isValid;
 };
 
 export const selectStepErrors = (step) => (state) => {
 	const stepValidationState = selectStepValidationState(step)(state);
-	return stepValidationState ? stepValidationState.errors : {};
+	return stepValidationState?.errors || {};
 };
 
 export const selectStepCompletion = (state) => {
 	const wizardState = selectWizardState(state);
-	return wizardState && wizardState.stepCompletion;
+	return wizardState?.stepCompletion;
 };
 
 export const selectIsStepComplete = (step) => (state) => {
 	const stepCompletion = selectStepCompletion(state);
-	return stepCompletion && stepCompletion[step];
+	return stepCompletion?.[step];
 };
 
 export const selectAllStepsComplete = (state) => {
@@ -422,17 +431,13 @@ export const selectIsStepAccessible = (step) => (state) => {
 // Get current sort method
 export const selectSortBy = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.sortBy
-		? listingsState.sortBy
-		: "newest";
+	return listingsState?.sortBy || "newest";
 };
 
 // Get show deleted toggle state
 export const selectShowDeleted = (state) => {
 	const listingsState = selectListingsState(state);
-	return listingsState && listingsState.showDeleted
-		? listingsState.showDeleted
-		: false;
+	return listingsState?.showDeleted || false;
 };
 
 // Get sorted and filtered listings