Profile Module

Purpose and Scope

The Profile Module provides a read-only display of student personal information retrieved from the JIIT portal. It organizes student data into seven logical sections: personal information, academic details, contact information, family information, current address, permanent address, and educational qualifications.

This page documents the Profile component implementation, data flow, and display structure. For navigation integration, see Header. For the underlying data abstraction layer, see Data Layer & API Integration.

Sources: jportal/src/components/Profile.jsx1-157

Component Architecture

The Profile module consists of a single component Profile that receives the portal instance (w) and profile data state management props from AuthenticatedApp.

Component Structure

Sources: jportal/src/components/Profile.jsx6-157

Props Interface

Sources: jportal/src/components/Profile.jsx6

Data Flow

The Profile module implements a simple caching strategy to avoid redundant API calls. Data is fetched once and stored in the parent component's state.

Data Fetching Flow Diagram

Sources: jportal/src/components/Profile.jsx9-29

Implementation Details

The caching logic is implemented in the useEffect hook:

useEffect(() => {
  const fetchProfileData = async () => {
    // Return early if data is already cached
    if (profileData) {
      setLoading(false);
      return;
    }

    setLoading(true);
    try {
      const data = await w.get_personal_info();
      setProfileData(data);
    } catch (error) {
      console.error("Failed to fetch profile data:", error);
    } finally {
      setLoading(false);
    }
  };

  fetchProfileData();
}, [w, profileData, setProfileData]);

Sources: jportal/src/components/Profile.jsx9-29

Data Structure

The profile data follows a specific schema returned by the portal API, consisting of two main sections: generalinformation and qualification.

Profile Data Schema

Sources: jportal/src/components/Profile.jsx39-41 jportal/src/assets/fakedata.json (profile section)

Mock Data Example

The MockWebPortal class returns profile data from fakedata.json:

async get_personal_info() {
  return fakeData.profile;
}

Sources: jportal/src/components/MockWebPortal.js93-95

UI Layout and Sections

The Profile component renders seven distinct card sections, each grouping related information. All sections use the InfoRow helper component for consistent display.

Section Breakdown

Sources: jportal/src/components/Profile.jsx43-146

Section Details Table

Sources: jportal/src/components/Profile.jsx45-137

Component Implementation

Loading State

The component displays a centered loading message while fetching data:

if (loading) {
  return (
    <div className="text-foreground flex items-center justify-center py-4 h-[calc(100vh_-_<header_height>-<navbar_height>)]">
      Loading profile...
    </div>
  );
}

Sources: jportal/src/components/Profile.jsx31-37

InfoRow Helper Component

The InfoRow component provides consistent formatting for label-value pairs with responsive layout:

function InfoRow({ label, value }) {
  return (
    <div className="flex flex-col sm:flex-row sm:justify-between py-1">
      <span className="text-muted-foreground">{label}:</span>
      <span className="font-medium">{value || "N/A"}</span>
    </div>
  );
}

Key features:

• Vertical layout on mobile (flex-col)
• Horizontal layout on larger screens (sm:flex-row sm:justify-between)
• Displays "N/A" for missing values
• Uses theme colors (text-muted-foreground, font-medium)

Sources: jportal/src/components/Profile.jsx150-157

Card Structure

Each section follows this pattern:

<div className="bg-card p-4 rounded-lg shadow-lg">
  <h2 className="text-xl font-semibold mb-4">Section Title</h2>
  <div className="grid">
    <InfoRow label="Field Name" value={info.fieldname} />
    {/* More InfoRow components */}
  </div>
</div>

Sources: jportal/src/components/Profile.jsx45-137

Styling and Theming

The Profile module uses theme-aware styling through CSS custom properties defined in the theme system.

Theme Integration

Sources: jportal/src/components/Profile.jsx43-137 jportal/src/index.css7-88

Responsive Design

The layout adapts to different screen sizes:

• Mobile (< 640px): Labels and values stack vertically
• Tablet/Desktop (≥ 640px): Labels on left, values on right
• Container: Scrollable with padding (pt-2 pb-4 px-3)

Sources: jportal/src/components/Profile.jsx43 jportal/src/components/Profile.jsx152-154

Navigation Integration

The Profile module is accessible via the bottom navigation bar at route /profile.

Navigation Configuration

From Navbar.jsx:

const navItems = [
  // ... other items
  { name: " PROFILE ", path: "/profile", IconComponent: ProfileIcon },
];

Sources: jportal/src/components/Navbar.jsx14

Routing

The route is defined in AuthenticatedApp:

<Route path="/profile" element={<Profile w={w} profileData={profileData} setProfileData={setProfileData} />} />

Sources: Referenced from architectural diagrams

Error Handling

The Profile module implements basic error handling with console logging:

try {
  const data = await w.get_personal_info();
  setProfileData(data);
} catch (error) {
  console.error("Failed to fetch profile data:", error);
}

Notes:

• Errors are logged but not displayed to the user
• Loading state is cleared regardless of success or failure
• Missing fields display "N/A" instead of empty strings

Sources: jportal/src/components/Profile.jsx19-24

Demo Mode Behavior

In demo mode, the MockWebPortal class provides static profile data from fakedata.json. The profile data structure is identical in both real and demo modes, ensuring seamless switching.

Sources: jportal/src/components/MockWebPortal.js93-95 jportal/src/assets/fakedata.json (profile section)

Key Implementation Files