Write Comments For Better Code Documentation

[gxrsti]

Write Comments For Better Code Documentation

[gxrsti]

Will close this issue since #36 was created and this issue has a lot of irrelevant comments.

[shakthi2003-ice]

@gxrsti can you assign me this issue?

[gxrsti]

Sure, here you go!

[shakthi2003-ice]

@gxrsti do we have to change all the comments in the code?

[gxrsti]

Currently, there are no comments. We need comments at least for all the exported components/functions!

The more, the better.

[shakthi2003-ice]

@gxrsti we should we add the toaster component?

[gxrsti]

@gxrsti we should we add the toaster component?

Toaster component and toast function at least.

[shakthi2003-ice]

@gxrsti while running ppm run development website I am getting this error

Turborepo requires npm workspaces to be defined in the root package.json

[gxrsti]

@shakthi2003-ice Try these steps in the project root:

1. Run pnpm install
2. Run pnpm run dev:website

[shakthi2003-ice]

@gxrsti i did the same but still getting error

[gxrsti]

Make sure to have the newest version of the master branch.

If you follow these steps, everything should work.

Also make sure to have pnpm installed (npm install -g pnpm)

If it still doesn't work, here is my last possible solution:

Get a fresh version of the repository and add "packageManager": "[email protected]" at the end (after peerDependencies) of the package.json.

Then try the install and dev:website

[gxrsti]

@shakthi2003-ice did you get it working?

[Moksh45-Bot]

Hi there! I've added a comment for this code file. Please let me know if you're satisfied with it or if you'd like any changes. By the way, this is @Moksh45

import { IToast, ToastState, ToasterProps } from '../core/types';
import { Store } from '../core/store';
import { Toast } from './toast';

// A component that renders a toast notification container
const Toaster = ({
  position = 'bottom-right',
  duration = 3000,
  reverse = false,
  theme = 'light',
  style,
  className,
}: ToasterProps) => {
  // State for storing the toast notifications
  const [toasts, setToasts] = useState<IToast[]>([]);
  // State for positioning the toast container
  const [positionState, setPositionState] = useState<React.CSSProperties>({});
  // State for calculating the height of the toast container
  const [height, setHeight] = useState(0);

  // Subscribe to the toast store and add new toast notifications
  useEffect(() => {
    const unsubscribe = Store.subscribe((toast) => {
      setToasts((toasts) => [...toasts, toast]);
      handleToast(toast);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  // Set the position state based on the given position prop
  useEffect(() => {
    const [y, x] = position.split('-');
    setPositionState({
      [y]: 0,
      [x]: 0,
    });
  }, [position]);

  // Update the height of the toast container based on the number of toasts
  useEffect(() => {
    setHeight(toasts.length * 41);
  }, [toasts]);

  // Handle the lifecycle of a toast notification
  function handleToast(toast: IToast) {
    setTimeout(() => updateToastState(toast, 'idle'), 300);
    setTimeout(() => updateToastState(toast, 'leave'), duration - 100);
    setTimeout(() => removeToast(toast), duration);
  }

  // Update the state of a toast notification
  function updateToastState(toast: IToast, state: ToastState) {
    setToasts((toasts) => {
      var copy = toasts.slice();
      var index = copy.findIndex((x) => x.id === toast.id);
      copy[index] = { ...copy[index], state: state };
      return copy;
    });
  }

  // Remove a toast notification from the state
  const removeToast = useCallback(
    (toast: IToast) => setToasts((toasts) => toasts.filter((x) => x.id !== toast.id)),
    [],
  );

  // Reverse the order of toasts if reverse prop is true
  const reversedToasts = reverse ? toasts.slice().reverse() : toasts;

  return (
    <section
      style={{
        position: 'fixed',
        zIndex: 9999,
        display: 'flex',
        flexDirection: 'column',
        gap: 5,
        margin: 16,
        transform: 'translateY(0)',
        height: height,
        transition: 'all 230ms cubic-bezier(.21, 1.02, .73, 1)',
        ...positionState,
      }}
    >
      {position.startsWith('bottom') && !reverse && <div className="flex h-full w-full grow" />}
      {reversedToasts.map((toast, index) => (
        <Toast key={index} toast={{ ...toast, zIndex: index, theme }} />
      ))}
    </section>
  );
};

export { Toaster };

[gxrsti]

Hey @Moksh45-Bot!

For file changes, could you please open a pr? Also from what i see, i would like to use this commenting style as far as it is possible to also descripe the parameters of a function or component.

[Moksh45]

@gxrsti ok