Merge pull request #45 from TechTOnions/main

Deploy Commit

.github/workflows/Frontend-deploy.yml

@@ -1,43 +1,65 @@
 on:
   push:
     branches:
-    - Deployment-branch
-    - release/*
-
+      - Deployment-branch
+      - release/*
+  pull_request:
+    branches:
+      - main
+
 defaults:
-    run:
-      working-directory: ./Frontend
+  run:
+    working-directory: ./Frontend
 
 env:
   VITE_DISCORD_AUTH: ${{ secrets.VITE_DISCORD_AUTH }}
   VITE_IP: ${{ secrets.VITE_IP }}
   VITE_LOGOUT_URI: ${{ secrets.VITE_LOGOUT_URI }}
   VITE_GITHUB_URI: ${{ secrets.VITE_GITHUB_URI }}
-      
+
 jobs:
   build:
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.x'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build the project
+        run: npm run build
+
+      - name: Deploy to Server
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} 
+          SSH_HOST: ${{ secrets.SSH_HOST }}               
+          SSH_USERNAME: ${{ secrets.SSH_USERNAME }}      
+        run: |
+          echo "$SSH_PRIVATE_KEY" > private_key
+          chmod 600 private_key
+          rsync -avz -e "ssh -i private_key -o StrictHostKeyChecking=no" dist/. $SSH_USERNAME@$SSH_HOST:/www/wwwroot/TechTOnions_Bot/Frontend/
+
+  format:
+    if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v2
-
-    - name: Set up Node.js
-      uses: actions/setup-node@v2
-      with:
-        node-version: '20.x'
-
-    - name: Install dependencies
-      run: npm install
-
-    - name: Build the project
-      run: npm run build
-
-    - name: Deploy to Server
-      env:
-        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} 
-        SSH_HOST: ${{ secrets.SSH_HOST }}               
-        SSH_USERNAME: ${{ secrets.SSH_USERNAME }}      
-      run: |
-        echo "$SSH_PRIVATE_KEY" > private_key
-        chmod 600 private_key
-        rsync -avz -e "ssh -i private_key -o StrictHostKeyChecking=no" dist/. $SSH_USERNAME@$SSH_HOST:/www/wwwroot/TechTOnions_Bot/Frontend/
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.x'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Format code
+        run: npm run format

Frontend/.eslintrc.cjs

@@ -14,5 +14,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    "react-hooks/rules-of-hooks": "off"
   },
 }

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,
-})
+export const ToggleState = atom({
+  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 loading = atom({
-    key:"loading",
-    default:true
-})
+export const UserData = atom<userData>({
+  key: "UserData",
+  default: {
+    user: {} as User,
+    guilds: [] as Guild[],
+  },
+});
+export const Loading = atom({
+  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>
   );
-};
+};