chore: made the code prettier and lint-free

depapp · Feb 7, 2024 · 24033ef · 24033ef
1 parent c49997c
commit 24033ef
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 72 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/src/App.jsx b/src/App.jsx
@@ -3,17 +3,16 @@ import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
 import { Avatar } from "primereact/avatar";
 import { InputText } from "primereact/inputtext";
-import { Dropdown } from "primereact/dropdown"; 
+import { Dropdown } from "primereact/dropdown";
 import { Header } from "./components/Header";
 import { FilterMatchMode } from "primereact/api";
-import { Button } from 'primereact/button';
+import { Button } from "primereact/button";
 
 export default function App() {
   const [isLoading, setIsLoading] = useState(true);
   const [lastUpdated, setLastUpdated] = useState(null);
   const [data, setData] = useState([]);
 
-
   useEffect(() => {
     fetch(
       "https://raw.githubusercontent.com/depapp/most-active-github-users-counter/master/indogithubers.json"
@@ -33,18 +32,20 @@ export default function App() {
         setLastUpdated(lastUpdated);
       });
   }, []);
-  const filterOptions = [ 
-  { name: "Sort by Followers", value: "followers" },
-  { name: "Sort by Contributions", value: "contributions" },
-];
+  const filterOptions = [
+    { name: "Sort by Followers", value: "followers" },
+    { name: "Sort by Contributions", value: "contributions" },
+  ];
 
-const handleShare = (user) => {
-  const tweetText = `Hey X, here are my GitHub stats:\n\nUsername: ${user.username}\n\n🏅\nFollowers Rank: #${user.followerRank}\nContribution Rank: #${user.contributionRank}\n\n🏆\nTotal Followers: ${user.followers}\nTotal Contribution: ${user.contributions}\n\nGo check yours at https://indogithubers.vercel.app #IndoGitHubers`;
-  const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`;
-  window.open(url, '_blank');
-};
+  const handleShare = (user) => {
+    const tweetText = `Hey X, here are my GitHub stats:\n\nUsername: ${user.username}\n\n🏅\nFollowers Rank: #${user.followerRank}\nContribution Rank: #${user.contributionRank}\n\n🏆\nTotal Followers: ${user.followers}\nTotal Contribution: ${user.contributions}\n\nGo check yours at https://indogithubers.vercel.app #IndoGitHubers`;
+    const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+      tweetText
+    )}`;
+    window.open(url, "_blank");
+  };
 
-const [sortBy, setSortBy] = useState(filterOptions[0].value); 
+  const [sortBy, setSortBy] = useState(filterOptions[0].value);
 
   const formatNumberWithThousandsSeparator = (number) => {
     return number.toLocaleString();
@@ -73,26 +74,25 @@ const [sortBy, setSortBy] = useState(filterOptions[0].value);
   };
 
   const sortData = (field) => {
-    const sortedData = [...data.users].sort((a, b) => b[field] - a[field]); 
+    const sortedData = [...data.users].sort((a, b) => b[field] - a[field]);
     setData({ ...data, users: sortedData });
-};
-
+  };
 
   const renderHeader = () => {
     return (
       <div className="flex justify-content-end">
-      <Dropdown 
-      value={sortBy}
-      options={filterOptions}
-      optionLabel="name"
-      onChange={(e) => {
-        setSortBy(e.value);
-        sortData(e.value);
-      }}
-      placeholder="Sort By"
-      style={{ marginRight: '10px' }}
-    />
-    
+        <Dropdown
+          value={sortBy}
+          options={filterOptions}
+          optionLabel="name"
+          onChange={(e) => {
+            setSortBy(e.value);
+            sortData(e.value);
+          }}
+          placeholder="Sort By"
+          style={{ marginRight: "10px" }}
+        />
+
         <span className="p-input-icon-left">
           <i className="pi pi-search" />
           <InputText
@@ -102,7 +102,7 @@ const [sortBy, setSortBy] = useState(filterOptions[0].value);
                 global: {
                   value: e.target.value,
                   matchMode: FilterMatchMode.CONTAINS,
-                  field: sortBy 
+                  field: sortBy,
                 },
               })
             }
@@ -195,7 +195,13 @@ const [sortBy, setSortBy] = useState(filterOptions[0].value);
             field="share"
             header="Share"
             style={{ width: "8%" }}
-            body={(rowData) => <Button icon="pi pi-share-alt" severity="secondary" onClick={() => handleShare(rowData)} />}
+            body={(rowData) => (
+              <Button
+                icon="pi pi-share-alt"
+                severity="secondary"
+                onClick={() => handleShare(rowData)}
+              />
+            )}
           />
         </DataTable>
       )}

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -37,38 +37,46 @@ export const Header = ({ data, lastUpdated }) => {
 
   return (
     <div className="header-content" leading-3>
-        <Analytics />
-        <Tooltip target=".custom-target-icon" />
-        <h1>IndoGitHubers</h1>
-        <h2>
-            Check Your GitHub Rank{" "}
-            <i
-                className="custom-target-icon pi pi-info-circle"
-                style={{ fontSize: "1.25rem" }}
-                data-pr-tooltip={`to be indexed by this app, your GitHub account must meet two requirements:\n\n1. have at least ${data.MinimumFollowerCount} followers.\n2. set 'Indonesia' as your profile location.`}
-                data-pr-position="right"
-            ></i>
-        </h2>
-        <h3>
-            Last Updated: {formatLastUpdated()}{" "}
-            <i
-                className="custom-target-icon pi pi-info-circle"
-                style={{ fontSize: "1rem" }}
-                data-pr-tooltip={`this data is not updated in real time. the data will be updated daily.`}
-                data-pr-position="right"
-            ></i>
-        </h3>
-        <h3>
-          Embed Your GitHub Rank using <a href="https://github.com/depapp/IndoGitHubers/blob/main/BADGE_USAGE.md" target="_blank">IndoGitHubers-badge</a>
-        </h3>
-        <div style={{ position: 'absolute', top: '10px', right: '10px' }}>
+      <Analytics />
+      <Tooltip target=".custom-target-icon" />
+      <h1>IndoGitHubers</h1>
+      <h2>
+        Check Your GitHub Rank{" "}
+        <i
+          className="custom-target-icon pi pi-info-circle"
+          style={{ fontSize: "1.25rem" }}
+          data-pr-tooltip={`to be indexed by this app, your GitHub account must meet two requirements:\n\n1. have at least ${data.MinimumFollowerCount} followers.\n2. set 'Indonesia' as your profile location.`}
+          data-pr-position="right"
+        ></i>
+      </h2>
+      <h3>
+        Last Updated: {formatLastUpdated()}{" "}
+        <i
+          className="custom-target-icon pi pi-info-circle"
+          style={{ fontSize: "1rem" }}
+          data-pr-tooltip={`this data is not updated in real time. the data will be updated daily.`}
+          data-pr-position="right"
+        ></i>
+      </h3>
+      <h3>
+        Embed Your GitHub Rank using{" "}
+        <a
+          href="https://github.com/depapp/IndoGitHubers/blob/main/BADGE_USAGE.md"
+          target="_blank"
+        >
+          IndoGitHubers-badge
+        </a>
+      </h3>
+      <div style={{ position: "absolute", top: "10px", right: "10px" }}>
         <i
           className="pi pi-github"
-          style={{ fontSize: '4rem', cursor: 'pointer' }}
-          onClick={() => window.open('https://github.com/depapp/IndoGitHubers', '_blank')}
+          style={{ fontSize: "4rem", cursor: "pointer" }}
+          onClick={() =>
+            window.open("https://github.com/depapp/IndoGitHubers", "_blank")
+          }
           title="hit me up on GitHub!"
         ></i>
-        </div>
+      </div>
     </div>
-);
+  );
 };
diff --git a/src/index.css b/src/index.css
@@ -22,7 +22,7 @@ body {
 .header-content {
   display: flex;
   flex-direction: column;
-  align-items: center;  
+  align-items: center;
   justify-content: center;
   line-height: 1em;
 }
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,14 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import 'primereact/resources/themes/lara-light-indigo/theme.css'
-import 'primereact/resources/primereact.css'
-import 'primeicons/primeicons.css'
-import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "primereact/resources/themes/lara-light-indigo/theme.css";
+import "primereact/resources/primereact.css";
+import "primeicons/primeicons.css";
+import "./index.css";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'))
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );