Convert project to typescript #33

[stavio12]

• converted project to typescript
• changed default bg color to success

[claeusdev]

Looks good so far but just tiny improvements we could do to this.

[claeusdev]

we can make this seven simpler by putting these values in an enum or list and then looping through to display.

const SELECT_VALUES = [
  {
    title: "Default",
    value: "left"
  }
]

Then, we can do:
SELECT_VALUES.map(value => <option value={value}>{title}</option>)

[stavio12]

import React from "react";
import styles from ".././App.module.css";
import { Position, PositionSelectorProps } from "../utils/types";

const PositionSelector = ({ setPosition, position }: PositionSelectorProps) => {
const positions = [
{ value: "default", title: "Default" },
{ value: "tleft", title: "Top Left" },
{ value: "tright", title: "Top Right" },
{ value: "tcenter", title: "Top Center" },
{ value: "bleft", title: "Bottom left" },
{ value: "bright", title: "Bottom Right" },
{ value: "bcenter", title: "Bottom Center" },
];

return (
<>
{" "}

Position:

<select
id="position"
onChange={({ target }) =>
setPosition(target.value as unknown as Position)
}
value={position}
className={styles.dropdown}
>
{positions.map(
({ value, title }: { value: string; title: string }) => (
{title}
)
)}

{" "}
</>
);
};

export default PositionSelector;

[claeusdev]

Very hard to read te code. could you format it?

[claeusdev]

Ignoring ts warnings or errors doesn't give us much confidence in our code, does it?

[stavio12]

(alias) class CSSTransition<Ref extends HTMLElement | undefined>
import CSSTransition
'CSSTransition' cannot be used as a JSX component.
Its instance type 'CSSTransition<HTMLElement | undefined>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'import("/Users/stavio/Documents/Projects/Production/react-flash-message/node_modules/@types/testing-library__react/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts

    this is the error i am getting dont seem to find a solution to it