I use linguijs to handle translation in my Vite Application. I have a locale file in JSON for translated content. I use Axios to handle requests.
The linguijs extract the keys(English) for translation. I use Crowdin for the translation. My issue is how to extract APIs content, should APIs have an Arabic and English version or is it possible to translate the English API on the client side? I am looking for answers to how it is done.
export async function getCourse(id: string) {
const response = await axios.get(`/course/${id}`);
return response;
}
// course component
import { useState } from "react";
import { t, Trans } from "@lingui/macro";
const Course = ()=>{
const [course, setCourse] = useState([])
const getCourseHandler = async (id:string) => {
try {
let response = await getCourse(id);
if (response.success) {
setCourse(response.data.course)
navigate("/dashboard");
}
} catch (error: any) {
console.log(error
}
return(
<>
<h1>heading text<h1/>
{course.map(({_id,title,author,course_sections}:Courses,index: number) => {
return (
<div className="availablecourses__courses-content__bottom">
<p className="availablecourses__courses-content__bottom-text">
{t`${title}`}
</p>
<p className="availablecourses__courses-content__bottom-author">
{" "}
{t`${author}`}
</p>
<p className="availablecourses__courses-content__bottom-coursenumber">
{" "}
{t`${course_sections.length}`} course sections
</p>
</div>}
</>
)}
By the way, I have a language button that toggles between English and Arabic. i don't know what's the best approach for an issue like this, but I am open to suggestions.
