import HOST

frontend/src/components/AppointmentBooking.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import ReactCalendar from 'react-calendar'
 import { add, format, differenceInMinutes } from 'date-fns'
 import 'tailwindcss/tailwind.css'
+import { HOST } from '../api'
 
 function AppointmentBooking({
   setSelectedDateTime,

frontend/src/components/ClientAppointmentReview.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { format } from 'date-fns'
 import { useNavigate } from 'react-router-dom'
+import { HOST } from '../api'
 
 function ClientAppointmentReview({
   counsellor,

frontend/src/components/NavBar.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { HOST } from '../api'
 
 const NavBar = ({ loggedInUser, setLoggedInUser }) => {
   const navigate = useNavigate()

frontend/src/components/ViewCounsellors.jsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'
 import 'tailwindcss/tailwind.css'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
+import { HOST } from '../api'
 
 const counsellorPicture =
   process.env.PUBLIC_URL + '/images/counsellor-picture.png'

frontend/src/pages/AllAppointments.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { Tab, Switch } from '@headlessui/react'
 import NavBar from '../components/NavBar'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 const Appointments = () => {
   const [activeAppointments, setActiveAppointments] = useState([])

frontend/src/pages/AppointmentDetails.jsx

@@ -7,6 +7,7 @@ import ReactCalendar from 'react-calendar'
 import 'react-calendar/dist/Calendar.css'
 import Draggable from 'react-draggable'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 const AppointmentDetails = () => {
   const { id } = useParams()

frontend/src/pages/ClientBooking.jsx

@@ -7,6 +7,7 @@ import SurveyQuestion from '../components/SurveyQuestion'
 import MainIssue from '../components/MainIssue'
 import ClientAppointmentReview from '../components/ClientAppointmentReview'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 function ClientBooking() {
   const { user, loading } = useAuth()

frontend/src/pages/ClientRegistration.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import '../App.css'
 import { useNavigate } from 'react-router-dom'
+import { HOST } from '../api'
 
 const style = {
   form: {

frontend/src/pages/CounsellorProfile.jsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 import NavBar from '../components/NavBar'
 import { useNavigate } from 'react-router-dom'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 const counsellorPicture =
   process.env.PUBLIC_URL + '/images/counsellor-profile-photo.png'

frontend/src/pages/CounsellorsRegistration.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 /////
 function CounsellorRegistration() {
   const [username, setUsername] = useState('')

frontend/src/pages/Home.jsx

@@ -6,6 +6,7 @@ import ViewCounsellors from '../components/ViewCounsellors'
 import Hero from '../components/Hero'
 import Testimonials from '../components/Testimonials'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 function Home() {
   const { user, loading } = useAuth()

frontend/src/pages/ManageAccounts.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import NavBar from '../components/NavBar'
 import { useNavigate } from 'react-router-dom'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 const ManageAccounts = () => {
   const [counsellors, setCounsellors] = useState([])

frontend/src/pages/MyAppointment.jsx

@@ -3,6 +3,7 @@ import NavBar from '../components/NavBar'
 import StripeCheckout from 'react-stripe-checkout'
 import { useNavigate } from 'react-router-dom'
 import useAuth from '../hooks/useAuth'
+import { HOST } from '../api'
 
 function MyAppointment() {
   const [appointment, setAppointment] = useState(null)

frontend/src/pages/UserLogin.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import Cookies from 'js-cookie'
+import { HOST } from '../api'
 
 function UserLogin() {
   const [email, setEmail] = useState('')