CHE-15 Merging in dev and resolving conflicts

README.md

@@ -1,11 +1,182 @@
-# Code Hammers
+# Welcome to Code Hammers!
 
-## dev environment setup
+The journey of learning to code continues after graduation. Code Hammers was
+created to give Codesmith alumni the opportunity to work together and build
+something useful for the community.
 
-- Clone the repo down to your local machine.
-- Before servers are spun up you will need to run the initial tailwind script.
-  - In the **client** folder run **npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch** in your terminal. You will be prompted to install Tailwind - Choose YES. This will run the inital css build. It will also leave it running and provide live compiles for any changes to styling.
-- Open a new terminal and in the **root** run **npm run docker-dev**. This will spin up the containerized backend server and a localhost render on 8080.
-- Login credentials for testing are email: [email protected], password: ilovetesting
+As you know, alums have access to the Codesmith intranet. While, the intranet is
+a staple for many during the job search, it lacks a bit of flair. Thus the idea
+to create a robust intranet for alumni. Enter Code Hammers!
 
-You will need to set up the .env file. This should include **"NODE_ENV=development"** as well as any database connection strings, api keys, seeder phrases as required.
+## Why Contribute?
+
+Building and contributing is the best way to learn how to code! We wanted to
+provide the opportunity for those looking to sharpen their skills to contribute
+to a large codebase.
+
+1. Experience the development workflow on a much greater scale
+2. Receive code reviews and guidance on tasks
+3. Work with engineers currently in the industry (get those referrals!)
+4. It's FUN!!!
+
+## Table of Contents
+
+1. [Dev Environment Setup](#dev-environment-setup)
+2. [Starting the Application](#starting-the-application)
+3. [Style Guide](#style-guide)
+
+## Dev Environment Setup
+
+With any large codebase, there is always going to be some sort of environment
+setup. Code Hammers is a [monorepo](https://en.wikipedia.org/wiki/Monorepo), the
+repo for the frontend code and backend code are contained within one repo. You
+will notice there are multiple `package.json` files. This is not always the
+case!
+
+- Clone the repo
+- Install packages
+- Create an `.env` file
+  - Reach out Sean or Jimmy for all secret variables
+- Run the initial tailwind script
+  - `cd` to the `./client`folder and run
+    `npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch` in your
+    terminal.
+  - You will be prompted to install Tailwind - Choose YES.
+  - This will run the initial CSS build. It will also leave it running and
+    provide live compiles for any changes to styling.
+
+## Starting the Application
+
+There are a few ways to spin up Code Hammers. Scripts are provided for your
+convenience.
+
+- `npm run docker-dev`
+  - This will build containers for the entire application
+- `npm run dev-ts`
+  - This will start both the webpack-dev-server for frontend and the backend
+    server
+- Login credentials
+  - **Email:** [email protected]
+  - **Password:** ilovetesting
+
+<!-- ## How to Contribute -->
+
+## Style Guide
+
+We follow the
+[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript?tab=readme-ov-file).
+Here is a brief refresher, including additional conventions we follow.
+
+### Prefer function expressions with arrow syntax ([why?](https://github.com/airbnb/javascript?tab=readme-ov-file#functions--declarations))
+
+```
+const myFunction = () => {
+  ...
+}
+```
+
+### Destructure objects ([why?](https://github.com/airbnb/javascript?tab=readme-ov-file#destructuring--object))
+
+```
+// Good
+const MyComponent = ({prop1, prop2}) => {
+  ...
+}
+
+// Bad
+const MyComponent = (props) => {
+  const {prop1, prop2} = props;
+}
+
+// Worse
+const MyComponent = (props) => {
+  ...
+  props.prop1
+  props.prop2
+}
+```
+
+### Params
+
+- Never mutate or reassign parameters, instead use a default parameter
+- Place default parameters at the end of the function signature
+
+```
+// Good
+const myFunc = (a, b, c = 3) => {
+  ...
+}
+
+// Bad
+const myFunc = (a = 3, b, c) => {
+  ...
+  b = 5
+}
+```
+
+### Semicolons
+
+- Add a semicolon at the end of each statement.
+  ([why?](https://github.com/airbnb/javascript?tab=readme-ov-file#semicolons--required))
+
+### Single Quotes
+
+- Prefer single quotes for string literals
+
+### Names
+
+- Variables should be `camelCase`, while global constants (i.e. action types)
+  should be `SCREAMING_SNAKE_CASE`
+- Functions should also be in `camelCase`, but names of components should be
+  `PascalCase`
+- Testing IDs, when used, should be in `kebab-case`
+- Names of objects and classes should be `PascalCase`
+
+### Imports
+
+- Imports should be placed at the top of each file
+- Order of preference for imports
+  - Frameworks
+  - Libraries
+  - Modules
+  - Styles
+  - Side-effects
+    ([?](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only))
+
+```
+// Framework
+import {useState, useEffect} from 'react';
+
+// Library
+import { useNavigate } from 'react-router-dom';
+
+// Modules
+import SomeComponent from '../../SomeComponent';
+import helperFunction from '../../utils/helperFunction';
+
+// Styles
+import styles from './MyComponent.module.scss';
+
+// Side-effect
+import '../../utils/coolEffects';
+```
+
+### Styles
+
+Order CSS styles and JSX class names alphabetically
+
+```
+// styles.css
+.button {
+    display: inline-block;
+    font-size: 16px;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+}
+
+// Button.jsx
+...
+<Button className='bg-white border border-green-500 font-semibold rounded shadow'>
+...
+```

client/src/AuthenticatedApp.tsx

@@ -5,6 +5,7 @@ import MainPage from "./pages/MainPage/MainPage";
 import Forums from "./pages/Forums/Forums";
 import Profiles from "./pages/Profiles/Profiles";
 import Profile from "./pages/Profile/Profile";
+import EditProfilePage from "./pages/EditProfilePage/EditProfilePage";
 import Directory from "./pages/DirectoryPage/DirectoryPage";
 import NotFoundPage from "./pages/NotFoundPage/NotFoundPage";
 import { useNavigate } from "react-router-dom";
@@ -42,7 +43,8 @@ const AuthenticatedApp = () => {
       <Routes>
         <Route path="main" element={<MainPage />} />
         <Route path="/profiles" element={<Profiles />} />
-        <Route path="/profile" element={<Profile />} />
+        <Route path="/profile/:userId" element={<Profile />} />
+        <Route path="/editProfile" element={<EditProfilePage />} />
         <Route path="/forums" element={<Forums />} />
         <Route path="/directory" element={<Directory />} />
         <Route path="*" element={<NotFoundPage />} />

client/src/components/Banner/Banner.test.tsx

@@ -62,7 +62,7 @@ describe("Banner Component", () => {
     const optionsButton = screen.getByRole("button", { name: "Options" });
     fireEvent.click(optionsButton);
 
-    const profileOption = screen.getByText("Go to Profile");
+    const profileOption = screen.getByText("Edit Profile");
     const logoutOption = screen.getByText("Logout");
 
     expect(profileOption).toBeInTheDocument();
@@ -74,10 +74,10 @@ describe("Banner Component", () => {
     const optionsButton = screen.getByRole("button", { name: "Options" });
     fireEvent.click(optionsButton);
 
-    const profileOption = screen.getByText("Go to Profile");
+    const profileOption = screen.getByText("Edit Profile");
     fireEvent.click(profileOption);
 
-    expect(mockNavigate).toHaveBeenCalledWith("profile");
+    expect(mockNavigate).toHaveBeenCalledWith("editProfile");
   });
 
   it("handles logout on clicking Logout", () => {

client/src/components/Banner/Banner.tsx

@@ -16,8 +16,8 @@ const Banner = (): JSX.Element => {
     //TODO CLEAR ALL STATE
   };
 
-  const goToProfile = () => {
-    navigate("profile");
+  const goToEditProfile = () => {
+    navigate("editProfile");
     setShowDropdown(false);
   };
   return (
@@ -40,9 +40,9 @@ const Banner = (): JSX.Element => {
             <a
               href="#!"
               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-              onClick={goToProfile}
+              onClick={goToEditProfile}
             >
-              Go to Profile
+              Edit Profile
             </a>
             <a
               href="#!"

client/src/components/Header/Header.tsx

@@ -90,11 +90,11 @@ const Header = (): JSX.Element => {
               href="#!"
               className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
               onClick={() => {
-                navigate("/app/profile");
+                navigate("/app/editProfile");
                 setShowDropdown(false);
               }}
             >
-              Go to Profile
+              Edit Profile
             </a>
             <a
               href="#!"

client/src/components/Login/Login.tsx

@@ -35,42 +35,42 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="w-full max-w-xs">
+    <div className="w-full max-w-md">
       <form
-        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+        className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 shadow-lg rounded px-8 pt-6 pb-8 mb-4"
         onSubmit={handleSubmit}
       >
         <div className="mb-4">
           <label
-            className="block text-gray-700 text-sm font-bold mb-2"
+            className="block text-gray-300 text-sm font-bold mb-2"
             htmlFor="email"
           >
             Email
           </label>
           <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            className="appearance-none border-2 border-gray-700 rounded w-full py-2 px-3 text-gray-300 leading-tight focus:outline-none focus:border-blue-500"
             id="email"
             name="email"
             type="email"
             value={email}
-            placeholder="Email"
+            placeholder="Enter your Email"
             onChange={handleChange}
           />
         </div>
         <div className="mb-6">
           <label
-            className="block text-gray-700 text-sm font-bold mb-2"
+            className="block text-gray-300 text-sm font-bold mb-2"
             htmlFor="password"
           >
             Password
           </label>
           <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            className="appearance-none border-2 border-gray-700 rounded w-full py-2 px-3 text-gray-300 mb-3 leading-tight focus:outline-none focus:border-blue-500"
             id="password"
             name="password"
             type="password"
             value={password}
-            placeholder="******************"
+            placeholder="Enter your password"
             onChange={handleChange}
           />
         </div>

client/src/components/ProfileThumb/ProfileThumb.tsx

@@ -1,18 +1,23 @@
 import React from "react";
-import { useAppDispatch } from "../../app/hooks";
 import { IProfile } from "../../../types/profile";
 
 interface ProfileThumbProps {
   profile: IProfile;
 }
 
 const ProfileThumb = ({ profile }: ProfileThumbProps): JSX.Element => {
-  const dispatch = useAppDispatch();
+  const defaultImage = "https://picsum.photos/200";
 
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
-      <h1 className="text-4xl font-extrabold mb-4">{profile.firstName}</h1>
-      <h2 className="text-4xl font-extrabold mb-4">{profile.bio}</h2>
+    <div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 text-white p-4 rounded-lg flex flex-col items-center justify-center h-64 w-64">
+      <img
+        src={profile.profilePhoto || defaultImage}
+        alt={profile.fullName || "Default Profile"}
+        className="rounded-full h-24 w-24 object-cover mb-4"
+      />
+
+      <h1 className="text-xl font-bold mb-2">{profile.fullName}</h1>
+      <h2 className="text-md mb-2">{profile.personalBio}</h2>
     </div>
   );
 };