format: install and run prettier

kossiitkgp · Nov 18, 2024 · f8ecef3 · f8ecef3
1 parent 764bec9
commit f8ecef3
Show file tree

Hide file tree

Showing 49 changed files with 1,912 additions and 1,530 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "fuse.js": "^7.0.0",
@@ -28,6 +29,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
     "globals": "^15.11.0",
+    "prettier": "3.3.3",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.10.0",
     "vite": "^5.4.10"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -6,9 +6,15 @@ export const AboutSection = () => {
     <div id="about" className="about-container">
       <div className="about-text">
         <h1 className="about-title">About KWoC</h1>
-        <p className="about-content">Kharagpur Winter of Code is a 5-week long online program for students who are new to open source software development. The program not only helps students to get involved in open source, but also prepares them for many open source summer programs; Google Summer of Code being one of them.</p>
+        <p className="about-content">
+          Kharagpur Winter of Code is a 5-week long online program for students
+          who are new to open source software development. The program not only
+          helps students to get involved in open source, but also prepares them
+          for many open source summer programs; Google Summer of Code being one
+          of them.
+        </p>
       </div>
       <img className="about-bottom-image" src={cloudBottom} />
-    </div >
-  )
-}
+    </div>
+  );
+};
diff --git a/src/components/DashboardElements.tsx b/src/components/DashboardElements.tsx
@@ -1,74 +1,78 @@
 import { Link } from "react-router-dom";
 import { useAuthContext } from "../util/auth";
 import "../styles/Profile.css";
-import "../styles/Resources.css"; 
+import "../styles/Resources.css";
 
 export function Profile() {
-    const authContext = useAuthContext();
-    return (
-      <div className="profileContainer">
-        <img
-            className="profilePicture"
-            src={`https://github.com/${authContext.userData.username}.png`}
-        />
-        <h2 className="profileName">
+  const authContext = useAuthContext();
+  return (
+    <div className="profileContainer">
+      <img
+        className="profilePicture"
+        src={`https://github.com/${authContext.userData.username}.png`}
+      />
+      <h2 className="profileName">
         {authContext.userData.name}
         <br />
         <span className="profileUsername">
-            (@{authContext.userData.username})
+          (@{authContext.userData.username})
         </span>
-        </h2>
-        <div className="buttonContainer">
-          <Link className="editButton" to={authContext.formLink}>
-            Edit
-          </Link>
-          <button className="signOutButton" onClick={authContext.onLogout}>
-            Sign Out
-          </button>
-        </div>
+      </h2>
+      <div className="buttonContainer">
+        <Link className="editButton" to={authContext.formLink}>
+          Edit
+        </Link>
+        <button className="signOutButton" onClick={authContext.onLogout}>
+          Sign Out
+        </button>
       </div>
-    );
-  }
+    </div>
+  );
+}
 
 interface ResourceItem {
-    url: string;
-    avatar: string;
-    message: string;
-    noAvatarRounding?: boolean;
+  url: string;
+  avatar: string;
+  message: string;
+  noAvatarRounding?: boolean;
 }
 
 // Define the props for the Resources component
 interface ResourcesProps {
-    title: string;
-    resources: ResourceItem[]; 
+  title: string;
+  resources: ResourceItem[];
 }
 
 export function Resources({ title, resources }: ResourcesProps) {
-    return (
-        <div>
-        <h3 className="resourcesContainer">{title}</h3>
-        <div className="resourceList">
-            {resources.map((resource, i) => (
-            <a
-                key={i}
-                target="_blank"
-                className="resourceLink"
-                href={resource.url}
-                rel="noopener noreferrer" // Added for security when linking to external URLs
-            >
-                <li className="resourceItem">
-                <div
-                    className={`avatarWrapper ${
-                    resource.noAvatarRounding ? "noAvatarRounding" : ""
-                    }`}
-                >
-                    <img src={resource.avatar} className="avatarImage" alt="Avatar" />
-                </div>
-                <div className="messageText">{resource.message}</div>
-                </li>
-            </a>
-            ))}
-        </div>
-        </div>
-    );
-}
+  return (
+    <div>
+      <h3 className="resourcesContainer">{title}</h3>
+      <div className="resourceList">
+        {resources.map((resource, i) => (
+          <a
+            key={i}
+            target="_blank"
+            className="resourceLink"
+            href={resource.url}
+            rel="noopener noreferrer" // Added for security when linking to external URLs
+          >
+            <li className="resourceItem">
+              <div
+                className={`avatarWrapper ${
+                  resource.noAvatarRounding ? "noAvatarRounding" : ""
+                }`}
+              >
+                <img
+                  src={resource.avatar}
+                  className="avatarImage"
+                  alt="Avatar"
+                />
+              </div>
+              <div className="messageText">{resource.message}</div>
+            </li>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,12 @@
 import "../styles/Footer.css";
-import { ROUTER_PATHS, DISCORD_INVITE, KOSS_CONTACT_EMAIL, KOSS_LINKEDIN_URL, KOSS_TWITTER_URL, KOSS_WEBSITE_URL } from "../util/constants";
+import {
+  ROUTER_PATHS,
+  DISCORD_INVITE,
+  KOSS_CONTACT_EMAIL,
+  KOSS_LINKEDIN_URL,
+  KOSS_TWITTER_URL,
+  KOSS_WEBSITE_URL,
+} from "../util/constants";
 
 const Footer = () => {
   return (
@@ -8,21 +15,41 @@ const Footer = () => {
         <div className="footer-columns">
           <div className="footer-column">
             <h2>Social Groups</h2>
-            <p><a href={DISCORD_INVITE}>Discord</a></p>
-            <p><a href={KOSS_LINKEDIN_URL}>LinkedIn</a></p>
-            <p><a href={KOSS_TWITTER_URL}>Twitter</a></p>
+            <p>
+              <a href={DISCORD_INVITE}>Discord</a>
+            </p>
+            <p>
+              <a href={KOSS_LINKEDIN_URL}>LinkedIn</a>
+            </p>
+            <p>
+              <a href={KOSS_TWITTER_URL}>Twitter</a>
+            </p>
           </div>
           <div className="footer-column">
             <h2>Quick Links</h2>
-            <p><a href={`${ROUTER_PATHS.HOME}#timeline`}>Timeline</a></p>
-            <p><a href={ROUTER_PATHS.FAQ}>FAQs</a></p>
-            <p><a href={`${ROUTER_PATHS.HOME}#about`}>About KWoC</a></p>
+            <p>
+              <a href={`${ROUTER_PATHS.HOME}#timeline`}>Timeline</a>
+            </p>
+            <p>
+              <a href={ROUTER_PATHS.FAQ}>FAQs</a>
+            </p>
+            <p>
+              <a href={`${ROUTER_PATHS.HOME}#about`}>About KWoC</a>
+            </p>
           </div>
           <div className="footer-column">
             <h2>Other</h2>
-            <p><a href={KOSS_WEBSITE_URL}>About KOSS</a></p>
-            <p><a href="https://kwoc23.kossiitkgp.org/pastprograms">Past Programs</a></p>
-            <p><a href={KOSS_CONTACT_EMAIL}>[email protected]</a></p>
+            <p>
+              <a href={KOSS_WEBSITE_URL}>About KOSS</a>
+            </p>
+            <p>
+              <a href="https://kwoc23.kossiitkgp.org/pastprograms">
+                Past Programs
+              </a>
+            </p>
+            <p>
+              <a href={KOSS_CONTACT_EMAIL}>[email protected]</a>
+            </p>
           </div>
         </div>
       </div>
@@ -34,4 +61,4 @@ const Footer = () => {
   );
 };
 
-export default Footer
+export default Footer;
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
@@ -159,4 +159,4 @@ function FormInput(props: IFormInputProps) {
   );
 }
 
-export default Form;
+export default Form;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -6,5 +6,5 @@ export const Header = () => {
     <div className="header-container">
       <Navbar />
     </div>
-  )
-}
+  );
+};