y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Converted ClassItem to functional component

Browse Source
This commit is contained in:
maciekglowacki 2020-06-16 11:50:52 +02:00
parent a503c29bdc
commit d8c20bf680
1 changed files with 6 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/ClassItem/index.tsx
View File

@ -15,47 +15,23 @@ export interface Class {
groups: Array<Group>;
}
interface ClassProps {
interface ClassItemProps {
isSelected: boolean;
class: Class;
onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
id: number;
}
interface ClassState {
// open: boolean;
}
export class ClassItem extends React.Component<ClassProps, ClassState> {
// constructor(props: ClassProps) {
// super(props);
// this.state = {
// open: false,
// };
// }
export const ClassItem = ({isSelected, class : {name, groups}, onClick, id} : ClassItemProps) => {
// handleOpen = (e: React.MouseEvent) => {
// console.log("Inside handleopn");
// if (this.props.isSelected) {
// this.setState({
// open: !this.state.open,
// });
// }
// };
onClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
this.props.onClick(e);
console.log(`This props isSelected value is: ${this.props.isSelected}`)
};
render() {
const {
class: { name, groups },
} = this.props;
return (
<div className="class" onClick={this.onClick} id={this.props.id.toString()}>
<div className="class" onClick={onClick} id={id.toString()}>
{name}
<Collapse in={this.props.isSelected} timeout="auto" unmountOnExit>
<Collapse in={isSelected} timeout="auto" unmountOnExit>
{groups.map((group, index) => (
<p key={index}>
{group.group_id} {group.day}
@ -66,5 +42,5 @@ export class ClassItem extends React.Component<ClassProps, ClassState> {
</Collapse>
</div>
);
}
}