feat: refactor GiteaWidget to use environment variables and improve configuration options

2026-01-16 16:14:08 -06:00
parent 22666529d7
commit 456014e168
6 changed files with 179 additions and 115 deletions
--- a/.env
+++ b/.env
@@ -1,5 +1,12 @@
-REACT_APP_GITHUB_TOKEN=your_github_token_here
-REACT_APP_GITEA_TOKEN=your_gitea_token_here
-GITEA_API_URL='https://git.konceptkit.com/'
-GITHUB_API_URL='https://api.github.com/'
-GITEA_ACCESS_TOKEN='de037d3d8b7268acd0dc734a83799e4f3761bad3'
+
+
+# Vite requires VITE_ prefix 
+VITE_GITEA_API_URL=https://git.konceptkit.com
+VITE_DEFAULT_REPO=kayela/membership-fe
+VITE_DEFAULT_BRANCH=main
+VITE_COMMIT_LIMIT=10
+VITE_SHOW_CONFIG=true
+VITE_GITEA_TOKEN='de037d3d8b7268acd0dc734a83799e4f3761bad3'
+
+# Public variables (exposed to client)
+VITE_PUBLIC_SITE_NAME=My App
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
      },
      "devDependencies": {
        "@eslint/js": "^9.39.1",
-        "@types/node": "^24.10.1",
+        "@types/node": "^24.10.9",
        "@types/react": "^19.2.5",
        "@types/react-dom": "^19.2.3",
        "@vitejs/plugin-react": "^5.1.1",
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.9",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,18 +3,8 @@ import { GitHubWidget, GiteaWidget } from "./components/GitWidget";

 export default function App() {
  return (
-    <div className="bg-slate-800 py-20">
-      <GitHubWidget
-        defaultRepo="kayela-c/puck"
-        limit={8}
-        title="Recent Activity"
-        // token={process.env.REACT_APP_GITHUB_TOKEN} // Optional for private repos
-      />
-      <GiteaWidget
-        defaultRepo="andika/membership-fe"
-        limit={8}
-        title="Recent Activity"
-      />
+    <div className="bg-slate-800 py-20 ">
+      <GiteaWidget limit={8} title="Recent Activity" />
    </div>
  );
 }
--- a/src/components/GitWidget/GitHubWidget.tsx
+++ b/src/components/GitWidget/GitHubWidget.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import useGitHubCommits from "../../hooks/useGitHubCommits";
 import GitHubCommitItem from "./GitHubCommitItem";
 import { FaGithub, FaSync, FaExclamationTriangle } from "react-icons/fa";
-
 import "../../styles/GitHubWidget.css";

 export const GitHubWidget = ({
@@ -74,10 +73,9 @@ export const GitHubWidget = ({
          rel="noopener noreferrer"
          className="github-view-all"
        >
-          View Git →
+          View on GitHub →
        </a>
      </div>
    </div>
  );
 };
-
--- a/src/components/GitWidget/GiteaWidget.tsx
+++ b/src/components/GitWidget/GiteaWidget.tsx
@@ -1,147 +1,197 @@
-import React, { useState } from "react";
-import useGiteaCommits from "../../hooks/useGiteaCommits";
+// components/GiteaWidget/GiteaWidget.jsx
+import React, { useState, useEffect } from 'react';
+import useGiteaCommits from '../../hooks/useGiteaCommits';
 import GiteaCommitItem from "./GiteaCommitItem";
-import "../../styles/GiteaWidget.css";
-import {
-  FaCodeBranch,
-  FaSync,
-  FaExclamationTriangle,
-  FaServer,
-} from "react-icons/fa";
+import { FaCodeBranch, FaSync, FaExclamationTriangle, FaServer, FaCog } from 'react-icons/fa';
+import '../../styles/GiteaWidget.css';

-export const GiteaWidget = ({
-  defaultGiteaUrl = "https://git.konceptkit.com/",
-  defaultRepo = "owner/repo",
-  token = null,
-  limit = 5,
-  branch = "main",
-  title = "Recent Commits",
+// Get environment variables from import.meta.env
+const ENV = {
+  GITEA_API_URL: import.meta.env.VITE_GITEA_API_URL,
+  DEFAULT_REPO: import.meta.env.VITE_DEFAULT_REPO,
+  GITEA_TOKEN: import.meta.env.VITE_GITEA_TOKEN,
+  COMMIT_LIMIT: parseInt(import.meta.env.VITE_COMMIT_LIMIT) || 5,
+  DEFAULT_BRANCH: import.meta.env.VITE_DEFAULT_BRANCH,
+  SHOW_CONFIG: import.meta.env.VITE_SHOW_CONFIG !== 'false',
+  MODE: import.meta.env.MODE, // 'development', 'production', etc.
+  DEV: import.meta.env.DEV,
+  PROD: import.meta.env.PROD
+};
+
+const GiteaWidget = ({ 
+  // Use environment variables as defaults
+  defaultGiteaUrl = ENV.GITEA_API_URL || 'https://gitea.example.com',
+  defaultRepo = ENV.DEFAULT_REPO || 'owner/repo',
+  token = ENV.GITEA_TOKEN || null,
+  limit = ENV.COMMIT_LIMIT || 5,
+  branch = ENV.DEFAULT_BRANCH || 'main',
+  title = 'Recent Commits',
+  showConfig = ENV.SHOW_CONFIG
 }) => {
  const [giteaUrl, setGiteaUrl] = useState(defaultGiteaUrl);
  const [repo, setRepo] = useState(defaultRepo);
  const [inputGiteaUrl, setInputGiteaUrl] = useState(defaultGiteaUrl);
  const [inputRepo, setInputRepo] = useState(defaultRepo);
  const [showAdvanced, setShowAdvanced] = useState(false);
+  
+  // Log environment variables in development
+  useEffect(() => {
+    if (ENV.DEV) {
+      console.log('Vite Environment Variables:', {
+        GITEA_API_URL: ENV.GITEA_API_URL,
+        DEFAULT_REPO: ENV.DEFAULT_REPO,
+        hasToken: !!ENV.GITEA_TOKEN,
+        MODE: ENV.MODE,
+        allEnv: import.meta.env
+      });
+    }
+  }, []);

  const { commits, loading, error } = useGiteaCommits(
-    giteaUrl,
-    repo,
-    token,
-    limit,
+    giteaUrl, 
+    repo, 
+    token, 
+    limit, 
    branch
  );

  const handleSubmit = (e) => {
    e.preventDefault();
-
+    
    // Validate URL
-    let url = inputGiteaUrl;
-    if (!url.startsWith("http")) {
+    let url = inputGiteaUrl?.trim();
+    if (url && !url.startsWith('http')) {
      url = `https://${url}`;
    }
-
+    
    // Remove trailing slash if present
-    url = url.replace(/\/$/, "");
-
+    url = url?.replace(/\/$/, '') || defaultGiteaUrl;
+    
    setGiteaUrl(url);
-
+    
    // Validate repo format
-    if (inputRepo.includes("/")) {
+    if (inputRepo.includes('/')) {
      setRepo(inputRepo);
    } else {
      alert('Repository must be in format "owner/repo"');
    }
  };

-  // Example preset repositories
-  const presetRepos = [
-    { label: "Documentation", value: "owner/docs" },
-    { label: "API Server", value: "owner/api-server" },
-    { label: "Web App", value: "owner/web-app" },
-  ];
+  // Reset to environment defaults
+  const resetToDefaults = () => {
+    setGiteaUrl(defaultGiteaUrl);
+    setRepo(defaultRepo);
+    setInputGiteaUrl(defaultGiteaUrl);
+    setInputRepo(defaultRepo);
+  };

  return (
-    <div className="gitea-widget border-[#e1e4e8] rounded-2xl shadow-sm border-l-8 border-l-lime-600">
-      <div className="github-widget-header rounded-t-2xl">
+    <div className="gitea-widget">
+      <div className="widget-header">
        <FaServer className="gitea-icon" />
        <h3>{title}</h3>
-
-        <button
-          className="advanced-toggle"
-          onClick={() => setShowAdvanced(!showAdvanced)}
-        >
-          {showAdvanced ? "Simple" : "Advanced"}
-        </button>
+        <span className="env-badge">
+          {ENV.MODE === 'development' ? 'DEV' : ENV.MODE}
+        </span>
+        
+        {showConfig && (
+          <div className="header-controls">
+            <button 
+              className="advanced-toggle"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              title={showAdvanced ? 'Hide configuration' : 'Show configuration'}
+            >
+              {showAdvanced ? 'Simple' : 'Configure'}
+            </button>
+            <button 
+              className="reset-btn"
+              onClick={resetToDefaults}
+              title="Reset to default configuration"
+            >
+              <FaCog />
+            </button>
+          </div>
+        )}
      </div>

-      {showAdvanced ? (
+      {/* Configuration form */}
+      {showConfig && showAdvanced && (
        <form onSubmit={handleSubmit} className="config-form">
          <div className="form-group">
            <label>
              <FaServer /> Gitea Instance URL
+              <span className="env-indicator">
+                {inputGiteaUrl === defaultGiteaUrl ? '(from .env)' : '(custom)'}
+              </span>
            </label>
            <input
              type="text"
              value={inputGiteaUrl}
              onChange={(e) => setInputGiteaUrl(e.target.value)}
-              placeholder="https://gitea.example.com"
+              placeholder={defaultGiteaUrl}
              className="url-input"
            />
+            <small className="help-text">
+              Default from .env: <code>{defaultGiteaUrl}</code>
+            </small>
          </div>
-
+          
          <div className="form-group">
            <label>
              <FaCodeBranch /> Repository
+              <span className="env-indicator">
+                {inputRepo === defaultRepo ? '(from .env)' : '(custom)'}
+              </span>
            </label>
            <input
              type="text"
              value={inputRepo}
              onChange={(e) => setInputRepo(e.target.value)}
-              placeholder="owner/repository"
+              placeholder={defaultRepo}
              className="repo-input"
            />
-            <div className="preset-repos">
-              {presetRepos.map((preset) => (
-                <button
-                  key={preset.value}
-                  type="button"
-                  className="preset-btn"
-                  onClick={() => setInputRepo(preset.value)}
-                >
-                  {preset.label}
-                </button>
-              ))}
-            </div>
+            <small className="help-text">
+              Format: owner/repo | Default from .env: <code>{defaultRepo}</code>
+            </small>
          </div>
-
-          <button type="submit" className="refresh-btn">
-            <FaSync /> Load Commits
-          </button>
-        </form>
-      ) : (
-        <form onSubmit={handleSubmit} className="simple-form">
-          <div className="input-group">
-            <input
-              type="text"
-              value={inputRepo}
-              onChange={(e) => setInputRepo(e.target.value)}
-              placeholder="owner/repo"
-              className="simple-input"
-            />
-            <button type="submit" className="simple-btn">
-              <FaSync />
+          
+          <div className="form-actions">
+            <button type="submit" className="refresh-btn">
+              <FaSync /> Load Commits
+            </button>
+            <button type="button" className="cancel-btn" onClick={() => setShowAdvanced(false)}>
+              Cancel
            </button>
          </div>
        </form>
      )}

+      {/* Current configuration display */}
      <div className="current-config">
-        <small>
-          Instance: <code>{giteaUrl}</code> | Repo: <code>{repo}</code> |
-          Branch: <code>{branch}</code>
-        </small>
+        <div className="config-info">
+          <span className="config-item">
+            <FaServer /> <strong>Instance:</strong> 
+            <code>{giteaUrl === defaultGiteaUrl ? 'Default' : 'Custom'}</code>
+          </span>
+          <span className="config-item">
+            <FaCodeBranch /> <strong>Repo:</strong> 
+            <code>{repo}</code>
+          </span>
+          <span className="config-item">
+            <strong>Branch:</strong> <code>{branch}</code>
+          </span>
+          <span className="config-item">
+            <strong>Showing:</strong> <code>{limit} commits</code>
+          </span>
+          {ENV.DEV && (
+            <span className="config-item">
+              <strong>Mode:</strong> <code className="mode-dev">{ENV.MODE}</code>
+            </span>
+          )}
+        </div>
      </div>

+      {/* Widget body */}
      <div className="widget-body">
        {loading ? (
          <div className="loading">
@@ -154,22 +204,25 @@ export const GiteaWidget = ({
            <div className="error-details">
              <p>Failed to load commits</p>
              <small>{error}</small>
-              <p className="help-text">
-                Ensure:
-                <ul>
-                  <li>Gitea instance is accessible</li>
-                  <li>Repository exists and is accessible</li>
-                  <li>API token has correct permissions (if private repo)</li>
-                </ul>
-              </p>
+              {ENV.DEV && (
+                <div className="debug-info">
+                  <p>Debug info:</p>
+                  <ul>
+                    <li>URL: {giteaUrl}</li>
+                    <li>Repo: {repo}</li>
+                    <li>Has Token: {token ? 'Yes' : 'No'}</li>
+                    <li>Mode: {ENV.MODE}</li>
+                  </ul>
+                </div>
+              )}
            </div>
          </div>
        ) : (
          <div className="commits-list">
            {commits.length > 0 ? (
              commits.map((commit) => (
-                <GiteaCommitItem
-                  key={commit.sha}
+                <GiteaCommitItem 
+                  key={commit.sha} 
                  commit={commit}
                  giteaUrl={giteaUrl}
                  repo={repo}
@@ -183,9 +236,9 @@ export const GiteaWidget = ({
          </div>
        )}
      </div>
-
+      
      <div className="widget-footer">
-        <a
+        <a 
          href={`${giteaUrl}/${repo}`}
          target="_blank"
          rel="noopener noreferrer"
@@ -193,8 +246,24 @@ export const GiteaWidget = ({
        >
          View on Gitea →
        </a>
-        <span className="commit-count">{commits.length} commits shown</span>
+        <span className="commit-count">
+          {commits.length} commits shown
+          {ENV.DEV && ` (${ENV.MODE})`}
+        </span>
      </div>
    </div>
  );
 };
+
+// Add default props using environment variables
+GiteaWidget.defaultProps = {
+  defaultGiteaUrl: ENV.GITEA_API_URL || 'https://gitea.example.com',
+  defaultRepo: ENV.DEFAULT_REPO || 'owner/repo',
+  token: ENV.GITEA_TOKEN || null,
+  limit: ENV.COMMIT_LIMIT || 5,
+  branch: ENV.DEFAULT_BRANCH || 'main',
+  title: 'Recent Commits',
+  showConfig: ENV.SHOW_CONFIG
+};
+
+export default GiteaWidget;