Users-Wrench/src/components/Referral/ReferralDisplay.jsx

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { toast } from "react-toastify";
import usersService from '../../services/UsersService';
import InputCom from '../Helpers/Inputs/InputCom';
import LoadingSpinner from '../Spinners/LoadingSpinner';

import {Formik, Form} from 'formik'
import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email('Wrong email format')
      .min(3, 'Minimum 3 characters')
      .max(50, 'Maximum 50 characters')
      .required('Email is required'),
    firstname: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Firstname is required'),
    lastname: Yup.string()
      .min(3, 'Minimum 3 characters')
      .max(25, 'Maximum 25 characters')
      .required('Lastname is required'),
  })
  
  const initialValues = {
    firstname: '',
    lastname: '',
    email: ''
  }

function ReferralDisplay() {
    const apiCall = new usersService() // GET API CALL
    const navigate = useNavigate()

    let [refHistoryReload, setRefHistoryReload] = useState(false) // Determines when referral history reloads

    // STATE TO HOLD REFERRAL HISTORY
    let [referralList, setReferralList] = useState({
        loading: true,
        error: false,
        data: []
    }) 

    let [error, setError] = useState({message: '', loading: false, status: false}) // for displaying error message on the page

    //function to call referral history API
    const allReferrals = () => {
        setReferralList({
            loading: true,
            error: false,
            data: []
        })
        apiCall.getReferralHx().then((res)=>{
            setReferralList((prev)=>{
                return {...prev, loading: false, data:[...res.data.result_list]}
            })
        }).catch((error)=>{
            setReferralList(prev => ({...prev, loading: false, error: true}))
        })
    }

    //FUNCTION TO SEND REFERRAL MESSAGE
    const sendReferralMsg = (postData) => {
        apiCall.sendReferralMsg(postData).then((res)=>{
            if(res.data.internal_return < 0){
                setError({message:'Email already referred', loading: false, status: false})
                return
            }else{
                toast.success("Message Sent");
                setError({message:'', loading: false, status: true})
                setRefHistoryReload(prev => !prev)
            }
        }).catch((error)=>{
            setError({message:'Opps! an error occured, try again later', loading: false, status: false})
        })
    }

    //FUNCTION TO HANDLE SUBMIT
    const handleSubmit = (values, helpers) => {
        setError({message: '', loading: true, status: false})

        var postData = {
            uid: localStorage.getItem("uid"),
            member_id: localStorage.getItem("member_id"),
            sessionid: localStorage.getItem("session_token"),
            action: 11032,
            ...values
            };

        sendReferralMsg(postData) // FUNCTION TO SEND REFERRAL MESSAGE
    }

    useEffect(()=>{
        allReferrals()
    }, [refHistoryReload])

  return (
    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
            <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
                <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Send Referral</h2>
                <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
                    {(props)=>(
                        <Form className='referral-info'>
                            {/* Firstname */}
                            <div className="field w-full mb-6">
                            <InputCom
                                label="Firstname"
                                type="text"
                                name="firstname"
                                placeholder="Firstname"
                                value={props.values.firstname}
                                inputHandler={props.handleChange}
                                blurHandler={props.handleBlur}
                            />
                            {(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
                            </div>

                            {/* Lastname */}
                            <div className="field w-full mb-6">
                            <InputCom
                                label="Lastname"
                                type="text"
                                name="lastname"
                                placeholder="Lastname"
                                value={props.values.lastname}
                                inputHandler={props.handleChange}
                                blurHandler={props.handleBlur}
                            />
                            {(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
                            </div>

                            <div className="field w-full mb-6">
                            <InputCom
                                label="Email"
                                type="text"
                                name="email"
                                placeholder="Email"
                                value={props.values.email}
                                inputHandler={props.handleChange}
                                blurHandler={props.handleBlur}
                            />
                            {(props.errors.email && props.touched.email) && <p className="text-sm text-red-500">{props.errors.email}</p>}
                            </div>

                            <hr />
                            {error.message != '' && <p className='text-base text-red-500 py-2'>{error.message}</p>}
                            <div className='referral-btn flex justify-end items-center py-4 border-b-4'>
                                {error.loading ?
                                <LoadingSpinner size='6' color='sky-blue' />
                                :
                                <button type='submit' className='text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md'>Send Message</button>
                                }
                            </div>
                        </Form>
                    )}
               </Formik>
            </div>
        </div>

        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
            <div className="referral w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                <h2 className='mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
                {referralList.loading ? 
                (
                <LoadingSpinner size='32' color='sky-blue' />
                )
                :
                (
                <table className="referral-list w-full table-auto border-collapse text-left">
                    <thead className='border-b-2'>
                        <tr className='text-slate-600'>
                        <th className="p-3">Added/Name</th>
                        <th className="p-3">Email</th>
                        <th className="p-3">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {referralList.data.length ? 
                        referralList.data.map((item, index) => (
                            <tr key={index} className='text-slate-500'>
                                <td className="p-3">{item.added_date} / {item.firstname} {item.lastname}</td>
                                <td className="p-3">{item.email}</td>
                                <td className="p-3">{item.status}</td>
                            </tr>
                        ))
                        :
                        (
                        referralList.error ?
                        <tr className='text-slate-500'>
                            <td colSpan={3}>Opps! couldn't get referral history. Try reloading the page</td>
                        </tr>
                        :
                        (
                        <tr className='text-slate-500'>
                            <td colSpan={3}>No Item Found on referral List</td>
                        </tr>
                        )
                        )
                        }
                    </tbody>
                </table>
                )
                }
            </div>
        </div>
    </div>
  )
}

export default ReferralDisplay