HER-45 Speaker Index Page

app/controllers/api/v1/users_controller.rb

@@ -6,7 +6,7 @@ class Api::V1::UsersController < ApplicationController
   # GET /api/v1/users
   def index
     @users = User.all
-    render json: @users
+    render json: UserSerializer.new(@users).serializable_hash.to_json
   end
 
   # GET /api/v1/users/1
@@ -31,7 +31,8 @@ def destroy
 
   # Add profile action and pass current_user as params
   def profile
-    render json: UserProfileSerializer.new(current_user)
+    @user = User.find(params[:id])
+    render json: UserProfileSerializer.new(@user)
   end
 
   private

app/controllers/users/registrations_controller.rb

@@ -45,11 +45,11 @@ def respond_with(resource, _opts = {})
 
   # Permit additional parameters for sign up
   def configure_sign_up_params
-    devise_parameter_sanitizer.permit(:sign_up, keys: [ :first_name, :last_name, :role ])
+    devise_parameter_sanitizer.permit(:sign_up, keys: [ :first_name, :last_name, :role, :bio ])
   end
 
   # Permit additional parameters for account update
   def configure_account_update_params
-    devise_parameter_sanitizer.permit(:account_update, keys: [ :first_name, :last_name, :role ])
+    devise_parameter_sanitizer.permit(:account_update, keys: [ :first_name, :last_name, :role, :bio ])
   end
 end

app/models/user.rb

@@ -23,7 +23,7 @@ class User < ApplicationRecord
   include Rails.application.routes.url_helpers
 
   def profile_image_url
-    rails_blob_url(profile_image, only_path: true) if profile_image.attached?
+    rails_blob_url(profile_image, only_path: false) if profile_image.attached?
   end
 
   before_create :set_default_role

app/serializers/user_profile_serializer.rb

@@ -14,7 +14,7 @@ class UserProfileSerializer
 
   def profile_image_url
     if object.profile_image.attached?
-      Rails.application.routes.url_helpers.rails_blob_url(object.profile_image, only_path: true)
+      Rails.application.routes.url_helpers.rails_blob_url(object.profile_image, only_path: false)
     end
   end
 end

app/serializers/user_serializer.rb

@@ -1,5 +1,15 @@
 class UserSerializer
   # Defines how to display the user model, uses JSONAPI because it is required by my Devise implementation.
   include JSONAPI::Serializer
-  attributes :id, :email, :first_name, :last_name, :name, :role, :created_at
+  attributes :id, :email, :first_name, :last_name, :name, :role, :profile_image_url, :bio, :created_at
+
+  include Rails.application.routes.url_helpers
+
+  # Added the profile_image_url method here
+
+  def profile_image_url
+    if object.profile_image.attached?
+      Rails.application.routes.url_helpers.rails_blob_url(object.profile_image, only_path: false)
+    end
+  end
 end

config/routes.rb

@@ -22,7 +22,7 @@
       get "kit_items_only", to: "kit_items#index_kit_items_only"
       post "kit_items_only", to: "kit_items#create_kit_items_only"
       patch "kit_items_only/:id", to: "kit_items#update_kit_items_only"
-      get "profile", to: "users#profile"
+      get "profile/:id", to: "users#profile"
       resources :users
       resources :donations
       resources :contacts

db/seeds.rb

@@ -17,6 +17,7 @@
 KitItem.destroy_all
 Kit.destroy_all
 Address.destroy_all
+Donation.destroy_all
 User.destroy_all
 
 
@@ -295,8 +296,120 @@
 impact_kit.kit_items << curious_dog_book << rosie_book << different_book << classroom_book << neurotribes_book
 
 # Seed users
-3.times do
-  FactoryBot.create(:user)
+users = [
+  {
+    id: 1,
+    email: "[email protected]",
+    role: "user",
+    first_name: "Test",
+    last_name: "User",
+    bio: "Test User is a dedicated individual who loves exploring new technologies. In their free time, they enjoy hiking and reading science fiction novels.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 2,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Speakerone",
+    last_name: "One",
+    bio: "Speaker One is a seasoned public speaker with a passion for motivational talks. They have inspired thousands through their engaging presentations.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 3,
+    email: "[email protected]",
+    role: "admin",
+    first_name: "Admin",
+    last_name: "Jones",
+    bio: "Admin Jones is an experienced administrator who excels in managing complex systems. They are known for their problem-solving skills and attention to detail.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 4,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Speakertwo",
+    last_name: "Two",
+    bio: "Speaker Two is a dynamic presenter with expertise in technology trends. They have a knack for making complex topics accessible to all audiences.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 5,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Speakerthree",
+    last_name: "Three",
+    bio: "Speaker Three is a renowned keynote speaker with a background in business strategy. They have helped numerous companies achieve their goals through insightful talks.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 6,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Speakerfour",
+    last_name: "Four",
+    bio: "Speaker Four is an expert in digital marketing with a focus on social media strategies. They have successfully led multiple campaigns for top brands.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 7,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Speakerfive",
+    last_name: "Five",
+    bio: "Speaker Five is a motivational speaker who specializes in personal development. They have a unique ability to connect with audiences on a deep level.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 8,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Speakersix",
+    last_name: "Six",
+    bio: "Speaker Six is a thought leader in the field of innovation and creativity. They have authored several books on how to foster a culture of innovation.",
+    organization_id: nil,
+    password: "password"
+  },
+  {
+    id: 9,
+    email: "[email protected]",
+    role: "speaker",
+    first_name: "Sarah",
+    last_name: "Thompson",
+    bio: "I am a neurodiversity consultant with over 15 years of experience in inclusive education. My work focuses on training teachers and staff to better understand the needs of neurodivergent students, ensuring classrooms are environments of empathy and acceptance.",
+    organization_id: nil,
+    password: "password"
+  }
+]
+
+users.each do |user_data|
+  user = User.create!(user_data)
+
+  # Retry mechanism for attaching image
+  retries = 3
+  begin
+    user.profile_image.attach(
+      io: File.open("db/seed_img/#{user_data[:first_name].downcase}.jpg"),
+      filename: "#{user_data[:first_name].downcase}.jpg",
+      content_type: "image/jpg",
+      identify: false
+    )
+  rescue => e
+    retries -= 1
+    if retries > 0
+      sleep(1) # Wait for a second before retrying
+      retry
+    else
+      puts "Failed to attach image for #{user_data[:first_name]}: #{e.message}"
+    end
+  end
 end
 
 # Seed addresses

frontend/public/css/styles.css

@@ -91,6 +91,50 @@
   }
 }
 
+.profile-image {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.speaker-background {
+  background-color: white;
+}
+
+.speaker-card {
+  margin: 0 auto;
+  max-width: 100%;
+  width: 350px;
+  box-shadow: 0 15px 25px rgba(58, 57, 57, 0.2);
+  height: 550px;
+  border-radius: 5px;
+  backdrop-filter: blur(14px);
+  background-color: rgba(163, 159, 159, 0.2);
+  padding: 20px;
+  text-align: center;
+}
+.speaker-card img {
+  transition: transform 0.2s ease;
+}  
+
+.speaker-card:hover img {
+  transform: scale(1.1);
+}
+
+.card-content {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.card-bio {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
 body {
   margin: 0;
   font-family: var(--bs-body-font-family);

frontend/src/App.jsx

@@ -117,7 +117,7 @@ function App() {
               <Route path="add_kit_item" element={<AddNew header="Add New Kit Item"><NewKitItem /></AddNew>} />
               <Route path="add_item_to_kit" element={<AddNew header="Add New Kit Item To Kit"><AddItemToKit /></AddNew>} />
             </Route>
-            <Route path="/profile" element={<UserProfile/>}/>
+            <Route path="/profile/:id" element={<UserProfile/>}/>
           </Routes>
         </PageWrapper>
       </Router>

frontend/src/components/auth/CurrentUser.jsx

@@ -42,7 +42,7 @@ const CurrentUser = ({ setLoggedIn, setUser, user }) => {
             </p>
             {user.role === 'admin' && <Link to="/admin"><i className="fas fa-user-shield"></i>
                 </Link>}
-            {user.role != 'admin' && <Link to="/profile"><i className='fas fa-user'></i></Link>}   
+            {user.role != 'admin' && <Link to={`/profile/${user.id}`}><i className='fas fa-user'></i></Link>}   
         </div>
     );
 };

frontend/src/components/auth/Registration.jsx

@@ -7,6 +7,7 @@ export default function Registration() {
   const [password, setPassword] = useState("");
 
   const [isTeacher, setIsTeacher] = useState(false);
+  const [isSpeaker, setIsSpeaker] = useState(false);
   // Removed useState for name and added for firstName, lastName
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
@@ -15,11 +16,20 @@ export default function Registration() {
   const [userData, setUserData] = useState({});
   const registrationUrl = `${API_URL2}/signup`;
 
-  // Toggles the isTeacher state and logs to console
-  const handleClick = () => {
-
-    setIsTeacher((prevIsTeacher) => !prevIsTeacher);
-
+  // Toggles the isTeacher and isSpeaker. Behaves like radio button.
+  const handleClick = (event) => {
+    const { id } = event.target;
+    if (id === 'isTeacher') {
+      setIsTeacher((prevIsTeacher) => !prevIsTeacher);
+      if (!isTeacher) {
+        setIsSpeaker(false);
+      }
+    } else if (id === 'isSpeaker') {
+      setIsSpeaker((prevIsSpeaker) => !prevIsSpeaker);
+      if (!isSpeaker) {
+        setIsTeacher(false);
+      }
+    }
   };
   // Handles initial signup, sets default role as user since only admin can assign a user as admin. Uses a POST action to sign up new user.
   const handleSubmit = async (event) => {
@@ -32,7 +42,7 @@ export default function Registration() {
         email,
         password,
         // if isTeacher is true, then role set as teacher, otherwise, user
-        role: isTeacher ? "teacher" : "user",
+        role: isTeacher ? "teacher" : isSpeaker ? "speaker" : "user",
         // Removed name, and added firstName and lastName, mapped name details to column names
         first_name: firstName,
         last_name: lastName,
@@ -186,7 +196,8 @@ export default function Registration() {
                       >
                         A password is required.
                       </div>
-                      {/* Added checkbox for teacher role */}
+                      {/* Added checkbox for teacher role and speaker role*/}
+                      <div className="d-flex">
                       <div className="form-check">
                         <input
                           className="form-check-input mt-3 me-3"
@@ -196,13 +207,28 @@ export default function Registration() {
                           onChange={handleClick}
                         />
                         <label
-                          className="form-check-label mt-4 text-muted"
+                          className="form-check-label mt-4 text-muted me-5"
                           htmlFor="isTeacher"
                         >
                           <strong>I am a teacher</strong>
                         </label>
                       </div>
-
+                      <div className="form-check">
+                        <input
+                          className="form-check-input mt-3 me-3"
+                          type="checkbox"
+                          id="isSpeaker"
+                          checked={isSpeaker}
+                          onChange={handleClick}
+                        />
+                        <label
+                          className="form-check-label mt-4 text-muted"
+                          htmlFor="isSpeaker"
+                        >
+                          <strong>I am a speaker</strong>
+                        </label>
+                      </div>
+                      </div>
                     </div>
                   </div>
                 </div>