fixed product url refresh on successful subscription

.env

@@ -2,14 +2,14 @@ SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.development

@@ -2,14 +2,15 @@ SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
+

.env.production

@@ -3,6 +3,7 @@ REACT_APP_NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
 
 # login footer links
 REACT_APP_HOME_LINK='https://www.mermsemr.com/'

.env.qa

@@ -0,0 +1,15 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     extra_hosts:
       - api.mermsemr.com:10.10.33.15
       - devapi.mermsemr.com:10.10.33.15
-      - dev-socket.mermsemr.com:10.10.33.15
+      - devsocket.mermsemr.com:10.10.33.15
       - socket.mermsemr.com:10.10.33.15
       - dev-media.mermsemr.com:10.10.33.15
       - media.mermsemr.com:10.10.33.15

src/component/auth/CSignup.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
+import { useDispatch } from 'react-redux'
 
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
 import { useMutation } from '@tanstack/react-query';
 import { completeRegistration, verifyEmail } from '../../services/services';
+import { updateUserDetails } from '../../store/UserDetails'
 
 import { IoMdArrowDropdown } from "react-icons/io";
 
@@ -29,6 +31,8 @@ export default function CSignup() {
 
     const {jwt} = useParams()
     
+    const dispatch = useDispatch()
+
     const navigate = useNavigate()
 
     const [user, setUser] = useState(null)
@@ -51,15 +55,19 @@ export default function CSignup() {
         return completeRegistration(fields)
     },
     onSuccess: (res) => {
-        const {token, room} = res?.data?.data
+        if(res?.data?.resultCode != '0'){
-        if(token){
+            throw({message: res?.data?.resultDescription})
-            localStorage.setItem('token', token)
-            localStorage.setItem('room', room)
-            // const data = {token}
-            // dispatch(updateUserDetails({ ...data }));
-            navigate('/dash') // later add redux to dispatch state
         }
-    }
+        const {token, room, uid} = res?.data
+        if(!token || !room){
+            throw({message: 'something went wrong, try again!'})
+        }
+        localStorage.setItem('token', token)
+        localStorage.setItem('room', room)
+        localStorage.setItem('uid', uid)
+        dispatch(updateUserDetails({ ...res?.data }));
+        navigate('/dash') // later add redux to dispatch state
+    },
     // onError: (err) => {
     //     console.log('err', err)
     // }
@@ -70,7 +78,7 @@ export default function CSignup() {
         country : values.country,    
         username: values.username,
         password: values.password,
-        verify_link: user.verify_link
+        verify_link: jwt
     }
     cSignup.mutate(reqData)
   }
@@ -196,7 +204,7 @@ export default function CSignup() {
                                                 }
 
                                                 <div className="col-12 mt-3 text-center">
-                                                    <Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
+                                                    <Link to={siteLinks.signup} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
                                                 </div>
                                                 
                                                 <div className="col-12 mt-3 text-center">

src/component/auth/Signup2.jsx

@@ -49,6 +49,7 @@ export default function Signup2() {
   const signUp = (values) => {
     // helpers.resetForm()
     // console.log('values', values, helpers)
+    delete values.isChecked
     mutation.mutate(values)
   }
 

src/component/calendar/Calendar.jsx

@@ -21,29 +21,37 @@ export default function Calendar(){
     //     queryFn: () => getCalendarEvents()
     // })
 
-    const calendarEvents = useMutation({
+    // const calendarEvents = useMutation({
-        mutationFn: (reqData) => {
+    //     mutationFn: (reqData) => {
-            return getCalendarEvents(reqData)
+    //         return getCalendarEvents(reqData)
-        },
+    //     },
-        onError: (error) => {
+    //     onError: (error) => {
-            console.log(error)
+    //         console.log(error)
-        },
+    //     },
-        onSuccess: (res) => {
+    //     onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
+    //         if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
+    //             throw({message: 'Something went wrong'})
-            }
+    //         }
-        }
+    //     }
-    })
+    // })
 
-    useEffect(()=>{
+    // useEffect(()=>{
+    // let reqData = {
+    //     token: localStorage.getItem('token'), // USER TOKEN
+    //     uid: localStorage.getItem('uid') // USER UID
+    // }
+    // calendarEvents.mutate(reqData)
+    // },[])
     let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
     }
-    calendarEvents.mutate(reqData)
+    const {data, isFetching, isError, error} = useQuery({
-    },[])
+        queryKey: queryKeys.calendar_events,
+        queryFn: () => getCalendarEvents(reqData)
+    })
 
-    const receievedEvents = calendarEvents?.data?.data
+    const receievedEvents = data?.data
     const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
     const eventList = receievedEvents?.list //EVENT LIST FROM API
 
@@ -84,15 +92,15 @@ export default function Calendar(){
                         </div>
                         <div className="card-body">
                             <div className="row">
-                            {calendarEvents?.isPending ? 
+                            {isFetching ? 
                                 <>
                                     <div className="col-12">
                                         <p className='text-mute'>Loading...</p>
                                     </div>
                                 </>
-                                : calendarEvents?.error ?
+                                : isError ?
                                 <div className="col-12">
-                                    <p className='text-danger'>{calendarEvents?.error?.message}</p>
+                                    <p className='text-danger'>{error?.message}</p>
                                 </div>
                                 :
                                 <>

src/component/calendar/EventCalendar.jsx

@@ -81,7 +81,7 @@ export default function EventCalendar({removeAfterDrop, eventList, activeCategor
   useEffect(()=>{
     // let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
     let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
-    console.log('newEventList', newEventList)
+    // console.log('newEventList', newEventList)
     setCurrentEvents(newEventList)
   },[activeCategory])
 

src/component/home/Products.jsx

@@ -1,34 +1,22 @@
-import React, {useEffect} from 'react'
+import { useQuery } from '@tanstack/react-query'
-import { useMutation } from '@tanstack/react-query'
 import { productsData } from '../../services/services'
 import productPath from "../../utils/productpath";
 import { Link } from 'react-router-dom';
 
+import queryKeys from '../../services/queryKeys'
+
 
 export default function Products() {
-    const getProductsData = useMutation({
-        mutationFn: (reqData) => {
-            return productsData(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
 
-    useEffect(()=>{
+    let reqData = {
-      let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
-      }
+    }
-      getProductsData.mutate(reqData)
+    const {data, isFetching, isError, error} = useQuery({
-    },[])
+        queryKey: queryKeys.product,
-    
+        queryFn: () => productsData(reqData)
-    const products = getProductsData?.data?.data?.products_data // PRODUCTS DATA
+    })
+    const products = data?.data?.products_data // PRODUCTS DATA
 
   return (
     <>
@@ -37,7 +25,7 @@ export default function Products() {
                 <h4 className="card-title">My Products</h4>
             </div>
             <div className="card-body pb-0">
-            {getProductsData?.isPending ? 
+            {isFetching ? 
                 <>
                     <div className="row">
                         <div className="col-12">
@@ -45,10 +33,10 @@ export default function Products() {
                         </div>
                     </div>
                 </>
-                : getProductsData?.isPending ?
+                : isError ?
                 <div className="row">
                     <div className="col-12">
-                        <p className='text-danger'>{getProductsData?.error?.message}</p>
+                        <p className='text-danger'>{error?.message}</p>
                     </div>
                 </div>
                 :

src/component/home/ProductsURL.jsx

@@ -5,12 +5,18 @@ import queryKeys from '../../services/queryKeys'
 
 export default function ProductsURL() {
 
-    const {data:data, isFetching, isError, error} = useQuery({
+    let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.product_url,
-        queryFn: () => productsURL()
+        queryFn: () => productsURL(reqData)
     })
 
-    const urlData = data?.data?.url_data?.url
+    const urlData = data?.data?.products_data
+    // console.log('data', urlData)
 
   return (
     <>
@@ -57,11 +63,14 @@ export default function ProductsURL() {
                                     let productUrl = '/product/'+ item?.product_id
                                     return (
                                         <tr key={index}>
-                                            <td>{Number(item?.no) + Number(index)}</td>
+                                            <td>{Number(item?.id)}</td>
-                                            <td>{item?.description} - <a href={productUrl} target='_blank'>{item?.url}</a></td>
+                                            <td>
+                                                {item?.description} - 
+                                                {/* <a href={productUrl} target='_blank'>{item?.external_url}</a> */}
+                                            </td>
 
                                             <td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
-                                            <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
+                                            <td><a className="mr-3" href={productUrl} target='_blank'><i className="fe fe-edit"></i></a></td>
                                         </tr>
                                     )
                                 })}

src/component/home/TopBar.jsx

@@ -1,36 +1,44 @@
-import React, {useEffect} from 'react'
+import { useQuery } from '@tanstack/react-query'
-import { useMutation } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-  const topBarData = useMutation({
+//   const topBarData = useMutation({
-    mutationFn: (reqData) => {
+//     mutationFn: (reqData) => {
-        return topBar(reqData)
+//         return topBar(reqData)
-    },
+//     },
-    onError: (error) => {
+//     onError: (error) => {
-        console.log(error)
+//         console.log(error)
-    },
+//     },
-      onSuccess: (res) => {
+//       onSuccess: (res) => {
-        if(res?.data?.resultCode != '0'){
+//         if(res?.data?.resultCode != '0'){
-            throw({message: 'Something went wrong'})
+//             throw({message: 'Something went wrong'})
-        }
+//         }
-    }
+//     }
-  })
+//   })
 
-    useEffect(()=>{
+//     useEffect(()=>{
-      let reqData = {
+//       let reqData = {
+//         token: localStorage.getItem('token'), // USER TOKEN
+//         uid: localStorage.getItem('uid') // USER UID
+//       }
+//       topBarData.mutate(reqData)
+//     },[])
+    
+    let reqData = {
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
-      }
+    }
-      topBarData.mutate(reqData)
+    const {data:topBarData, isFetching, isError, error} = useQuery({
-    },[])
+        queryKey: queryKeys.topBar,
-    
+        queryFn: () => topBar(reqData)
-    const data = topBarData?.data?.data?.top_bar // top bar data
+    })
+    const data = topBarData?.data?.top_bar // top bar data
 
   return (
     <>
-        {topBarData.isPending ? 
+        {isFetching ? 
         <>
             <div className="col-12">
                 <div className="card p-4">
@@ -38,10 +46,10 @@ export default function TopBar() {
                 </div>
             </div>
         </>
-        : topBarData.error ?
+        : isError?
         <div className="col-12">
             <div className="card p-4">
-                <p className='text-danger'>{topBarData.error.message}</p>
+                <p className='text-danger'>{error.message}</p>
             </div>
         </div>
         :

src/component/product/ProductFactory.jsx

@@ -61,21 +61,20 @@ export default function ProductFactory(){
                                 <p className='text-danger'>{getProductData?.error?.message}</p>
                             </div>
                         </div>
-                        :
+                    :
-                <div>
+                    <div>
-                    {(product_status <= productConst.PRODUCT_AVAILABLE)?
+                        {(product_status <= productConst.PRODUCT_AVAILABLE)?
-                        <ProductStart productData={myproduct_data} />
+                            <ProductStart productData={myproduct_data} />
-                        :<></> }
+                            :<></> }
 
-                     {(product_status === productConst.PRODUCT_PROVISIONING)?
+                        {(product_status === productConst.PRODUCT_PROVISIONING)?
-                        <ProductProvision productData={myproduct_data} />
+                            <ProductProvision productData={myproduct_data} />
-                        :<></> }
+                            :<></> }
 
-                    {(product_status === productConst.PRODUCT_ACTIVE)?
+                        {(product_status === productConst.PRODUCT_ACTIVE)?
-                        <ProductActive productData={myproduct_data} />
+                            <ProductActive productData={myproduct_data} />
-                        :<></> }
+                            :<></> }
-
+                    </div>
-                </div>
                }
             </div>
         </>

src/component/product/ProductStart.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
+import {useNavigate} from 'react-router-dom'
 import getImage from "../../utils/getImage";
-// import { Modal } from "bootstrap";
+import { Modal } from "bootstrap";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { subscribe } from '../../services/services'
 import queryKeys from "../../services/queryKeys";
@@ -8,26 +9,27 @@ import queryKeys from "../../services/queryKeys";
 export default function ProductStart(props){
 
     const queryClient = useQueryClient()
+    const navigate = useNavigate()
 
     const [requestStatus, setRequestStatus] = useState({status:false, message: ''})
-
     const product_uid = props?.productData?.product_uid;
     const product_id = props?.productData?.product_id;
-    const productBanner = "product/"+props.productData?.banner;
+    const productBanner = `product/${props.productData?.banner}`;
-    const productTitle  = props.productData?.title;
+    const productTitle  = props?.productData?.title;
-    const productDescription  = props.productData?.description;
+    const productDescription  = props?.productData?.description;
-    const promotion_text  = props.productData?.promotion_text;
+    const promotion_text  = props?.productData?.promotion_text;
-    const product_status  = props.productData?.status;
+    const product_status  = props?.productData?.status;
-    const saleText  = props.productData?.sale_text;
+    const saleText  = props?.productData?.sale_text;
 
-    const modalRef = useRef()
+    const modalRef = useRef(null)
 
-    const refetch = () => {
+    const invalidate = () => {
-        queryClient.refetchQueries({
+        // queryClient.refetchQueries({
-            queryKey: [...queryKeys.product],
+        //     queryKey: [...queryKeys.product],
-            // type: 'active',
+        //     // type: 'active',
-            // exact: true,
+        //     // exact: true,
-        })
+        // })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] })
     }
 
     const mutation = useMutation({
@@ -40,9 +42,12 @@ export default function ProductStart(props){
         },
           onSuccess: (res) => {
             setRequestStatus({status:true, message:'successful'})
+            navigate(`/product/${product_id}`, {replace: true}) //'/product/'+ product_id
+            dismissModal()
             console.log(res)
         },
         onSettled: () => {
+            invalidate() // Invalidates selected queries
             setTimeout(()=>{
                 setRequestStatus({status:false, message:''})
             },4000)
@@ -53,6 +58,22 @@ export default function ProductStart(props){
         mutation.mutate({product_id: product_id})
     }
 
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
     return (
         <>
             <div className="row">
@@ -113,7 +134,7 @@ export default function ProductStart(props){
                     <div className="modal-content">
                         <div className="modal-header">
                             <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
-                            <button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
@@ -140,7 +161,7 @@ export default function ProductStart(props){
                             )}
                         </div>
                         <div className="modal-footer">
-                            <button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                             <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                         </div>
                     </div>

src/services/queryKeys.js

@@ -1,11 +1,11 @@
 const queryKeys = {
     user_details: ['user_details'],
+    product_url: ['product_url'],
+    product: ['product-data'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
     recentAction: ['recent-action'],
-    product: ['product-data'],
-    product_url: ['product_url'],
     myproduct_provision: ['myproduct_provision'],
     calendar_events: ['calendar_events'],
     contacts: ['contacts']

src/services/services.js

@@ -99,6 +99,22 @@ export const contactData = (reqData) => {
     return postAuxEnd(`/panel/contacts`, postData, false)
 }
 
+// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+export const productsURL = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/url`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+export const productsData = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = (reqData) => {
     let postData = {
@@ -110,29 +126,13 @@ export const recentActions = (reqData) => {
     return postAuxEnd(`/panel/account/actions`, postData, false)
 }
 
-// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
-export const productsData = (reqData) => {
-    let postData = {
-        ...reqData,
-    }
-    return postAuxEnd(`/panel/account/products`, postData, false)
-}
 
 
 
 
 
 
-// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+
-export const productsURL = (reqData) => {
-    let postData = {
-        ...reqData,
-        token: localStorage.getItem('token'), // USER TOKEN
-        uid: localStorage.getItem('uid') // USER UID
-    }
-    return postAuxEnd(`/panel/account/products/url`, postData, false)
-    // return getAuxEnd(`/panel/account/products/url`)
-}
 
 // FUNCTION TO REGISTER USER
 export const signUpUser = (reqData) => {