I recently deployed a full stack project on render.com. I have two folders backend and frontend. I have a build folder in my frontend folder prompting that the frontend and backend run on same server.
All is fine except the core functionality.
import React, { Fragment, useEffect, useState } from “react”;
import { useParams } from “react-router-dom”;
import { clearErrors, getGroupDetails } from “…/…/actions/groupActions”;
import { useSelector, useDispatch } from “react-redux”;
import { useAlert } from “react-alert”;
import Loader from “…/layout/Loader/Loader.js”;
import “./GroupDetails.css”;
import axios from “axios”;
import { parse } from “parse5”;
import MetaData from “…/layout/Metadata.js”;
const GroupDetails = () => {
const { id } = useParams();
const dispatch = useDispatch();
const alert = useAlert();
const { group, loading, error } = useSelector((state) => state.groupDetails);
const [userIdentificationNumber, setUserIdentificationNumber] = useState(“”);
// State to manage whether the button should be enabled
const [isVerificationEnabled, setIsVerificationEnabled] = useState(false);
useEffect(() => {
if (error) {
alert.error(error);
dispatch(clearErrors());
}
dispatch(getGroupDetails(id));
}, [dispatch, id, error, alert]);
const checkUserIdentificationNumber = async () => {
try {
const sheetUrl = group.studentInfoLink;
const value = userIdentificationNumber;
const response =await axios.get(sheetUrl);
const htmlContent =response.data;
const document = parse(htmlContent);
// Check if the value is present in the sheet
const cells = findCells(document, value);
const flag = cells.length > 0;
if(flag===false)
{
window.alert(“Not a part of this group”);
}
setIsVerificationEnabled(flag);
} catch (error) {
console.error(“Error during user identification number check:”, error);
}
};
const findCells = (document, value) => {
const cells = ;
const traverse = (node) => {
if (
node.nodeName === “td” &&
node.childNodes &&
node.childNodes.length === 1 &&
node.childNodes[0].value &&
node.childNodes[0].value.trim() === value
) {
cells.push(node);
}
if (node.childNodes) {
node.childNodes.forEach(traverse);
}
};
traverse(document);
return cells;
};
const handleVerificationClick = () => {
checkUserIdentificationNumber();
};
let sanitizedProfessorName =
group &&
group.professorName &&
group.professorName
.toLowerCase()
.replace(/\s+/g, “-”)
.replace(/[^\w-]/g, “”);
let url = https://d29xyctv32cl2b.cloudfront.net/vit/authors/${sanitizedProfessorName}.webp;
return (
{loading ? (
) : (
<MetaData title={${group.name} --VGroups}/>
<img className=“CarouselImage” src={url} alt={
Slide} />Group Name: {group?.name}
Group #{group?._id}
Professor Name: Dr. {group.professorName}
Subject: {group.subjectName}
Description:
{group.description}
Enter Your Identification Number:
<input
type=“text”
value={userIdentificationNumber}
onChange={(e) => setUserIdentificationNumber(e.target.value)}
className=“input-area”
/>
Verify Identification Number
)}
);
};
export default GroupDetails;
The bold line that is the axios.get(sheetUrl) doesnt work. It is not fetching the data and I think its related to cors issues. Can someone give me an insight?
