cl1p.net - The internet clipboard

cl1p.net/code

This cl1p will be deleted in in 25 days.

import React, { Component, createRef } from "react";
import authServiceInstance from "../services/authService";
import "../styling/SettingsComponent.scss";
import LoadingOverlay from "./LoadingOverlay";
import { userRole } from "../services/userDetailService";

type UserRole = "student" | "trainer" | "admin";

type State = {
  isOpen: boolean;
  currentRole: string;
  isSwitching: boolean;
  availableRoles: string[];
};

class SettingsComponent extends Component<{}, State> {
  dropdownRef = createRef<HTMLDivElement>();

constructor(props: {}) {
    super(props);
    this.state = {
      isOpen: false,
      currentRole: userRole?.toLowerCase() || "student",
      isSwitching: false,
      availableRoles: [],
    };
  }

componentDidMount() {
    this.updateAvailableRoles();
    document.addEventListener("mousedown", this.handleClickOutside);
  }

componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

updateAvailableRoles = () => {
    const roles = authServiceInstance.getRoles();
    console.log(roles);

this.setState({ availableRoles: roles });
  };

toggleDropdown = () => {
    this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
  };

handleClickOutside = (event: MouseEvent) => {
    if (
      this.dropdownRef.current &&
      !this.dropdownRef.current.contains(event.target as Node)
    ) {
      this.setState({ isOpen: false });
    }
  };

getAvailableRoleSwitches = () => {
    return this.state.availableRoles.filter(
      (role) => role.toLowerCase() !== this.state.currentRole.toLowerCase()
    );
  };

handleRoleSwitch = async (newRole: string) => {
    this.setState({ isSwitching: true, isOpen: false });

try {
      const roleLower = newRole.toLowerCase() as UserRole;
      await authServiceInstance.switchUserRole(roleLower);

window.location.href = redirectUrl;
    } catch (error) {
      console.error("Role switch failed:", error);
      this.setState({ isSwitching: false });
    }
  };

goToOldSite = () => {
    window.location.href = `${process.env.REACT_APP_OLD_URL}/dashboard`;
  };

render() {
    const { isOpen, isSwitching } = this.state;
    const switchableRoles = this.getAvailableRoleSwitches();
    const shouldShowRoleSwitcher = switchableRoles.length > 0;

return (
      <div className="settings-container" ref={this.dropdownRef}>
        {isSwitching && <LoadingOverlay />}

{isOpen && (
          <div className="settings-dropdown">
            <div className="settings-header">
              <h3>Switch Role</h3>
            </div>
            <div className="settings-section">
              <div className="role-options">
                {shouldShowRoleSwitcher &&
                  switchableRoles.map((role) => (
                    <button
                      key={role}
                      className="role-button"
                      onClick={() => this.handleRoleSwitch(role)}
                      disabled={isSwitching}
                    >
                      Switch to {role}
                    </button>
                  ))}
                <button className="role-button" onClick={this.goToOldSite}>
                  Go to Old Site
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default SettingsComponent;