Shared UI Components

Shared UI Components

The campus-template provides a set of reusable UI components and logic modules designed to maintain consistency across the CMS and User interfaces. These components handle authentication, data fetching, and common UI patterns.

Authentication & Routing

PrivateRoutes

The PrivateRoutes component is a wrapper used to protect sensitive routes. It checks for a valid authentication token and user role via the AuthContextProvider.

Usage: Wrap any route that requires authentication within the PrivateRoutes element in your main router configuration.

import PrivateRoutes from './Screens/PrivateRoutes';

<Route element={<PrivateRoutes />}>
    <Route path="/admin/dashboard" element={<AdminHomePage />} />
    <Route path="/admin/publications" element={<PublicationManager />} />
</Route>

• Logic: If the loading state is true, it displays a loading indicator. If no token is found, it redirects the user to the /signIn page.

Form & Data Entry

DateInputFields

Note: This is a shared component used primarily within CMS forms.

Used to standardize date selection across different modules (e.g., Publications, Team member joining dates). It ensures the data format matches the backend expectations.

Usage:

<DateInputFields 
  label="Published Date" 
  value={formData.date} 
  onChange={(newDate) => handleDateChange(newDate)} 
/>

FileUpload

Used for handling multipart/form-data requirements, such as uploading gallery images or publication documents.

Usage:

// Used in conjunction with API services like addPublication or addMultipleImage
const handleUpload = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  await addPublication(formData);
};

Navigation & Layout

ReusablePagination

A standardized pagination component used to navigate through large datasets like Gallery items or Publication lists.

Usage:

<ReusablePagination 
  totalItems={allFaqs.length} 
  itemsPerPage={10} 
  onPageChange={(page) => setCurrentPage(page)} 
/>

Shared API Services

The template uses a standardized Axios-based service layer. All API modules (e.g., faqApi.js, teamApi.js, publicationApi.js) follow a consistent pattern for CRUD operations.

Authorization Header Logic

Most POST, PATCH, and DELETE requests automatically include the Bearer token retrieved from localStorage.

const getAuthToken = () => localStorage.getItem("authToken");

const headers = {
    'Authorization': `Bearer ${token}`
};

Common API Methods

| Method | Purpose | Authentication | | :--- | :--- | :--- | | getAll[Entity] | Fetches all records for a module. | No | | get[Entity]ById | Fetches a single record by ID. | No | | add[Entity] | Creates a new record. | Yes | | update[Entity]ById | Updates an existing record. | Yes | | delete[Entity] | Removes a record from the database. | Yes |

Utility Functions

Shared utility helpers are located in src/Components/utilityFunctions.

extractDate(isoString)

Converts ISO date strings into human-readable formats for display in the UI.

• Input: String (ISO Date)
• Output: String (Formatted Date)

videoIdParser(url)

Extracts the unique Video ID from various YouTube URL formats to be used with the YouTube component.

• Input: String (YouTube URL)
• Output: String (Video ID)

Global Media Helpers

Publication File Downloader

A shared function to handle secure file downloads from the server. It manages blob conversion and triggers the browser download prompt.

Usage:

import { downloadPublicationFile } from './publicationApi';

<Button onClick={() => downloadPublicationFile('report.pdf')}>
    Download Report
</Button>

Gallery Filter Logic

Used in GalleryPage.jsx to separate media types dynamically using the galleryType attribute.

const videoGallery = data.filter(item => item.galleryType === 'Video');
const imageGallery = data.filter(item => item.galleryType === 'Image');