Create team page

.eslintrc

@@ -18,7 +18,7 @@
     "import/order": "off",
     "import/prefer-default-export": "off",
     "jsx-a11y/label-has-associated-control": "off",
-    "no-console": "error",
+    "no-console": "off",
     "no-restricted-globals": "off",
     "no-unexpected-multiline": "off",
     "no-use-before-define": "off",

.gitignore

@@ -134,3 +134,5 @@ dist
 
 # IDE files
 .idea
+
+packages/client/build

packages/client/.eslintrc

@@ -5,7 +5,6 @@
     "browser": true
   },
   "rules": {
-    "no-console": "error",
     "react/destructuring-assignment": "off",
     "react/jsx-boolean-value": "off",
     "react/jsx-filename-extension": "off",

packages/client/src/containers/CreateTeamPage/CreateTeam.css

@@ -0,0 +1,79 @@
+.create-team {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+form {
+  margin-bottom: 20px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input[type='text'],
+input[type='email'],
+select {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+button {
+  padding: 10px 20px;
+  margin-top: 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+button:first-child {
+  margin-right: 0;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+li button {
+  margin-left: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+li button:hover {
+  background-color: #c82333;
+}

packages/client/src/containers/CreateTeamPage/CreateTeam.js

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import './CreateTeam.css';
+
+function CreateTeam() {
+  const [teamName, setTeamName] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLasttName] = useState('');
+  const [email, setEmail] = useState('');
+  const [teamMembers, setTeamMembers] = useState([]);
+  const [employees] = useState([
+    { id: 1, firstName: 'John', lastName: 'Doe', email: '[email protected]' },
+    { id: 2, firstName: 'Jane', lastName: 'Smith', email: '[email protected]' },
+    {
+      id: 3,
+      firstName: 'Alice',
+      lastName: 'Johnson',
+      email: '[email protected]',
+    },
+  ]);
+
+  const handleInputChange = (inputType, e) => {
+    if (inputType === 'firstNameInput') {
+      setFirstName(e.target.value);
+    } else if (inputType === 'lastNameInput') {
+      setLasttName(e.target.value);
+    } else if (inputType === 'emailInput') {
+      setEmail(e.target.value);
+    }
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    if (!teamMembers.length) {
+      // eslint-disable-next-line no-alert
+      alert('Please add at least one member to the team.');
+    }
+  };
+
+  const handleAddNewMember = () => {
+    const existingTeamMember = teamMembers.find(
+      (member) => member.email === email,
+    );
+
+    if (existingTeamMember) {
+      // eslint-disable-next-line no-alert
+      alert('The member already exist in the team');
+      return;
+    }
+
+    if (!firstName || !lastName || !email) {
+      // eslint-disable-next-line no-alert
+      alert('Please input first name, last name & email');
+    } else {
+      const newMember = {
+        id: null,
+        firstName,
+        lastName,
+        email,
+      };
+
+      teamMembers.push(newMember);
+
+      setTeamMembers([...teamMembers]);
+      setFirstName('');
+      setLasttName('');
+      setEmail('');
+    }
+  };
+
+  const addExcistingMember = (e) => {
+    const existingTeamMember = teamMembers.find(
+      (member) => member.email === e.target.value,
+    );
+
+    if (existingTeamMember) {
+      // eslint-disable-next-line no-alert
+      alert('The member already exist in the team');
+    } else {
+      const memeber = employees.find(
+        (member) => member.email === e.target.value,
+      );
+
+      teamMembers.push(memeber);
+      setTeamMembers([...teamMembers]);
+    }
+  };
+
+  const handleDelete = (emailToDelete) => {
+    const newTeamMembers = teamMembers.filter(
+      (member) => member.email !== emailToDelete,
+    );
+
+    setTeamMembers(newTeamMembers);
+  };
+
+  return (
+    <div className="create-team">
+      <h1>Create New Team</h1>
+      <form onSubmit={handleSubmit}>
+        <label>Team Name</label>
+        <input
+          type="text"
+          name="teamName"
+          placeholder="Team Name"
+          value={teamName}
+          onChange={(e) => setTeamName(e.target.value)}
+          required
+        />
+
+        <button type="submit">Create Team</button>
+        <br />
+        <h2>Members</h2>
+        <br />
+
+        <div>
+          <label>First Name</label>
+          <input
+            type="text"
+            name="firstName"
+            placeholder="First Name"
+            value={firstName}
+            onChange={(e) => handleInputChange('firstNameInput', e)}
+          />
+          <label>Last Name</label>
+          <input
+            type="text"
+            name="lastName"
+            placeholder="Last Name"
+            value={lastName}
+            onChange={(e) => handleInputChange('lastNameInput', e)}
+          />
+          <br />
+          <label>Email</label>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => handleInputChange('emailInput', e)}
+          />
+          <br />
+        </div>
+        <label>Select an employee</label>
+        <select onChange={(e) => addExcistingMember(e)}>
+          <option value="">Select an existing employee</option>
+          {employees.map((employee) => (
+            <option key={employee.id} value={employee.email}>
+              {employee.firstName} {employee.lastName}
+            </option>
+          ))}
+        </select>
+        <button type="button" onClick={handleAddNewMember}>
+          Add Member
+        </button>
+
+        <p>Team Secret Code:</p>
+      </form>
+
+      <div>
+        <h2>Team Members</h2>
+        <ul>
+          {teamMembers.map((member) => (
+            <li key={member.email}>
+              {member.firstName} {member.lastName} - {member.email}
+              <button type="button" onClick={() => handleDelete(member.email)}>
+                x
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default CreateTeam;

packages/client/src/containers/LandingPage/LandingPage.Container.js

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { apiURL } from '../../apiURL';
+import React from 'react';
 import './LandingPage.Style.css';
+import CreateTeam from '../CreateTeamPage/CreateTeam';
 
 export const LandingPage = () => {
-  const [exampleResources, setExampleResources] = useState([]);
+  /* const [exampleResources, setExampleResources] = useState([]);
   useEffect(() => {
     async function fetchExampleResources() {
       const response = await fetch(`${apiURL()}/exampleResources`);
@@ -12,14 +12,15 @@ export const LandingPage = () => {
     }
 
     fetchExampleResources();
-  }, []);
+  }, []); */
 
   return (
     <div className="landing-page-container">
       <span>Landing Page</span>
-      {exampleResources.map((example) => (
+      {/*  {exampleResources.map((example) => (
         <div key={example.id}>{example.title}</div>
-      ))}
+      ))} */}
+      <CreateTeam />
     </div>
   );
 };

packages/server/config/database.js

@@ -0,0 +1,28 @@
+// const mysql = require('mysql');
+
+// const con = mysql.createConnection({
+//   host: "localhost",
+//   user: "yourusername",
+//   password: "yourpassword",
+//   database: "mydb"
+// });
+
+// const connectToDatabase = () => {
+//   con.connect((err) => {
+//     if (err) {
+//       setTimeout(connectToDatabase, 2000); // try to reconnect every 2 seconds
+//     } else {
+//       // console.log("Connected to database!");
+//     }
+//   });
+
+//   con.on('error', (err) => {
+//     if(err.code === 'PROTOCOL_CONNECTION_LOST') {
+//       connectToDatabase();
+//     } else {
+//       throw err;
+//     }
+//   });
+// }
+
+// connectToDatabase();

packages/server/knexfile.js

@@ -16,6 +16,8 @@ module.exports = {
       directory: path.join(__dirname, '/seeds/development'),
     },
   },
+  // Existing code...
+
   production: {
     client: 'mysql2',
     connection: {
@@ -26,6 +28,9 @@ module.exports = {
       database: process.env.MYSQL_DATABASE,
     },
     pool: { min: 0, max: 7 },
+    migrations: {
+      directory: path.join(__dirname, '/migrations'),
+    },
     seeds: {
       directory: path.join(__dirname, '/seeds/production'),
     },

packages/server/migrations/20240321154351_create_teams_table.js

@@ -0,0 +1,19 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = function (knex) {
+  return knex.schema.createTable('Teams', (table) => {
+    table.increments('id').primary();
+    table.string('team_name').notNullable();
+    table.string('team_code').notNullable();
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = function (knex) {
+  return knex.schema.dropTable('Teams');
+};