@plusscommunities/pluss-feature-builder-web-a 1.0.2-beta.0

package/src/screens/ListingScreen.jsx

@@ -0,0 +1,478 @@
+import React, { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { Table } from "react-bootstrap";
+import { PlussCore } from "../feature.config";
+import {
+	fetchListing,
+	fetchListingSilent,
+	deleteListing,
+	undeleteListing,
+	setSortBy,
+	setShowDeleted,
+} from "../actions/listingActions";
+import { fetchFeatureDefinitions } from "../actions/featureDefinitionsIndex.js";
+import { capitalizeTextWithFallback } from "../utils/textUtils";
+import {
+	selectSortedListings,
+	selectActiveListings,
+	selectDeletedListings,
+	selectSortBy,
+	selectShowDeleted,
+	selectListingsIsLoading,
+	selectListingsError,
+	selectListingsIsInitiallyLoaded,
+	selectListingsIsRestoring,
+	selectDefinition,
+	selectDefinitionIsLoading,
+	selectDefinitionError,
+	selectHasDefinition,
+} from "../selectors/featureBuilderSelectors";
+import {
+	DeleteConfirmationPopup,
+	ErrorMessage,
+	LoadingState,
+	FeatureBuilderSidebar,
+	SortButtonGroup,
+	ToggleSwitch,
+	Header,
+	ErrorBoundary,
+	AddButton,
+} from "../components";
+
+import { values } from "../values.config.js";
+
+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) => {
+	const { history } = props;
+	const dispatch = useDispatch();
+	const auth = useSelector((state) => state.auth);
+	const sortedListings = useSelector(selectSortedListings);
+	const activeListings = useSelector(selectActiveListings);
+	const deletedListings = useSelector(selectDeletedListings);
+	const sortBy = useSelector(selectSortBy);
+	const showDeleted = useSelector(selectShowDeleted);
+	const isLoading = useSelector(selectListingsIsLoading);
+	const isInitiallyLoaded = useSelector(selectListingsIsInitiallyLoaded);
+	const error = useSelector(selectListingsError);
+	const isRestoring = useSelector(selectListingsIsRestoring);
+	const definition = useSelector(selectDefinition);
+	const displayName = definition?.displayName || definition?.title || "Feature";
+	const isDefinitionLoading = useSelector(selectDefinitionIsLoading);
+	const definitionError = useSelector(selectDefinitionError);
+	const hasDefinition = useSelector(selectHasDefinition);
+
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const [listingToDelete, setListingToDelete] = useState(null);
+	const [deleteMessage, setDeleteMessage] = useState("");
+	const [isDeleting, setIsDeleting] = useState(false);
+
+	// Error handling state
+	const [actionError, setActionError] = useState("");
+	const [showActionError, setShowActionError] = useState(false);
+
+	useEffect(() => {
+		// Always fetch feature definitions
+		dispatch(fetchFeatureDefinitions());
+
+		// Check data freshness - if no listings exist or data is stale, fetch with loading
+		const dataNeedsRefresh =
+			!isInitiallyLoaded ||
+			sortedListings.length === 0 ||
+			(sortedListings.length > 0 && !sortedListings[0].id);
+
+		if (dataNeedsRefresh) {
+			// Data is empty or invalid - show loading and fetch
+			dispatch(fetchListing());
+		} else {
+			// Data exists - refresh in background silently
+			dispatch(fetchListingSilent());
+		}
+	}, [dispatch, isInitiallyLoaded, sortedListings.length]);
+
+	// Helper function to show action errors
+	const showActionErrorMessage = (message) => {
+		setActionError(message);
+		setShowActionError(true);
+		// Auto-hide after 5 seconds
+		setTimeout(() => {
+			setShowActionError(false);
+		}, 5000);
+	};
+
+	// Smart refresh with data freshness check
+	const handleSmartRefresh = () => {
+		// Force fresh data load regardless of current state
+		dispatch(fetchListing());
+	};
+
+	const handleDeleteClick = (listing) => {
+		setListingToDelete(listing);
+		setShowDeleteConfirm(true);
+		setDeleteMessage("");
+	};
+
+	const handleEditClick = (listing) => {
+		const id = listing.id || listing._id;
+		history.push(values.routeEditListing.replace(":id", id));
+	};
+
+	const handleCreateClick = () => {
+		history.push(values.routeCreateListing);
+	};
+
+	const handleConfirmDelete = () => {
+		if (listingToDelete) {
+			setIsDeleting(true);
+			dispatch(deleteListing(listingToDelete.id))
+				.then(() => {
+					const title =
+						(listingToDelete.fields &&
+							listingToDelete.fields["mandatory-title"]) ||
+						"Item";
+					setDeleteMessage(
+						`${capitalizeTextWithFallback(title, "Item")} deleted. You can restore it anytime.`,
+					);
+					setShowDeleteConfirm(false);
+					setListingToDelete(null);
+					setIsDeleting(false);
+					// Clear message after 3 seconds
+					setTimeout(() => setDeleteMessage(""), 3000);
+				})
+				.catch((error) => {
+					const errorMessage = error.message || "Network error";
+					showActionErrorMessage(
+						`Can't delete listing right now. Check your internet connection and try again. (${errorMessage})`,
+					);
+					setShowDeleteConfirm(false);
+					setListingToDelete(null);
+					setIsDeleting(false);
+				});
+		}
+	};
+
+	const handleCancelDelete = () => {
+		setShowDeleteConfirm(false);
+		setListingToDelete(null);
+	};
+
+	const handleRestoreClick = (listing) => {
+		dispatch(undeleteListing(listing.id))
+			.then(() => {
+				const title =
+					(listing.fields && listing.fields["mandatory-title"]) || "Item";
+				setDeleteMessage(
+					`${capitalizeTextWithFallback(title, "Item")} restored and ready to use.`,
+				);
+				// Clear message after 3 seconds
+				setTimeout(() => setDeleteMessage(""), 3000);
+			})
+			.catch((error) => {
+				const errorMessage = error.message || "Network error";
+				showActionErrorMessage(
+					`Can't restore listing right now. Check your internet connection and try again. (${errorMessage})`,
+				);
+			});
+	};
+
+	const handleSortChange = (sortType) => {
+		dispatch(setSortBy(sortType));
+	};
+
+	const handleToggleDeleted = (showDeleted) => {
+		dispatch(setShowDeleted(showDeleted));
+	};
+
+	const handleShowDeletedListings = () => {
+		dispatch(setShowDeleted(true));
+	};
+
+	const renderTableRows = () => {
+		const source = sortedListings;
+
+		return source.map((listing) => {
+			const id = listing.id || listing._id;
+			const title =
+				(listing.fields && listing.fields["mandatory-title"]) || "Untitled";
+			const modifiedAt =
+				listing.editedAt ||
+				listing.updatedAt ||
+				listing.createdAt ||
+				new Date();
+			const isDeleted = !!listing.deletedAt;
+
+			return (
+				<tr
+					key={id}
+					className={isDeleted ? styles["listingScreen__row--deleted"] : ""}
+				>
+					<td>
+						{new Date(modifiedAt).toLocaleDateString("en-AU", {
+							day: "numeric",
+							month: "short",
+							year: "2-digit",
+						})}
+					</td>
+					<td>
+						<div className={styles.titleContainer}>
+							<span
+								onClick={() => handleEditClick(listing)}
+								className={
+									isDeleted ? styles["title--deleted"] : styles["titleLink"]
+								}
+							>
+								{title}
+							</span>
+							{isDeleted && <span className={styles.deletedTag}>Deleted</span>}
+						</div>
+					</td>
+					<td>
+						<div className={styles.actions}>
+							{!isDeleted && (
+								<span
+									onClick={() => handleEditClick(listing)}
+									className={styles.actionIcon}
+									title="Edit"
+								>
+									<FontAwesomeIcon icon={faPen} />
+								</span>
+							)}
+
+							{!isDeleted && (
+								<span
+									onClick={() => handleDeleteClick(listing)}
+									className={styles.actionIcon}
+									title="Delete"
+								>
+									<FontAwesomeIcon icon={faTrash} />
+								</span>
+							)}
+							{isDeleted && (
+								<Button
+									onClick={() => handleRestoreClick(listing)}
+									buttonType="outlinedAction"
+									disabled={isRestoring}
+									narrow
+									leftIcon={isRestoring ? "sync" : "undo"}
+									loading={isRestoring}
+								>
+									{isRestoring ? "Restoring..." : "Restore"}
+								</Button>
+							)}
+						</div>
+					</td>
+				</tr>
+			);
+		});
+	};
+
+	// Check for content management permission
+	if (
+		!PlussCore.Session.validateAccess(
+			auth.site,
+			values.permissionFeatureBuilderContent,
+			auth,
+		)
+	) {
+		return (
+			<div className="hub-wrapperContainer">
+				<FeatureBuilderSidebar />
+				<div className="hub-contentWrapper">
+					<div className={styles.welcomeContainer}>
+						<div className={styles.welcomeHeader}>
+							<Text type="h1" className={styles.welcomeTitle}>
+								Access Restricted
+							</Text>
+							<Text type="body" className={styles.welcomeSubtitle}>
+								You don't have permission to manage feature content. Please
+								contact your administrator if you need access.
+							</Text>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	// Don't show full-screen loading, use skeleton states instead
+
+	return (
+		<ErrorBoundary
+			title="Unable to load listings"
+			message="If you continue to experience issues loading your listings, please try refreshing the page or contact support."
+			onRetry={handleSmartRefresh}
+		>
+			<div className="hub-wrapperContainer">
+				<FeatureBuilderSidebar />
+				<div className="hub-headerContentWrapper">
+					<Header />
+					<div className={styles.root}>
+						<div className={styles.header}>
+							<div className={styles.headerText}>
+								<Text type="h1">Manage Your {displayName} Listings</Text>
+								<Text type="bodyLarge">
+									View, edit, and manage all your {displayName.toLowerCase()}{" "}
+									listings
+								</Text>
+							</div>
+							{sortedListings.length > 0 && (
+								<div className={styles.headerActions}>
+									<div className={styles.sortSection}>
+										<Text type="help" className={styles.uppercase}>
+											SORT BY
+										</Text>
+										{SortButtonGroup && (
+											<SortButtonGroup
+												currentSort={sortBy}
+												onSortChange={handleSortChange}
+											/>
+										)}
+									</div>
+									<div className={styles.toggleContainer}>
+										<Text type="body">Show deleted {displayName} listing</Text>
+										<ToggleSwitch
+											isActive={showDeleted}
+											onChange={handleToggleDeleted}
+										/>
+									</div>
+								</div>
+							)}
+						</div>
+
+						{/* Action errors (delete, restore, toggle) */}
+						{showActionError && (
+							<ErrorMessage
+								message={actionError}
+								variant="error"
+								onClose={() => setShowActionError(false)}
+							/>
+						)}
+
+						{/* Success messages */}
+						{deleteMessage && deleteMessage.includes("success") && (
+							<ErrorMessage
+								message={deleteMessage}
+								variant="success"
+								onClose={() => setDeleteMessage("")}
+							/>
+						)}
+
+						{/* General listing errors */}
+						{error && (
+							<ErrorMessage
+								message={`Error loading listings: ${error}`}
+								variant="error"
+							/>
+						)}
+
+						{!hasDefinition && !isDefinitionLoading && (
+							<div className={styles.empty}>
+								<div className="emptyState" />
+								<p>
+									No feature definition exists. Please create a feature
+									definition first before creating listings.
+								</p>
+								<Button
+									buttonType="primary"
+									leftIcon="plus"
+									onClick={handleCreateClick}
+									isActive={true}
+								>
+									Add {displayName}
+								</Button>
+							</div>
+						)}
+
+						{definitionError && (
+							<ErrorMessage
+								message={`Error loading feature definition: ${definitionError}`}
+								variant="error"
+							/>
+						)}
+
+						{isLoading ? (
+							<div className={styles.loadingContainer}>
+								<LoadingState message="Loading data..." />
+							</div>
+						) : sortedListings.length > 0 ? (
+							<Table className="plussTable" striped bordered condensed hover>
+								<thead>
+									<tr key="header">
+										<th className={styles.dateColumn}>Last modified at</th>
+										<th>Title</th>
+										<th className={styles.actionsColumn}>Actions</th>
+									</tr>
+								</thead>
+								<tbody>{renderTableRows()}</tbody>
+							</Table>
+						) : hasDefinition ? (
+							// Smart empty state logic
+							activeListings.length === 0 &&
+							deletedListings.length > 0 &&
+							!showDeleted ? (
+								<div className={styles.empty}>
+									<div className="emptyState" />
+									<p>
+										You have {deletedListings.length} deleted{" "}
+										{displayName.toLowerCase()} listing
+										{deletedListings.length > 1 ? "s" : ""}.
+									</p>
+									<div className={styles.emptyActions}>
+										<Button
+											buttonType="primary"
+											leftIcon="plus"
+											onClick={handleCreateClick}
+											className={styles.emptySecondaryButton}
+											isActive
+										>
+											Add new {displayName}
+										</Button>
+										<Button
+											buttonType="secondary"
+											leftIcon="eye"
+											onClick={handleShowDeletedListings}
+											className={styles.emptyPrimaryButton}
+										>
+											Show deleted listing
+											{deletedListings.length > 1 ? "s" : ""}
+										</Button>
+									</div>
+								</div>
+							) : (
+								// Regular empty state
+								<div className={styles.empty}>
+									<div className="emptyState" />
+									<p>No {displayName.toLowerCase()} listings found.</p>
+									<Button
+										buttonType="primary"
+										leftIcon="plus"
+										onClick={handleCreateClick}
+										isActive
+									>
+										Add {displayName}
+									</Button>
+								</div>
+							)
+						) : null}
+
+						<DeleteConfirmationPopup
+							isOpen={showDeleteConfirm}
+							listing={listingToDelete}
+							onConfirm={handleConfirmDelete}
+							onCancel={handleCancelDelete}
+							isDeleting={isDeleting}
+						/>
+					</div>
+				</div>
+			</div>
+		</ErrorBoundary>
+	);
+};
+
+export default withRouter(ListingScreen);