Creating job post form linked with google form to get the responses f…

…rom the applicants

src/App.tsx

@@ -20,6 +20,7 @@ import ImportTraineeDetailsFromGoogleSheet from "./pages/importAndSaveManyTraine
 
 const Counter = React.lazy(() => import("./components/Counter/Counter"));
 import Trash from "./pages/Trash/Trash";
+import CreateFormPage from "./pages/JobPosting/GoogleForms";
 import ApplicationCycle from "./pages/ApplicationCycle/ApplicationCycle";
 import LoginPage from "./pages/LoginPage";
 import PrivateRoute from "./pages/PrivateRoute";
@@ -150,6 +151,14 @@ function App() {
           </PrivateRoute>
         }
       />
+      <Route
+        path="/CreateFormPage"
+        element={
+          <PrivateRoute>
+            <CreateFormPage />
+          </PrivateRoute>
+        }
+      />
       <Route path="/login" element={<LoginPage />} />
       <Route
         path="/admins"

src/components/Job-Form/Jobform.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import * as icons from 'react-icons/ai';
+import { AiOutlinePlus } from 'react-icons/ai';
+
+const CreateForm = () => {
+  return (
+    <div>
+      <div className='flex '>
+        <div className='flex px-5 py-2 pb-8 w-fit'>
+          {/* onClick Button open this link: https://docs.google.com/forms/u/0/ in new tab */}
+          <button
+            onClick={() =>
+              window.open('https://docs.google.com/forms/u/0/', '_blank')
+            }
+            className='flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 text-white font-medium cursor-pointer'>
+            <icons.AiOutlinePlus className='mt-1 mr-1 font-bold' /> Create Job post
+          </button>
+          <div></div>
+        </div>
+        <div>
+          <button className='flex bg-primary dark:bg-[#56C870] rounded-md py-2 mt-2 px-4 text-white font-medium cursor-pointer'>
+            <icons.AiOutlineSearch className='mt-1 mr-1 font-bold' /> Search
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateForm;

src/components/Job-Form/ResponseList.tsx

@@ -0,0 +1,68 @@
+// import axios from 'axios';
+// import React, { useEffect, useState } from 'react';
+
+// const ResponseList = () => {
+//   const [responses, setResponses] = useState([]);
+//   const GOOGLE_APPS_SCRIPT_URL =
+//     'https://script.google.com/macros/s/AKfycbxtXDv1viDZPOOp7h7BI1-Lo8xghOfWOq-a5Z03xvjmgWlADJTLxCEB38Hiihs4fY86/exec';
+//   useEffect(() => {
+//     // if (GOOGLE_APPS_SCRIPT_URL) {
+//     //   fetch(GOOGLE_APPS_SCRIPT_URL)
+//     //     .then((response) => {
+//     //       if (!response.ok) {
+//     //         throw new Error('Network response was not ok');
+//     //       }
+//     //       return response.json();
+//     //     })
+//     //     .then((data) => {
+//     //       setResponses(data);
+//     //     })
+//     //     .catch((error) => {
+//     //       console.error('Error fetching responses:', error);
+//     //     });
+//     // }
+//     console.log('heree');
+//     axios.get(GOOGLE_APPS_SCRIPT_URL).then((res) => {
+//       console.log(res);
+//     });
+//   }, [GOOGLE_APPS_SCRIPT_URL]);
+
+//   return (
+//     <div>
+//       <h2>Form Responses</h2>
+//       <ul>
+//         {responses.length > 0 ? (
+//           responses.map((response, index) => (
+//             <li key={index}>
+//               {/* <strong>Timestamp:</strong> {response.Timestamp}<br /> */}
+//               <strong>Full Name:</strong> {response['1. Full Name:\n']}
+//               <br />
+//               <strong>Years of DevOps Experience:</strong>{' '}
+//               {response['2. Years of DevOps Experience:\n']}
+//               <br />
+//               <strong>Experience with DevOps tools and technologies:</strong>{' '}
+//               {
+//                 response[
+//                   '3. Describe your experience with DevOps tools and technologies (e.g., Docker, Kubernetes, Jenkins, Ansible, Terraform).\n'
+//                 ]
+//               }
+//               <br />
+//               <strong>Resume/CV Upload:</strong>{' '}
+//               <a
+//                 href={response['4. Resume/CV Upload:\n']}
+//                 target="_blank"
+//                 rel="noopener noreferrer"
+//               >
+//                 Link
+//               </a>
+//             </li>
+//           ))
+//         ) : (
+//           <li>No responses available.</li>
+//         )}
+//       </ul>
+//     </div>
+//   );
+// };
+
+// export default ResponseList;

src/components/Job-Form/Responseform.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import * as icons from 'react-icons/ai';
+import axios from 'axios'; 
+
+const ResponseForm = () => {
+  const [formData, setFormData] = useState({
+    link: '',
+    title: '',
+    category: '',
+    createApplication: '',
+    description: '',
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  // Handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    // Define the GraphQL mutation
+    const graphqlQuery = `
+    mutation CreateApplication(
+      $link: String!
+      $title: String!
+      $category: String!
+      $description: String!
+    ) {
+      createApplication(
+        link: $link
+        title: $title
+        category: $category
+        description: $description
+      ) {
+        id
+        link
+        title
+        category
+        description
+      }
+    }
+  `;
+  const variables = {
+    link: formData.link,
+    title: formData.title,
+    category: formData.category,
+    description: formData.description,
+  };
+
+
+    try {
+      const response = await axios.post('http://localhost:3001', {
+        query: graphqlQuery,
+        variables,
+      });
+
+      if (response.data.data && response.data.data.createApplication) {
+        console.log('Response created successfully');
+        setFormData({
+          link: '',
+          title: '',
+          category: '',
+          createApplication: '',
+          description: '',
+        });
+      } else {
+        setError('Error creating response: ' + response.data.errors[0].message);
+      }
+    } catch (error) {
+      console.error('An error occurred:', error);
+      setError('An error occurred while submitting the form.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+   return (
+    <div className='max-w-lg mx-auto'>
+      <form onSubmit={handleSubmit} className='bg-gray p-6 rounded-lg shadow-md'>
+        <h2 className='text-2xl font-semibold mb-6'>Response of Job Post</h2>
+        <div className='mb-4'>
+          <label className='block text-white-700 text-sm font-bold mb-2' htmlFor='title'>
+            Title
+          </label>
+          <input
+            className='w-full text-gray-700 px-3 py-2 border rounded-lg focus:outline-none focus:border-primary'
+            type='text'
+            id='title'
+            name='title'
+            value={formData.title}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <div className='mb-4'>
+          <label className='block text-white-700 text-sm font-bold mb-2' htmlFor='category'>
+            Category
+          </label>
+          <select
+            className='w-full text-gray-700 px-3 py-2 border rounded-lg focus:outline-none focus:border-primary'
+            id='category'
+            name='category'
+            value={formData.category}
+            onChange={handleInputChange}
+            required
+          >
+            <option value=''>Select Category</option>
+            <option value='category1'>ATLP</option>
+            <option value='category2'>Frontend positions</option>
+            <option value='category3'>Full-stack positions</option>
+          </select>
+        </div>
+        <div className='mb-4'>
+          <label className='block text-white-700 text-sm font-bold mb-2' htmlFor='link'>
+            Google Form URL
+          </label>
+          <input
+            className='w-full text-gray-700 px-3 py-2 border rounded-lg focus:outline-none focus:border-primary'
+            type='text'
+            id='link'
+            name='link'
+            value={formData.link}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <div className='mb-4'>
+          <label className='block text-white-700 text-sm font-bold mb-2' htmlFor='description'>
+            Description
+          </label>
+          <textarea
+            className='w-full text-gray-700 px-3 py-2 border rounded-lg focus:outline-none focus:border-primary'
+            id='description'
+            name='description'
+            value={formData.description}
+            onChange={handleInputChange}
+            // rows='4'
+            required
+          ></textarea>
+        </div>
+        <button
+            className='flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 text-white font-medium cursor-pointer'>
+            <icons.AiOutlinePlus className='mt-1 mr-1 font-bold' />Submit
+          </button>
+      </form>
+    </div>
+  );
+};
+
+export default ResponseForm;

src/components/sidebar/sidebarItems.tsx

@@ -87,6 +87,11 @@ export const sidebarItems1 = [
     icon: <Icon icon="fa-solid:trash"></Icon>,
     title: "Trash",
   },
+  {
+    path: "/CreateFormPage",
+    icon: <Icon icon="fontisto:pie-chart-1"></Icon>,
+    title: "Job Post",
+  },
 ];
 
 export const sidebarItems2 = [

src/pages/JobPosting/GoogleForms.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import CreateForm from '../../components/Job-Form/Jobform';
+import NavSidbar from '../../components/sidebar/navHeader';
+import NavBar from '../../components/sidebar/navHeader';
+import ResponseForm from '../../components/Job-Form/Responseform'
+// import ResponseList from '../../components/Job-Form/ResponseList';
+
+const CreateFormPage = () => {
+  return (
+    <div>
+      {/* <NavSidbar /> */}
+      <NavBar />
+
+      <div className='flex dark:bg-dark-bg dark:text-white bg-[#F9F9FB] min-h-[100vh]'>
+        <div className='min-h-[50vh] w-[100%] block mt-10 md:w-[100%] md:mt-0 pl-[16rem]  pt-[80px] md:pl-0'>
+          <CreateForm />
+          <ResponseForm />
+          {/* <ResponseList /> */}
+        </div>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateFormPage;