Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jay-byte389/AMS/llms.txt

Use this file to discover all available pages before exploring further.

AMS fetches its doctor roster from a MockAPI endpoint on every app launch and whenever the Home screen mounts. Each doctor card displays avatar, name, qualification, department, star rating, and comment count. Users can mark any doctor as a favourite — that preference is persisted to AsyncStorage and survives app restarts. A dedicated Doctors listing screen lets users sort and filter the full roster in multiple ways before diving into a doctor’s full profile.

​
Doctor Data Shape

Each object returned by GET /Doctors contains the following fields:
FieldTypeDescription
idstringUnique MockAPI record ID
namestringDoctor’s display name
qualificationstringAbbreviated degree, e.g. "M.D."
departmentstringMedical speciality / department
avatarstringRemote image URL
ratingsnumberAverage star rating
commentsnumberTotal comment count
experiencenumberYears of experience
focusstringPrimary clinical focus area
profilestringBiographical profile paragraph
careerpathstringCareer history narrative
highlightsstringKey professional highlights
reviewsnumberTotal review count (falls back to 40)

​
Fetching Doctors

Doctors are loaded via the fetchDoctors thunk, which calls GET /Doctors through the Axios instance configured at https://6a61e9edda10c59c180a02b0.mockapi.io: 
// src/redux/thunk/doctorThunk.js
export const fetchDoctors = createAsyncThunk(
  'doctors/fetchDoctors',
  async (_, { rejectWithValue }) => {
    try {
      const data = await fetchDoctorsAPI(); // GET /Doctors
      return data;
    } catch (error) {
      return rejectWithValue(error.response?.data || error.message);
    }
  }
);
The fulfilled case populates doctorsList in the doctors slice: 
// HomeScreen.jsx — dispatch on mount
useEffect(() => {
  dispatch(fetchDoctors());
}, [dispatch]);

// Reading state
const { doctorsList: doctors, loading } = useSelector(state => state.doctors);
While doctors are loading, HomeScreen shows an ActivityIndicator. Once resolved, the list renders in a FlatList.

​
Home Screen Doctor Card

Each card in the HomeScreen FlatList displays:
  • Avatar — remote image loaded with source={{ uri: item.avatar }}
  • Name + Qualification — displayed together as {item.name} {item.qualification}
  • Department — shown as the speciality subtitle
  • Star rating chip — item.ratings alongside a star icon
  • Comment chip — item.comments alongside a comment icon
  • Favourite toggle — heart icon that dispatches toggleFavourtie(item.id); filled when favouriteIds.includes(item.id)

​
Doctor Detail Screen (DoctorInfo)

Navigating to the Info route (from HomeScreen or Doctors) passes the full doctor object as a route parameter: 
navigation.navigate('Info', { doctor: item });
The DoctorInfo screen renders a two-section layout:
  • Experience badge — shows {doctor.experience} Years Experience
  • Focus card — highlights doctor.focus
  • Name card — doctor.name + doctor.qualification + doctor.department
  • Stats row — star rating, review count (doctor.reviews || 40), and availability hours (Mon-Sat / 9:00AM - 5:00PM)
  • Profile — doctor.profile paragraph
  • Career Path — doctor.careerpath paragraph
  • Highlights — doctor.highlights paragraph
  • Schedule button — switches the view to the calendar/slot selector

​
Disabling Fully-Booked Calendar Dates

DoctorInfo computes markedDates from the Redux appointments list: 
const markedDates = useMemo(() => {
  const bookedByDay = {};

  appointments.forEach(item => {
    if (item && String(item.doctorId) === doctorId && item.status !== 'Cancelled') {
      const monthNumber = monthNumbers[item.appointmentMonth];
      const day = String(item.appointmentDay).padStart(2, '0');
      const dateString = `${new Date().getFullYear()}-${monthNumber}-${day}`;
      if (!bookedByDay[dateString]) bookedByDay[dateString] = new Set();
      bookedByDay[dateString].add(item.appointmentTime);
    }
  });

  const result = {};
  Object.keys(bookedByDay).forEach(dateString => {
    const allSlotsBooked = timeSlots.every(slot =>
      bookedByDay[dateString].has(slot.time)
    );
    if (allSlotsBooked) result[dateString] = { disabled: true };
  });

  return result;
}, [appointments, doctor, selectedDate]);

​
Doctors Listing Screen

Navigating from the Home screen via the Doctors button opens Doctors.jsx, which receives the full doctor array as route.params.doctors. The screen provides a horizontal sort/filter bar with five modes:
TabIndexBehaviour
A→Z0Sorts by name alphabetically
Star icon1Sorts by ratings descending
Heart icon2Filters to doctors in favouriteIds
Venus icon3Filters by gender === 'Male'
Mars icon4Filters by gender === 'Female'
When the Heart tab (index 2) is active, the list switches to the Favourites component which groups doctors by department in an expandable accordion view. Tapping an Info button on any card navigates to DoctorInfo: 
navigation.navigate('Info', { doctor: item, selectedTab });

​
Favourites

Favourite state lives in the doctors Redux slice as a plain favouriteIds array: 
// src/redux/slices/doctorSlice.js
initialState: {
  doctorsList: [],
  favouriteIds: [],   // array of doctor IDs (strings)
  loading: false,
  error: null,
},
Two actions manage this array: 
// Toggle a single doctor on/off
dispatch(toggleFavourtie(doctorId));

// Hydrate from AsyncStorage on launch
dispatch(setFavourite(savedIds)); // savedIds: string[]
Favourites are persisted to AsyncStorage under the @favourite_doctors key. HomeScreen loads them on mount and saves them whenever the array changes: 
// Load on mount
useEffect(() => {
  loadFavourites().then(ids => {
    if (ids?.length) dispatch(setFavourite(ids));
  });
}, []);

// Persist on change
useEffect(() => {
  saveFavourites(favouriteIds);
}, [favouriteIds]);
The favouriteIds array stores raw MockAPI doctor IDs (e.g. "3", "7"). When checking whether a doctor is favourited on a card, use favouriteIds.includes(item.id) — make sure item.id is the same type (string) that MockAPI returns.

Build docs developers (and LLMs) love

Get started for freeTalk to us