@plusscommunities/pluss-feature-builder-web-c 1.0.7 → 1.0.9-beta.3

package/src/screens/ListingScreen.jsx

@@ -1,477 +0,0 @@
-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);