Supplier Folders

SupplierFolders Component Documentation

Overview

The SupplierFolders component in the Rifbid application provides a user interface for suppliers to upload and manage supporting documents such as logos, case studies, resumes, certifications, awards, and business plans. These documents can be used to enhance AI-generated proposals.

Key Features

1. Document Folders: Displays folders for different document types.
2. Document Upload: Allows users to upload and manage documents.
3. Real-time Updates: Uses Firestore’s real-time updates to display the latest documents.

Dependencies

• React: For building the component.
• Firebase: For authentication and Firestore database interactions.
• React Icons: For displaying folder icons.
• Custom UI Components: Various UI components for displaying folders and documents.

State Management

The component uses useState and useEffect hooks for managing state and side effects.

const [activeFolder, setActiveFolder] = useState<Folder | null>(null);
const [supplierDocs, setSupplierDocs] = useState<SupplierSupportingDocs | null>(
  null
);

Fetching Supplier Documents

Fetches and listens for real-time updates to the supplier’s supporting documents from Firestore.

useEffect(() => {
  const user = auth.currentUser;
  if (!user) return;

  const docRef = doc(db, "supplierSupportingDocs", user.uid);
  const unsubscribe = onSnapshot(docRef, (doc) => {
    if (doc.exists()) {
      setSupplierDocs(doc.data() as SupplierSupportingDocs);
    } else {
      setSupplierDocs(null);
    }
  });

  return () => unsubscribe();
}, [auth.currentUser]);

Rendering the Component

Displays a grid of document folders or the contents of a selected folder.

return (
  <div className="mx-auto max-w-4xl p-4">
    {activeFolder ? (
      <SupplierFolder
        activeFolder={activeFolder}
        removeActiveFolder={() => setActiveFolder(null)}
        supplierDocs={supplierDocs}
      />
    ) : (
      <>
        <h1 className="mb-4 text-center text-2xl font-bold md:text-4xl">
          Enhance AI proposals by uploading files to your account.
        </h1>
        <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
          {folders.map((folder, index) => (
            <div
              key={index}
              onClick={() => setActiveFolder(folder)}
              className="folders-card relative mt-4 flex cursor-pointer flex-col items-center rounded-xl border p-6 shadow-lg duration-300 ease-in-out md:me-3 md:mt-8"
            >
              <MdOutlineAdsClick
                color="#66cc68"
                className="absolute right-2 top-2"
              />
              {folder.icon}
              <h2 className="mt-2 text-center text-sm font-medium font-semibold hover:text-white md:text-lg">
                {folder.name}
              </h2>
              <p className="text-slate mt-4 hidden text-left text-center md:block">
                {folder.description}
              </p>
            </div>
          ))}
        </div>
      </>
    )}
  </div>
);

SupplierFolder Component Documentation

Overview

The SupplierFolder component displays the contents of a specific folder and provides functionality for uploading new documents to that folder.

Key Features

1. File Upload: Allows users to upload files to a selected folder.
2. File Display: Shows the list of uploaded files in the selected folder.
3. Drag and Drop: Supports drag-and-drop file upload functionality.

Dependencies

• React: For building the component.
• Firebase: For authentication and Firestore database interactions.
• Custom UI Components: Various UI components for displaying and uploading files.
• React Icons: For displaying navigation icons.

State Management

The component uses useState and useRef for managing state and file input.

const [files, setFiles] = useState<File[]>([]);
const [isLoading, setIsLoading] = useState(false);
const fileInputRef = useRef<HTMLInputElement | null>(null);

Uploading Files

Uploads files to Firebase Storage and updates the Firestore document.

const uploadFile = async () => {
  setIsLoading(true);
  const user = auth.currentUser;
  if (files.length === 0 || !user) {
    setIsLoading(false);
    return toast("No File Uploaded");
  }
  try {
    await uploadFilesToFireBase(files, user.uid, activeFolder.name);
    setFiles([]);
    if (fileInputRef.current) fileInputRef.current.value = "";
  } catch (error) {
    console.error("Error uploading file:", error);
  } finally {
    setIsLoading(false);
  }
};

Rendering the Component

Displays the file upload interface and the list of uploaded files.

return (
  <>
    <div className="relative mx-auto max-w-4xl rounded-lg bg-white p-6 shadow">
      <button
        onClick={removeActiveFolder}
        className="text-blue-500 absolute left-3 top-3 flex items-center"
      >
        <FaArrowLeft className="mr-2" /> Go back
      </button>
      <DragNdrop
        setFiles={setFiles}
        files={files}
        width={"100%"}
        height={"100%"}
        acceptedFiles={acceptedFiles}
      />
      <div className="relative">
        <h1 className="mt-5 text-xl font-semibold md:mt-8">
          {activeFolder.name} Folder
        </h1>
        <Button
          onClick={uploadFile}
          className="mt-2 rounded px-4 py-2 font-bold"
        >
          {isLoading ? "Uploading..." : "Upload Files"}
        </Button>
      </div>
    </div>
    <div className="mx-auto mt-10 rounded-lg bg-white p-6 shadow">
      {docs && docs.length > 0 ? (
        <div>
          <h1 className="mb-4 text-center text-2xl font-semibold md:text-4xl">
            Your {activeFolder.name}
          </h1>
          <FileDisplay files={docs} folderName={activeFolder.name} />
        </div>
      ) : (
        <div>
          <h1>You have no uploads</h1>
        </div>
      )}
    </div>
  </>
);

Conclusion

This documentation provides an overview of the SupplierFolders and SupplierFolder components, their key features, state management, and critical functions. For further details, refer to the components’ source code in the project directory.