Added code formating

Frontend/.prettierignore

@@ -0,0 +1,16 @@
+dist 
+node_modules
+.env
+tailwind.config.js
+
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all HTML files:
+**/*.html
+
+vite-env.d.ts 
+vite.config.ts
+
+**.md

Frontend/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "all",
+    "printWidth": 80,
+    "useTabs": false,
+    "endOfLine":"auto"  
+}

Frontend/README.md

@@ -17,12 +17,12 @@ If you are developing a production application, we recommend updating the config
 export default {
   // other rules...
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
     tsconfigRootDir: __dirname,
   },
-}
+};
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`

Frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite --port 3000",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview "
+    "preview": "vite preview ",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "checks":"npm run lint && npm run format"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -33,6 +35,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.35",
+    "prettier": "3.3.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.0"

Frontend/src/Atoms/State.tsx

@@ -1,49 +1,57 @@
-import { atom} from "recoil";
-import { ChannelListArray, Guild, Roles, ServerList,ServerWithPresenceObject, User, userData} from "../Interface";
+import { atom } from "recoil";
+import {
+  ChannelListArray,
+  Guild,
+  Roles,
+  ServerList,
+  ServerWithPresenceObject,
+  User,
+  userData,
+} from "../Interface";
 
 export const ToggleState = atom({
-    key: "toggleState",
-    default: false,
-})
+  key: "toggleState",
+  default: false,
+});
 export const ModerationPath = atom({
-    key:"ModerationPath",
-    default:" "
-})
+  key: "ModerationPath",
+  default: " ",
+});
 export const NotifPopup = atom({
-    key:"NotifPopup",
-    default:false
-})
+  key: "NotifPopup",
+  default: false,
+});
 
-export const UserData =atom<userData>({
-    key:"UserData",
-    default:{
-        user:{} as User,
-        guilds:[] as Guild[]
-    } 
-})
+export const UserData = atom<userData>({
+  key: "UserData",
+  default: {
+    user: {} as User,
+    guilds: [] as Guild[],
+  },
+});
 export const Loading = atom({
-    key:"loading",
-    default:true
-})
+  key: "loading",
+  default: true,
+});
 export const ChannelId = atom({
-    key:"ChannelIt",
-    default:""
-})
+  key: "ChannelIt",
+  default: "",
+});
 
 export const ChannelArray = atom<ChannelListArray[]>({
-    key:"ChannelArrayInterface",
-    default: [] as ChannelListArray[]
-})
+  key: "ChannelArrayInterface",
+  default: [] as ChannelListArray[],
+});
 export const RoleArray = atom<Roles[]>({
-    key:'roles',
-    default:[] as Roles[]
-})
+  key: "roles",
+  default: [] as Roles[],
+});
 
 export const AllServer = atom<ServerList[]>({
-    key:"Server List",
-    default:[] as ServerList[]
-})
-export const ServerWithPresenceArray=atom<ServerWithPresenceObject[]>({
-    key:"Server with Presence",
-    default:[] as ServerWithPresenceObject[]
-})
+  key: "Server List",
+  default: [] as ServerList[],
+});
+export const ServerWithPresenceArray = atom<ServerWithPresenceObject[]>({
+  key: "Server with Presence",
+  default: [] as ServerWithPresenceObject[],
+});

Frontend/src/Components/Button.tsx

@@ -1,29 +1,37 @@
 import { Link } from "react-router-dom";
 
-interface Props{
-    text:string;
-    route:string;
-    setRed?:boolean
+interface Props {
+  text: string;
+  route: string;
+  setRed?: boolean;
 }
-export const  Button=(props:Props)=> {
-  const{route,text,setRed}=props  
+export const Button = (props: Props) => {
+  const { route, text, setRed } = props;
   return (
-    <div className={ `${setRed?`bg-gradient-to-r from-red-500 to-red-700`:`bg-gradient-to-r from-cyan-500 to-blue-500`} px-2 py-1 duration-300 text-base ease-in-out rounded-md cursor-pointer hover:bg-sidebarHead transiontion `}>
-        {
-          setRed?<button>  
+    <div
+      className={`${setRed ? `bg-gradient-to-r from-red-500 to-red-700` : `bg-gradient-to-r from-cyan-500 to-blue-500`} px-2 py-1 duration-300 text-base ease-in-out rounded-md cursor-pointer hover:bg-sidebarHead transiontion `}
+    >
+      {setRed ? (
+        <button>
           <Link to={route} target="_blank " rel="noopener noreferrer">
-              {text}
+            {text}
           </Link>
-      </button>:<button>  
-            <Link to={route}>
-                {text}
-            </Link>
         </button>
-        }
+      ) : (
+        <button>
+          <Link to={route}>{text}</Link>
+        </button>
+      )}
     </div>
-  )
-}
-export const SubmitButton = ({handleSubmit,text}:{handleSubmit: () => void; text:string}) => {
+  );
+};
+export const SubmitButton = ({
+  handleSubmit,
+  text,
+}: {
+  handleSubmit: () => void;
+  text: string;
+}) => {
   return (
     <button
       onClick={() => {
@@ -34,4 +42,4 @@ export const SubmitButton = ({handleSubmit,text}:{handleSubmit: () => void; text
       {text}
     </button>
   );
-};
+};

Frontend/src/Components/Card.tsx

@@ -1,35 +1,29 @@
-import {Button }from "./Button";
+import { Button } from "./Button";
 
 interface Props {
-    img:string;
-    heading:string;
-    description:string;
-    buttonDesc:string;
-    route:string
-
+  img: string;
+  heading: string;
+  description: string;
+  buttonDesc: string;
+  route: string;
 }
 
-function Card(props:Props):JSX.Element {
-    const {img,heading,description,buttonDesc,route}= props
+function Card(props: Props): JSX.Element {
+  const { img, heading, description, buttonDesc, route } = props;
   return (
     <div className="flex flex-col items-start justify-center gap-1 p-4 text-white rounded-lg bg-cardBox ">
-        <div className="my-1">
-            <img src={img} className="h-7 w-7" alt="Icon" />
-        </div>
-        <div className="my-1 text-xl font-medium text-white">
-            {heading}
-        </div>
-        <div className="my-1 text-base font-normal cursor-default ">
-            {description}
-        </div>
-        <div className="my-1">
-            <Button
-                 route={route}
-                 text={buttonDesc}
-            />
-        </div>
+      <div className="my-1">
+        <img src={img} className="h-7 w-7" alt="Icon" />
+      </div>
+      <div className="my-1 text-xl font-medium text-white">{heading}</div>
+      <div className="my-1 text-base font-normal cursor-default ">
+        {description}
+      </div>
+      <div className="my-1">
+        <Button route={route} text={buttonDesc} />
+      </div>
     </div>
-  )
+  );
 }
 
-export default Card
+export default Card;