ReactJs integration with Helpjuice

App.js

import React from 'react';
import HelpJuiceArticles from './components/HelpJuiceArticles';

const App = () => {
  return (
    <div className="App">
      <HelpJuiceArticles />
    </div>
  );
};

export default App;

HelpJuiceArticles.js

import React, { useEffect, useState } from 'react';
import { getHelpJuiceArticles, getHelpJuiceArticleDetails } from '../utils/helpjuiceIntegration';

const HelpJuiceArticles = () => {
  const [articles, setArticles] = useState([]);
  const [selectedArticle, setSelectedArticle] = useState(null);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
        const articlesData = await getHelpJuiceArticles();
        setArticles(articlesData.articles);
      } catch (error) {
        console.error('Error fetching HelpJuice articles:', error);
        throw error;
      }
    };

    fetchArticles();
  }, []);

  const handleArticleClick = async (articleId) => {
    try {
      const articleDetails = await getHelpJuiceArticleDetails(articleId);
      console.log('Article Details:', articleDetails);
      setSelectedArticle(articleDetails);
    } catch (error) {
      console.error('Error getting article details for selected article:', error);
      throw error;
    }
  };

  return (
    <div>
      <h2>HelpJuice Articles</h2>
      {articles.length > 0 ? (
        <ul>
          {articles.map(article => (
            <li key={article.id} style={{ cursor: 'pointer' }} onClick={() => handleArticleClick(article.id)}>
              {article.name}
            </li>
          ))}
        </ul>
      ) : (
        <p>No articles available.</p>
      )}

      {selectedArticle && (
        <div>
          <h3><u>{selectedArticle.article.name}</u></h3>
          <div dangerouslySetInnerHTML={{ __html: selectedArticle.article.answer.body }} />
        </div>
      )}
    </div>
  );
};

export default HelpJuiceArticles;

helpjuiceIntegration.js

import axios from 'axios';

const API_KEY = 'xxxxxxxxxxxxxxx';
const HELPJUICE_API_URL = 'https://tech-thrill.helpjuice.com/api/v3/articles';

const getHelpJuiceArticles = async () => {
  try {
    const response = await axios.get(HELPJUICE_API_URL, {
      headers: {
        'Authorization': API_KEY, 
    },
    });
    
    return response.data;
    
  } catch (error) {
    console.error('Error fetching HelpJuice articles:', error);
    throw error;
  }
};

const getHelpJuiceArticleDetails = async (articleId) => {
    try {
      const response = await axios.get(`${HELPJUICE_API_URL}/${articleId}`, {
        headers: {
            'Authorization': API_KEY,
        },
      });
  
      return response.data;

    } catch (error) {
      console.error(`Error fetching content for article ${articleId}:`, error);
      throw error;
    }
  };

  export { getHelpJuiceArticles, getHelpJuiceArticleDetails };