From 456014e168c99e0b53d5b3d7b4e543527f706d44 Mon Sep 17 00:00:00 2001 From: Kayela Claybon <34044644+kayela-c@users.noreply.github.com> Date: Fri, 16 Jan 2026 16:14:08 -0600 Subject: [PATCH] feat: refactor GiteaWidget to use environment variables and improve configuration options --- .env | 17 +- package-lock.json | 2 +- package.json | 2 +- src/App.tsx | 14 +- src/components/GitWidget/GitHubWidget.tsx | 4 +- src/components/GitWidget/GiteaWidget.tsx | 255 ++++++++++++++-------- 6 files changed, 179 insertions(+), 115 deletions(-) diff --git a/.env b/.env index 362de50..8bbafe3 100644 --- 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' \ No newline at end of file + + +# 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 diff --git a/package-lock.json b/package-lock.json index 2f9e60b..fa09e93 100644 --- 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", diff --git a/package.json b/package.json index 0fcc107..bd95ea3 100644 --- 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", diff --git a/src/App.tsx b/src/App.tsx index f38fdfa..ed8e548 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,18 +3,8 @@ import { GitHubWidget, GiteaWidget } from "./components/GitWidget"; export default function App() { return ( -
- - +
+
); } diff --git a/src/components/GitWidget/GitHubWidget.tsx b/src/components/GitWidget/GitHubWidget.tsx index 837cc9f..8fa6c88 100644 --- 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 →
); }; - diff --git a/src/components/GitWidget/GiteaWidget.tsx b/src/components/GitWidget/GiteaWidget.tsx index 16ef15d..da68554 100644 --- 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 ( -
-
+
+

{title}

- - + + {ENV.MODE === 'development' ? 'DEV' : ENV.MODE} + + + {showConfig && ( +
+ + +
+ )}
- {showAdvanced ? ( + {/* Configuration form */} + {showConfig && showAdvanced && (
setInputGiteaUrl(e.target.value)} - placeholder="https://gitea.example.com" + placeholder={defaultGiteaUrl} className="url-input" /> + + Default from .env: {defaultGiteaUrl} +
- +
setInputRepo(e.target.value)} - placeholder="owner/repository" + placeholder={defaultRepo} className="repo-input" /> -
- {presetRepos.map((preset) => ( - - ))} -
+ + Format: owner/repo | Default from .env: {defaultRepo} +
- - -
- ) : ( -
-
- setInputRepo(e.target.value)} - placeholder="owner/repo" - className="simple-input" - /> - +
)} + {/* Current configuration display */}
- - Instance: {giteaUrl} | Repo: {repo} | - Branch: {branch} - +
+ + Instance: + {giteaUrl === defaultGiteaUrl ? 'Default' : 'Custom'} + + + Repo: + {repo} + + + Branch: {branch} + + + Showing: {limit} commits + + {ENV.DEV && ( + + Mode: {ENV.MODE} + + )} +
+ {/* Widget body */}
{loading ? (
@@ -154,22 +204,25 @@ export const GiteaWidget = ({

Failed to load commits

{error} -

- Ensure: -

    -
  • Gitea instance is accessible
    • -
  • Repository exists and is accessible
    • -
  • API token has correct permissions (if private repo)
    • -
-

+ {ENV.DEV && ( +
+

Debug info:

+
    +
  • URL: {giteaUrl}
    • +
  • Repo: {repo}
    • +
  • Has Token: {token ? 'Yes' : 'No'}
    • +
  • Mode: {ENV.MODE}
    • +
+
+ )}
) : (
{commits.length > 0 ? ( commits.map((commit) => ( - )}
- +
- View on Gitea → - {commits.length} commits shown + + {commits.length} commits shown + {ENV.DEV && ` (${ENV.MODE})`} +
); }; + +// 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; \ No newline at end of file