feature: add GitHub organization explorer feature#47
feature: add GitHub organization explorer feature#47sushmitayadav260723 wants to merge 6 commits intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
no-issue-linked
documentation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughReplaces README with a concise OrgExplorer-focused README and replaces the static App UI with a stateful GitHub organization lookup: input + Search, fetch to GitHub org endpoint with AbortController-driven cancellation, loading/error handling, and conditional rendering of org details. Changes
Sequence DiagramsequenceDiagram
participant User
participant App as App Component
participant GitHub as GitHub API
User->>App: Enter org name & click "Search"
App->>App: Abort prior request, clear orgData/error, set loading
App->>GitHub: GET /orgs/{org}
activate GitHub
GitHub-->>App: 200 OK + org JSON
deactivate GitHub
App->>App: Parse JSON, set orgData, clear loading
App->>User: Render org details (avatar, login, description, followers, repos)
Note over App,GitHub: On non-200 or network error
GitHub-->>App: Error response
App->>App: Set error message, clear loading
App->>User: Display error message
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@README.md`:
- Around line 1-3: Move the top-level heading so MD041 passes: place the
markdown H1 "# OrgExplorer" at the very start of README.md (before the existing
HTML anchor/comment), i.e. move the "# OrgExplorer" heading to line 1 and leave
the <div name="readme-top"></div> anchor immediately after it so the file begins
with the H1 followed by the anchor.
- Around line 37-40: The README contains a stale feature bullet "🔗 Ready for
GitHub API integration"; update that line to reflect the implemented behavior by
replacing that bullet with a current description such as "🔗 Fetches GitHub
organization data" (or equivalent phrasing) so the README accurately states that
the app already fetches GitHub org data; edit the line containing "🔗 Ready for
GitHub API integration" to the new text.
- Around line 63-69: Remove the non-shell note from the fenced bash block so the
code fence contains only commands; edit the triple-backtick bash block that
includes "git clone ... npm run dev" to delete the ">> 🚀 This project is
actively being developed under AOSSIE." line, and add that note immediately
after the code fence as a plain line or blockquote (e.g., "> 🚀 This project is
actively being developed under AOSSIE.") so copy/paste of the commands remains
clean.
In `@src/App.tsx`:
- Around line 33-56: Replace hardcoded user-visible strings in the App component
with i18n resource lookups: move "OrgExplorer", the input placeholder "Enter
GitHub org (e.g. google)", button text "Search", "Loading...", error messages,
and the static labels "Followers:" and "Public Repos:" (and any orgData fields
shown) into your localization resources and access them via your i18n helper
(e.g., t('...')) inside App (refer to the App component, the org input, fetchOrg
button, loading/error rendering, and the orgData display). Ensure you import and
use the translation function (or context) at the top of the component and
replace the JSX literals with calls like t('key') so all user-visible strings
are externalized.
- Around line 35-53: Add an explicit <label> associated with the input (use a
unique id like "org-input" and set htmlFor on the label) so the text field used
by setOrg has an accessible name (e.g., label text "GitHub organization"); also
add a meaningful alt attribute to the image rendered from orgData.avatar_url
(e.g., `${orgData.login} avatar` or a fallback like "Organization avatar") so
the <img> has descriptive alt text; update the JSX around the input and the img
elements in the component to include these attributes.
- Line 6: Replace the useState<any> for orgData with a strongly typed state:
declare a GitHubOrg interface matching the GitHub API fields your app uses and
change const [orgData, setOrgData] = useState<GitHubOrg | null>(null); do the
same for the error state (useState<Error | null> or useState<unknown> with
narrowing) referenced around lines 24–25, and update fetch/handler functions
that call setOrgData or setError to perform proper runtime checks/type guards
before assigning so you never assign raw any into orgData; reference the
orgData, setOrgData, and the error state variables and the fetch handler where
you parse the GitHub response.
- Around line 10-29: fetchOrg can suffer a race where stale responses overwrite
newer state; fix it by creating an AbortController for each fetch (and store the
current controller in a ref or module-level variable and call .abort() before
starting a new fetch) and pass controller.signal to fetch to cancel previous
requests, trim and URL-encode the org string with org.trim() and
encodeURIComponent(org.trim()) when building the URL, move setLoading(false)
into a finally block so it always runs, and replace the loose catch param (err:
any) with a proper guard that checks if err is an instance of Error before using
err.message (fallback to a generic message otherwise); update references in your
code to fetchOrg, setLoading, setError, setOrgData, and AbortController
accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: a0c41203-2b2c-4b50-bca9-631b71e1cebb
📒 Files selected for processing (2)
README.mdsrc/App.tsx
|
|
||
| <!-- Don't delete it --> | ||
| <div name="readme-top"></div> |
There was a problem hiding this comment.
Put a top-level H1 on the first line to satisfy MD041.
Move the # OrgExplorer heading to Line 1 (before the anchor/comment) so markdown lint passes.
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 3-3: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 1 - 3, Move the top-level heading so MD041 passes:
place the markdown H1 "# OrgExplorer" at the very start of README.md (before the
existing HTML anchor/comment), i.e. move the "# OrgExplorer" heading to line 1
and leave the <div name="readme-top"></div> anchor immediately after it so the
file begins with the H1 followed by the anchor.
| - ⚡ React + TypeScript + Vite setup | ||
| - 🎯 Clean and simple UI | ||
| - 🧩 Beginner-friendly structure | ||
| - 🔗 Ready for GitHub API integration |
There was a problem hiding this comment.
Update stale feature text about API integration.
The app already fetches GitHub org data, so “Ready for GitHub API integration” is outdated and should be replaced with the implemented behavior.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 37 - 40, The README contains a stale feature bullet
"🔗 Ready for GitHub API integration"; update that line to reflect the
implemented behavior by replacing that bullet with a current description such as
"🔗 Fetches GitHub organization data" (or equivalent phrasing) so the README
accurately states that the app already fetches GitHub org data; edit the line
containing "🔗 Ready for GitHub API integration" to the new text.
| ```bash | ||
| git clone https://github.com/AOSSIE-Org/OrgExplorer.git | ||
| cd OrgExplorer | ||
| npm install | ||
| # or | ||
| yarn install | ||
| # or | ||
| pnpm install | ||
| ``` | ||
|
|
||
| #### 3. Configure Environment Variables(.env.example) | ||
|
|
||
| Create a `.env` file in the root directory: | ||
|
|
||
| ```env | ||
| # Add your environment variables here | ||
| API_KEY=your_api_key | ||
| DATABASE_URL=your_database_url | ||
| ``` | ||
|
|
||
| #### 4. Run the Development Server | ||
|
|
||
| ```bash | ||
| npm run dev | ||
| # or | ||
| yarn dev | ||
| # or | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| #### 5. Open your Browser | ||
|
|
||
| Navigate to [http://localhost:3000](http://localhost:3000) to see the application. | ||
|
|
||
| For detailed setup instructions, please refer to our [Installation Guide](./docs/INSTALL_GUIDE.md) (if you have one). | ||
|
|
||
| --- | ||
|
|
||
| ## 📱 App Screenshots | ||
|
|
||
| TODO: Add screenshots showcasing your application | ||
|
|
||
| | | | | | ||
| |---|---|---| | ||
| | Screenshot 1 | Screenshot 2 | Screenshot 3 | | ||
|
|
||
| --- | ||
|
|
||
| ## 🙌 Contributing | ||
|
|
||
| ⭐ Don't forget to star this repository if you find it useful! ⭐ | ||
|
|
||
| Thank you for considering contributing to this project! Contributions are highly appreciated and welcomed. To ensure smooth collaboration, please refer to our [Contribution Guidelines](./CONTRIBUTING.md). | ||
|
|
||
| --- | ||
|
|
||
| ## ✨ Maintainers | ||
|
|
||
| TODO: Add maintainer information | ||
|
|
||
| - [Maintainer Name](https://github.com/username) | ||
| - [Maintainer Name](https://github.com/username) | ||
|
|
||
| --- | ||
|
|
||
| ## 📍 License | ||
|
|
||
| This project is licensed under the GNU General Public License v3.0. | ||
| See the [LICENSE](LICENSE) file for details. | ||
|
|
||
| --- | ||
|
|
||
| ## 💪 Thanks To All Contributors | ||
|
|
||
| Thanks a lot for spending your time helping TODO grow. Keep rocking 🥂 | ||
|
|
||
| [](https://github.com/AOSSIE-Org/TODO/graphs/contributors) | ||
| >> 🚀 This project is actively being developed under AOSSIE. | ||
|
|
There was a problem hiding this comment.
Keep shell block command-only; move project note outside code fence.
The >> 🚀 ... line is not a shell command and breaks copy/paste installation flow.
Proposed fix
```bash
git clone https://github.com/AOSSIE-Org/OrgExplorer.git
cd OrgExplorer
npm install
npm run dev
->> 🚀 This project is actively being developed under AOSSIE.+> 🚀 This project is actively being developed under AOSSIE.
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
Verify each finding against the current code and only fix it if needed.
In @README.md around lines 63 - 69, Remove the non-shell note from the fenced
bash block so the code fence contains only commands; edit the triple-backtick
bash block that includes "git clone ... npm run dev" to delete the ">> 🚀 This
project is actively being developed under AOSSIE." line, and add that note
immediately after the code fence as a plain line or blockquote (e.g., "> 🚀 This
project is actively being developed under AOSSIE.") so copy/paste of the
commands remains clean.
</details>
<!-- fingerprinting:phantom:poseidon:hawk -->
<!-- This is an auto-generated comment by CodeRabbit -->
| <h1>OrgExplorer</h1> | ||
|
|
||
| <input | ||
| type="text" | ||
| placeholder="Enter GitHub org (e.g. google)" | ||
| value={org} | ||
| onChange={(e) => setOrg(e.target.value)} | ||
| style={{ padding: "10px", width: "250px", marginRight: "10px" }} | ||
| /> | ||
|
|
||
| <button onClick={fetchOrg} style={{ padding: "10px" }}> | ||
| Search | ||
| </button> | ||
|
|
||
| {loading && <p>Loading...</p>} | ||
| {error && <p style={{ color: "red" }}>{error}</p>} | ||
|
|
||
| {orgData && ( | ||
| <div style={{ marginTop: "20px" }}> | ||
| <img src={orgData.avatar_url} width="100" /> | ||
| <h2>{orgData.login}</h2> | ||
| <p>{orgData.description}</p> | ||
| <p>Followers: {orgData.followers}</p> | ||
| <p>Public Repos: {orgData.public_repos}</p> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Externalize user-visible strings instead of hardcoding JSX literals.
Headings/messages/placeholders should come from i18n resources to meet localization requirements.
As per coding guidelines: "User-visible strings should be externalized to resource files (i18n)".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/App.tsx` around lines 33 - 56, Replace hardcoded user-visible strings in
the App component with i18n resource lookups: move "OrgExplorer", the input
placeholder "Enter GitHub org (e.g. google)", button text "Search",
"Loading...", error messages, and the static labels "Followers:" and "Public
Repos:" (and any orgData fields shown) into your localization resources and
access them via your i18n helper (e.g., t('...')) inside App (refer to the App
component, the org input, fetchOrg button, loading/error rendering, and the
orgData display). Ensure you import and use the translation function (or
context) at the top of the component and replace the JSX literals with calls
like t('key') so all user-visible strings are externalized.
sushmitayadav260723
left a comment
sushmitayadav260723
left a comment
There was a problem hiding this comment.
Thanks for the detailed review! 🙌
I’ve addressed the following:
- Fixed README structure and updated feature description
- Removed incorrect content from code block
- Added proper TypeScript types for orgData
- Improved error handling
- Prevented race conditions using AbortController
- Added accessibility improvements (label + alt text)
I’ll handle i18n improvements in a follow-up PR.
Please review again.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
src/App.tsx (1)
21-31:⚠️ Potential issue | 🟠 MajorAbort and clear state on an empty search.
Line 23 returns before the previous request is cancelled or the old card is cleared. If the user deletes the org name while a fetch is in flight, that stale response can still repaint the UI afterward.
🧹 Suggested fix
const fetchOrg = async () => { const orgName = org.trim(); - if (!orgName) return; - abortRef.current?.abort(); + if (!orgName) { + setLoading(false); + setError(""); + setOrgData(null); + return; + } const controller = new AbortController(); abortRef.current = controller;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 21 - 31, In fetchOrg, ensure you abort any in-flight request and clear UI state before returning on an empty org: call abortRef.current?.abort(), reset abortRef.current (if you track controller), and call setLoading(false), setError(""), and setOrgData(null) prior to the early return so a stale response cannot repaint the UI; update the early-return branch in fetchOrg to perform these abort/clear actions instead of returning immediately.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.tsx`:
- Around line 57-69: The JSX is malformed: an unclosed "<input" is interrupting
the "<label>" block; fix by removing the stray/incomplete "<input" and ensuring
the <label htmlFor="org-input" ...> and the <input id="org-input" type="text"
placeholder=... value={org} onChange={(e) => setOrg(e.target.value)} ... /> are
separate, well-formed elements; keep the label’s htmlFor matching "org-input"
and retain the input props and inline styles so the state variables org and
setOrg are used as before.
- Around line 80-87: The JSX markup for the organization's avatar image is
missing a self-closing tag which causes subsequent lines to be parsed as
attributes; fix the <img> element that uses orgData.avatar_url and
alt={`${orgData.login} avatar`} in the component by making it a proper
self-closing tag (close with />) so the following <h2>{orgData.login}</h2>,
<p>{orgData.description}</p>, etc. are treated as sibling elements.
- Around line 17-19: The file currently has a nested import of useRef inside the
App() function which breaks ES module rules; move useRef into the top-level
import list and remove the nested import and the duplicate declaration there.
Specifically, add useRef to the existing top-level import statement (so useRef
is imported alongside other React hooks) and keep the single AbortController ref
declaration abortRef = useRef<AbortController | null>(null) where appropriate
inside App(), removing the nested import lines that reference useRef and the
duplicate import.
---
Duplicate comments:
In `@src/App.tsx`:
- Around line 21-31: In fetchOrg, ensure you abort any in-flight request and
clear UI state before returning on an empty org: call abortRef.current?.abort(),
reset abortRef.current (if you track controller), and call setLoading(false),
setError(""), and setOrgData(null) prior to the early return so a stale response
cannot repaint the UI; update the early-return branch in fetchOrg to perform
these abort/clear actions instead of returning immediately.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 52c9746a-d7f7-4ed6-a732-e40d0282bdd6
📒 Files selected for processing (1)
src/App.tsx
src/App.tsx
Outdated
| import { useRef } from "react"; | ||
|
|
||
| const abortRef = useRef<AbortController | null>(null); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Expect all imports to appear before `function App()`.
nl -ba src/App.tsx | sed -n '1,20p'Repository: AOSSIE-Org/OrgExplorer
Length of output: 106
🏁 Script executed:
cat -n src/App.tsx | head -30Repository: AOSSIE-Org/OrgExplorer
Length of output: 986
🏁 Script executed:
cat -n src/App.tsx | sed -n '40,100p'Repository: AOSSIE-Org/OrgExplorer
Length of output: 1918
Move the nested import to the top-level imports.
Line 17 contains an import statement inside the App() function. ES module imports must be at the top level; this file will not parse as written.
Move useRef to the existing import statement at line 1:
Suggested fix
-import { useRef, useState } from "react";
+import { useRef, useState } from "react";And remove lines 17-19:
const [error, setError] = useState("");
-import { useRef } from "react";
-
-const abortRef = useRef<AbortController | null>(null);
+ const abortRef = useRef<AbortController | null>(null);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/App.tsx` around lines 17 - 19, The file currently has a nested import of
useRef inside the App() function which breaks ES module rules; move useRef into
the top-level import list and remove the nested import and the duplicate
declaration there. Specifically, add useRef to the existing top-level import
statement (so useRef is imported alongside other React hooks) and keep the
single AbortController ref declaration abortRef = useRef<AbortController |
null>(null) where appropriate inside App(), removing the nested import lines
that reference useRef and the duplicate import.
sushmitayadav260723
left a comment
sushmitayadav260723
left a comment
There was a problem hiding this comment.
Thanks for the detailed review! 🙌
I’ve addressed all the remaining issues:
- Fixed early return edge case in fetchOrg (abort + clear state)
- Removed nested import and fixed hook usage
- Corrected malformed JSX for label/input
- Fixed img tag syntax issue
Everything should be working correctly now. Please review again.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (3)
src/App.tsx (3)
17-19:⚠️ Potential issue | 🔴 CriticalCritical: Import statement inside function body breaks compilation.
ES module
importstatements must be at the top level of the file. Line 17 contains an import inside theApp()function body (after line 11). Additionally,useRefon line 19 is placed at module scope instead of inside the component.Proposed fix
Remove lines 17-19 entirely since
useRefis already imported on line 1. Move theabortRefdeclaration inside the component:function App() { const [org, setOrg] = useState(""); const [orgData, setOrgData] = useState<GitHubOrg | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const abortRef = useRef<AbortController | null>(null); -import { useRef, useState } from "react"; - -const abortRef = useRef<AbortController | null>(null); -🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 17 - 19, Remove the stray import and module-scope hook usage: delete the duplicated "import { useRef, useState } from 'react';" and the top-level abortRef declaration, then declare const abortRef = useRef<AbortController | null>(null) inside the App component (inside function App() body) so the hook runs at component render time; refer to the abortRef symbol and useRef hook when making the move.
65-77:⚠️ Potential issue | 🔴 CriticalCritical: Malformed JSX structure with unclosed
<inputtag.Line 65 opens an
<inputtag that is never closed before a<label>element starts on line 66. This results in invalid JSX that will not compile. The label and input elements should be properly separated.Proposed fix
- <input - <label htmlFor="org-input" style={{ position: "absolute", left: "-9999px" }}> - GitHub organization -</label> - -<input - id="org-input" - type="text" - placeholder="Enter GitHub org (e.g. google)" - value={org} - onChange={(e) => setOrg(e.target.value)} - style={{ padding: "10px", width: "250px", marginRight: "10px" }} -/> + <label htmlFor="org-input" style={{ position: "absolute", left: "-9999px" }}> + GitHub organization + </label> + <input + id="org-input" + type="text" + placeholder="Enter GitHub org (e.g. google)" + value={org} + onChange={(e) => setOrg(e.target.value)} + style={{ padding: "10px", width: "250px", marginRight: "10px" }} + />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 65 - 77, The JSX contains a stray, unclosed "<input" token before the <label> which breaks compilation; remove that malformed opening or replace it with the proper closed tag and ensure the visible input block (id="org-input", value={org}, onChange={...}) is a standalone, self-closing <input /> element and the <label htmlFor="org-input"> is separate and correctly paired with that id (update setOrg usage if needed). Locate the fragment around the label and the input (the org input block) and correct the markup so there's only one well-formed, self-closing input element with its matching label.
63-98: 🛠️ Refactor suggestion | 🟠 MajorExternalize user-visible strings for i18n compliance.
Hardcoded strings like "OrgExplorer", "Enter GitHub org (e.g. google)", "Search", "Loading...", "Followers:", and "Public Repos:" should be moved to i18n resource files.
As per coding guidelines: "User-visible strings should be externalized to resource files (i18n)".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 63 - 98, Replace hardcoded user-visible strings in the App component with i18n resource keys: externalize "OrgExplorer", the input placeholder "Enter GitHub org (e.g. google)", button label "Search", status "Loading...", error text usage, and labels "Followers:" and "Public Repos:" into your translation files and import them (e.g., via a t function or a localized strings object). Update the JSX where state/props like org, setOrg, fetchOrg, loading, error, and orgData are used to reference these keys (for example use t('title'), t('input.placeholder'), t('button.search'), t('loading'), t('label.followers'), t('label.publicRepos') and build the avatar alt via t with orgData.login). Ensure the new keys are added to the i18n resource files for all supported locales and replace the inline strings with the corresponding localized lookups.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.tsx`:
- Around line 22-23: There is a duplicate declaration of the variable orgName
(two consecutive lines with const orgName = org.trim();) causing a syntax error;
remove the redundant declaration so only a single const orgName = org.trim();
remains (locate the duplicate in the App component where orgName is derived from
org) and ensure any following code references that single orgName variable.
- Around line 51-52: The API response from res.json() is untyped (Promise<any>)
and is being assigned directly to state via setOrgData; update the fetch
handling in the component to assert and/or validate the response shape before
calling setOrgData — for example, parse the JSON into a GitHubOrg-typed variable
(or run it through a runtime validator like Zod) and only call
setOrgData(validatedData) so setOrgData and the GitHubOrg type are consistent
and you avoid assigning unknown data directly from res.json().
---
Duplicate comments:
In `@src/App.tsx`:
- Around line 17-19: Remove the stray import and module-scope hook usage: delete
the duplicated "import { useRef, useState } from 'react';" and the top-level
abortRef declaration, then declare const abortRef = useRef<AbortController |
null>(null) inside the App component (inside function App() body) so the hook
runs at component render time; refer to the abortRef symbol and useRef hook when
making the move.
- Around line 65-77: The JSX contains a stray, unclosed "<input" token before
the <label> which breaks compilation; remove that malformed opening or replace
it with the proper closed tag and ensure the visible input block
(id="org-input", value={org}, onChange={...}) is a standalone, self-closing
<input /> element and the <label htmlFor="org-input"> is separate and correctly
paired with that id (update setOrg usage if needed). Locate the fragment around
the label and the input (the org input block) and correct the markup so there's
only one well-formed, self-closing input element with its matching label.
- Around line 63-98: Replace hardcoded user-visible strings in the App component
with i18n resource keys: externalize "OrgExplorer", the input placeholder "Enter
GitHub org (e.g. google)", button label "Search", status "Loading...", error
text usage, and labels "Followers:" and "Public Repos:" into your translation
files and import them (e.g., via a t function or a localized strings object).
Update the JSX where state/props like org, setOrg, fetchOrg, loading, error, and
orgData are used to reference these keys (for example use t('title'),
t('input.placeholder'), t('button.search'), t('loading'), t('label.followers'),
t('label.publicRepos') and build the avatar alt via t with orgData.login).
Ensure the new keys are added to the i18n resource files for all supported
locales and replace the inline strings with the corresponding localized lookups.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 600a9e60-9a51-4ef9-b66f-6859c91e9068
📒 Files selected for processing (1)
src/App.tsx
sushmitayadav260723
left a comment
sushmitayadav260723
left a comment
There was a problem hiding this comment.
Thanks for the review! 🙌
I’ve resolved all the issues and cleaned up the implementation.
The component now compiles correctly and handles edge cases properly.
Please review again.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.tsx`:
- Around line 45-47: The current response handling in App.tsx that checks res.ok
and throws new Error("Organization not found") should distinguish HTTP status
codes: when res.status === 404 keep the "Organization not found" error, when
res.status === 403 throw a distinct rate-limit error (e.g. "GitHub API rate
limit exceeded") so callers can surface a different message for throttling, and
for any other non-ok statuses throw a generic error including the status; update
the logic around the res.ok check/throw to branch on res.status accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 57786eb7-09bf-4c55-8018-5c2c7d762ac7
📒 Files selected for processing (1)
src/App.tsx
fix: improve API error handling (status-based errors)
sushmitayadav260723
left a comment
sushmitayadav260723
left a comment
There was a problem hiding this comment.
Thanks for the suggestion! 🙌
I’ve updated the error handling to distinguish between:
- 404 (organization not found)
- 403 (rate limit exceeded)
- other response errors
Please review again.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/App.tsx (1)
47-104:⚠️ Potential issue | 🟠 MajorExternalize hardcoded user-visible strings into i18n resources.
User-facing strings are still embedded directly in code (error messages, heading, label, placeholder, button text, loading text, and stat labels). Please move them to localization resources and render via your translation helper.
As per coding guidelines: "User-visible strings should be externalized to resource files (i18n)".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/App.tsx` around lines 47 - 104, The code currently has hardcoded user-visible strings; refactor to use i18n resources and the translation helper (e.g., t) by replacing literal strings in fetchOrg error throws (the Error messages thrown for 404, 403, and other statuses and the default in setError), the UI texts rendered in App.tsx (the h1 title, the hidden label text for "org-input", input placeholder, button text "Search", loading text "Loading...", error display, stat labels like "Followers" and "Public Repos", and image alt text built from orgData.login). Update the fetchOrg function to throw errors using translated messages or keys, call setError with translated messages, and use t(...) in the JSX where orgData is rendered (img alt, h2, p descriptions, labels) so all user-facing strings are sourced from your i18n resource files.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/App.tsx`:
- Around line 47-104: The code currently has hardcoded user-visible strings;
refactor to use i18n resources and the translation helper (e.g., t) by replacing
literal strings in fetchOrg error throws (the Error messages thrown for 404,
403, and other statuses and the default in setError), the UI texts rendered in
App.tsx (the h1 title, the hidden label text for "org-input", input placeholder,
button text "Search", loading text "Loading...", error display, stat labels like
"Followers" and "Public Repos", and image alt text built from orgData.login).
Update the fetchOrg function to throw errors using translated messages or keys,
call setError with translated messages, and use t(...) in the JSX where orgData
is rendered (img alt, h2, p descriptions, labels) so all user-facing strings are
sourced from your i18n resource files.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 748a3fd4-557d-4b6a-a43f-9cf60b5ec39e
📒 Files selected for processing (1)
src/App.tsx
|
Thanks for the suggestion! 🙌 Externalizing user-visible strings into i18n resources makes sense. Since this involves a broader change across the application, I’d prefer to handle it in a separate PR to keep this one focused on the core feature and fixes. I’ll open a follow-up PR to implement proper i18n support. |
1 participant
🚀 GitHub Organization Explorer Feature
Description
This PR adds a feature to search and display GitHub organization data using the GitHub API.
Features
Why this change?
This aligns with the goal of OrgExplorer to provide an interface for exploring GitHub organizations.
Screenshots
Summary by CodeRabbit
New Features
Documentation