Feature github actions

.codeclimate.yml

@@ -33,18 +33,18 @@ checks:
     config:
       threshold: 4
   similar-code:
-    enabled: true
+    enabled: false
     config:
       threshold: #language-specific defaults. overrides affect all languages.
   identical-code:
-    enabled: true
+    enabled: false
     config:
       threshold: #language-specific defaults. overrides affect all languages.
 plugins:
  rubocop:
   enabled: true
  eslint:
-  enabled: true
+  enabled: false
   channel: eslint-8
 exclude_patterns:
 - "config/"

.github/workflows/dev-pulse-ci.yml

@@ -0,0 +1,28 @@
+name: Devpulse CI
+
+on:
+  push:
+    branches: [ develop ]
+  pull_request:
+    branches: [ develop ]
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+
+    - name: Install dependencies
+      run: npm install --legacy-peer-deps
+
+    - name: Run tests
+      run: npm test
+
+    - name: Build
+      run: npm run build

package.json

@@ -36,6 +36,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-table": "^7.7.12",
     "@types/redux-state-sync": "^3.1.5",
+    "@types/uglify-js": "^3.17.5",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
@@ -107,7 +108,6 @@
     "popper.js": "^1.16.1",
     "react-datepicker": "^4.8.0",
     "react-hook-form": "^7.45.4",
-    "react-hooks-useform": "^0.1.86",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^11.18.6",
     "react-icons": "^4.6.0",

src/components/GoogleForm/SaveForm.tsx

@@ -3,6 +3,7 @@ import axios from '../../redux/actions/axiosconfig';
 import { showSuccessToast, showErrorToast } from './../../utils/toast';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
+import SelectField from "../ReusableComponents/Select"
 
 const validationSchema = Yup.object().shape({
   link: Yup.string().required('Please enter a Google Form link'),
@@ -160,11 +161,10 @@ function SaveFormDetails() {
               <div className='mt-1'>
                 <input
                   autoComplete='title'
-                  className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${
-                    formik.touched.title && formik.errors.title
-                      ? 'border-red-500'
-                      : ''
-                  }`}
+                  className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${formik.touched.title && formik.errors.title
+                    ? 'border-red-500'
+                    : ''
+                    }`}
                   id='title'
                   name='title'
                   onChange={formik.handleChange}
@@ -190,27 +190,24 @@ function SaveFormDetails() {
                   <label className='sr-only' htmlFor='jobpost'>
                     Job Post
                   </label>
-
-                  <select
-                    className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 pl-20 focus:border-indigo-500 focus:ring-indigo-500 ${
-                      formik.touched.jobpost && formik.errors.jobpost
-                        ? 'border-red-500'
-                        : ''
-                    }`}
+                  <SelectField
+                    className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 pl-20 focus:border-indigo-500 focus:ring-indigo-500 ${formik.touched.jobpost && formik.errors.jobpost
+                      ? 'border-red-500'
+                      : ''
+                      }`}
                     id='jobpost'
                     name='jobpost'
                     onChange={formik.handleChange}
                     onBlur={formik.handleBlur}
-                    value={formik.values.jobpost}>
-                    {jobposts.length === 0 && (
-                      <option disabled>Select Job Post</option>
-                    )}
-                    {jobposts.map((jobpost) => (
-                      <option key={jobpost.id} value={jobpost.id}>
-                        {jobpost.title}
-                      </option>
-                    ))}
-                  </select>
+                    value={formik.values.jobpost}
+                    options={
+                      jobposts.map((jobpost) => (
+                        <option key={jobpost.id} value={jobpost.id}>
+                          {jobpost.title}
+                        </option>
+                      ))
+                    }
+                  />
                 </div>
                 {formik.touched.jobpost && formik.errors.jobpost && (
                   <div className='text-red-500'>{formik.errors.jobpost}</div>
@@ -228,11 +225,10 @@ function SaveFormDetails() {
               <div className='mt-1'>
                 <input
                   autoComplete='link'
-                  className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${
-                    formik.touched.link && formik.errors.link
-                      ? 'border-red-500'
-                      : ''
-                  }`}
+                  className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${formik.touched.link && formik.errors.link
+                    ? 'border-red-500'
+                    : ''
+                    }`}
                   id='link'
                   name='link'
                   onChange={formik.handleChange}
@@ -255,11 +251,10 @@ function SaveFormDetails() {
 
               <div className='mt-1'>
                 <textarea
-                  className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${
-                    formik.touched.description && formik.errors.description
-                      ? 'border-red-500'
-                      : ''
-                  }`}
+                  className={`block w-full text-primary rounded-md border-gray-300 py-3 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${formik.touched.description && formik.errors.description
+                    ? 'border-red-500'
+                    : ''
+                    }`}
                   defaultValue=''
                   id='description'
                   name='description'

src/components/GoogleForm/UpdateSavedForm.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import axios from '../../redux/actions/axiosconfig';
 import { showSuccessToast, showErrorToast } from './../../utils/toast';
+import SelectField from '../ReusableComponents/Select';
 
 const UpdateSavedForm = () => {
   const [formData, setFormData] = useState({
@@ -177,18 +178,17 @@ const UpdateSavedForm = () => {
               </label>
               <div className='relative mt-1 rounded-md shadow-sm'>
                 <div className='absolute inset-y-0 left-0 flex items-center'>
-                  <select
-                    id='jobpost'
-                    name='jobpost'
-                    value={selectedJobPost}
-                    onChange={handleJobPostChange}
-                    className='block w-full text-primary rounded-md border-gray-300 py-3 px-4 pl-20 focus:border-indigo-500 focus:ring-indigo-500'>
-                    {jobposts.map((jobpost) => (
-                      <option key={jobpost.id} value={jobpost.id}>
-                        {jobpost.title}
-                      </option>
-                    ))}
-                  </select>
+                  <SelectField 
+                  id="jobpost"
+                  name='jobpost'
+                  value={selectedJobPost}
+                  onChange={handleJobPostChange}
+                  className='block w-full text-primary rounded-md border-gray-300 py-3 px-4 pl-20 focus:border-indigo-500 focus:ring-indigo-500'
+                  options={jobposts.map((jobpost)=> ({
+                    value: jobpost.id,
+                    label: jobpost.title
+                  }))}
+                  />
                 </div>
               </div>
             </div>

src/components/GradingBox.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 import { getAllAssessment } from '../redux/actions/getAssessments';
 import { useAppDispatch } from "../hooks/hooks";
+import SelectField from './ReusableComponents/Select';
 
 interface Grade {
   attribute: string;
@@ -256,25 +257,19 @@ function GradingBox(props: any) {
               </div>
               <div className="input mt-4 mb-4 h-9 ">
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
-                  <select
-                    name=""
+                  <SelectField
                     className=" dark:text-white dark:bg-dark-tertiary border border-primary rounded outline-none px-5 font-sans text-sm py-2 w-full pt-4"
-                    defaultValue=""
                     value={assessmentM}
                     onChange={(e) => {
                       setAssessmentM(e.target.value)
                       changeAssess(0, e.target.value)
                     }}
-                  >
-                    <option disabled hidden value="">{"---Choose Assessment---"}</option>
-                    {
-                      allAssessments?.data &&
-                      (allAssessments?.data.map((element) => {
-                        return (
-                          <option value={element.id}>{element.title}</option>)
-                      })
-                      )}
-                  </select>
+                    options={[{ value: "--- Choose assessment---", label: "Choose assessment" },
+                    allAssessments?.data.map((element) => ({
+                      value: element.id, label: element.label
+                    })
+                    )]}
+                  />
                   {assessmentM &&
                     <div className='h-full w-[10%] pl-2 py-1 items-center'>
                       <input

src/components/ReusableComponents/DataList.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface DatalistProps {
+    id: string;
+    options: { value: string; label?: string }[];
+    style?: React.CSSProperties; 
+  }
+
+const Datalist: React.FC<DatalistProps> = ({ id, options }) => {
+    return (
+        <datalist id={id}>
+            {options.map((option, index) => (
+                <option key={index} value={option.value}>
+                    {option.label || option.value}
+                </option>
+            ))}
+        </datalist>
+    );
+};
+
+export default Datalist;

src/components/ReusableComponents/Select.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface SelectFieldProps {
+  id?: string;
+  name?: string;
+  value?: string | number;
+  options: { value: string | number; label: string }[];
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  ref?: React.Ref<HTMLSelectElement>;
+  className?: string;
+  defaultValue?: string | number;
+  onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+}
+
+const SelectField: React.FC<SelectFieldProps> = ({
+  id,
+  name,
+  value,
+  options,
+  onChange,
+  ref,
+  className = "",
+  defaultValue,
+  onBlur
+}) => {
+  return (
+    <select
+      id={id}
+      name={name}
+      ref={ref}
+      defaultValue={defaultValue}
+      value={value}
+      onChange={onChange}
+      className={`dark:bg-dark-tertiary dark:text-white shadow appearance-none py-2 px-3 rounded w-full leading-tight focus:outline-none focus:shadow-outline ${className}`}
+      onBlur={(e: React.FocusEvent<HTMLSelectElement>) => onBlur?.(e)}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default SelectField;