Hi all. I am

Alberto Sosa

> Senior Developer

// Experienced Software Developer with a Bachelor's Degree in Software Engineering // Over 14 years developing web applications, mobile apps, and custom software solutions

const linkedInProfile =
https://www.linkedin.com/in/albert-sf

useEffect(() => {
      let span = rolesRef.current;
      const listener = () => {
        if (rolesCounter.current === profile.roles.length - 1) {
          rolesCounter.current = 0;
        } else {
          rolesCounter.current++;
        }
        span.innerHTML = profile.roles[rolesCounter.current];
      };
      span.addEventListener("animationiteration", listener);
      return () => {
        span.removeEventListener("animationiteration", listener);
      };
  }, [rolesCounter]);

const handleSidebarChange = useCallback((item: SidebarItemType) => {
    setSelectedTech((prevState) => {
      if (prevState) {
        return {
          ...prevState,
          [item.type as TechnologyType]:
            !prevState[item.type as TechnologyType],
        };
      }
      return null;
    });
  }, []);

 const calculateLines = () => {
    const textContainer = linesDivRef.current;
    if (textContainer) {
      const computedStyle = window.getComputedStyle(textContainer!);
      const lineHeight = parseFloat(computedStyle.lineHeight);
      const containerHeight = textContainer.clientHeight;
      const numberOfLines = Math.round(containerHeight / lineHeight);

      setLines(numberOfLines);
    }
  };

sections.map((section: SidebarSectionType) => (
        <SidebarSection
          key={section.name}
          items={section.items}
          header={section.name}
          renderItem={(item) => {
            return (
              <SidebarItemWithCheckbox
                key={item.name}
                active={selected ? selected[item.type] : false}
                item={item}
                onSelectItem={() => handleSelect(section, item)}
              />
            );
          }}
        />
      ))

const getYachtsLocations = async ({ text, locale }) => {
  const findText = escapeRegExp(String(text.trim()))
  return Yacht.aggregate([
    {
      $match: {
          $or: [
            { [`location.city.${locale}`]: new RegExp(findText, 'i')},
            { [`location.country.${locale}`]: new RegExp(findText, 'i')},
          ],
        }
    },
    //...
  ])
}

code-snippets

@albertososaCreated 1 month ago

// React - Tailwindcss - Typescript

const [lines, setLines] = useState<number>(0);

const linesDivRef = useRef<HTMLDivElement>(null);

useEffect(() => {
    calculateLines();

    window.addEventListener("resize", calculateLines);

    return () => window.removeEventListener("resize", calculateLines);
  }, [info]);

// create a list of numbers
const list = useMemo(() => {
    return (
      <ul className={"flex flex-col pl-4 mr-2"}>
        {new Array(lines).fill(0).map((_, index) => {
          return (
            <li key={index} className={"flex justify-between w-10"}>
              <span>{index + 1}</span>
              <span>{index > 0 ? "*" : "/"}</span>
            </li>
          );
        })}
      </ul>
    );
  }, [lines]);

const calculateLines = () => {
    const textContainer = linesDivRef.current;
    const computedStyle = window.getComputedStyle(textContainer!);
    const lineHeight = parseFloat(computedStyle.lineHeight);
    const containerHeight = textContainer!.clientHeight;
    const numberOfLines = Math.round(containerHeight / lineHeight);

    setLines(numberOfLines);
  };

// ...

Alberto Sosa

> Senior Developer

personal-info

code-snippets

projects