leumas-private-shared/src/TrafficTracker/CreateAPIKey.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const CreateAPIKey = ({ userId, apiKeyEnum }) => {
  const [apiKey, setApiKey] = useState('');
  const [apiKeys, setApiKeys] = useState([]);
  const [filter, setFilter] = useState('');

  useEffect(() => {
    fetchAPIKeys();
  }, []);

  const fetchAPIKeys = async () => {
    try {
      const response = await axios.get(`http://localhost:3002/api-keys?owner=${userId}&keyType=${apiKeyEnum}`);
      setApiKeys(response.data);
    } catch (error) {
      console.error('Error fetching API keys:', error);
    }
  };

  const handleCreateAPIKey = async () => {
    try {
      const response = await axios.post('http://localhost:3002/generate-api-key', {
        owner: userId,
        keyType: apiKeyEnum,
      });
      setApiKey(response.data.apiKey);
      fetchAPIKeys();
    } catch (error) {
      console.error('Error creating API key:', error);
    }
  };

  const handleDeleteAPIKey = async (id) => {
    try {
      await axios.delete(`http://localhost:3002/api-keys/${id}`);
      fetchAPIKeys();
    } catch (error) {
      console.error('Error deleting API key:', error);
    }
  };

  const filteredApiKeys = apiKeys.filter((key) => key.keyType.includes(filter));

  return (
    <div>
      <h1>API Key Manager</h1>
      <div>
        <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Filter API keys" />
      </div>
      <div>
        <button onClick={handleCreateAPIKey}>Create API Key</button>
        {apiKey && <p>New API Key: {apiKey}</p>}
      </div>
      <div>
        <h2>API Keys</h2>
        <ul>
          {filteredApiKeys.map((key) => (
            <li key={key._id}>
              {key.apiKey} - {key.keyType}
              <button onClick={() => handleDeleteAPIKey(key._id)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default CreateAPIKey;