Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'

const TimelineItem = ({addedOn, activity, imageName, isTitle}) => {
    return(
        <div
            className="timeline-item text-center"
        >
            <div
                className="container"
            >
                <div
                    className="row p-2"
                    style={{
                        borderBottom: '1px solid rgb(237 237 237)'
                    }}
                >
                    <div
                        className="col-12 col-sm-12 col-md-4"
                    >
                        <p
                            className={isTitle ? 'font-weight-bold' : ''}
                        >
                            <strong>
                                {addedOn}
                            </strong>
                        </p>
                    </div>
                    <div
                        className="col-12 col-sm-12 col-md-8"
                    >
                        <p
                            style={{
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}
                            className={isTitle ? 'font-weight-bold' : ''}
                        >
                            {
                                imageName && (
                                    <img
                                        src={'/images/microlearning/'+imageName}
                                        style={{
                                            width: '6%'
                                        }}
                                    />
                                )
                            }
                            {activity}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default props => {
    const handleScroll = (event) => {
        const node = event.target;
        if(node.clientHeight >= (node.scrollHeight * .65)){
            props.getMoreItems()
        }
    }
    const paneDidMount = (node) => {
        if(node) {      
            node.addEventListener("scroll", handleScroll.bind(this));      
        }
    }
    const getActivity = (activity) => {
        switch (activity) {
            case props.activities.ACTIVITY_APPROVED_TEST:
                return{
                    activity: "Aprobo un quiz",
                    imageName: "approved-test.svg"
                }
                break;
            case props.activities.ACTIVITY_COMPLETED_CAPSULE:
                return{
                    activity: "Completo una capsula",
                    imageName: "completed-capsule.svg"
                }
                break;
            case props.activities.ACTIVITY_COMPLETED_TOPIC:
                return{
                    activity: "Completo un topico",
                    imageName: "completed-topic.svg"
                }
                break;
            case props.activities.ACTIVITY_RETAKE_A_TEST:
                return{
                    activity: "Repitió un quiz",
                    imageName: 'retake-a-test.svg'
                }
                break;
            case props.activities.ACTIVITY_SIGNIN:
                return{
                    activity: "Inicio sesión",
                    imageName: "sign-in.svg"
                }
                break;
            case props.activities.ACTIVITY_SIGNOUT:
                return{
                    activity: "Cerro sesión",
                    imageName: "sign-out.svg"
                }
                break;
            case props.activities.ACTIVITY_START_CAPSULE:
                return{
                    activity: "Inicio una capsula",
                    imageName: "start-capsule.svg"
                }
                break;
            case props.activities.ACTIVITY_START_TOPIC:
                return{
                    activity: "Inicio un topico",
                    imageName: "start-topic.svg"
                }
                break;
            case props.activities.ACTIVITY_TAKE_A_TEST:
                return{
                    activity: "Hizo un quiz",
                    imageName: "take-a-test.svg"
                }
                break;
            case props.activities.ACTIVITY_VIEW_SLIDE:
                return{
                    activity: "Vió una diapositiva",
                    imageName: "view-slide.svg"
                }
                break;    
            default:
                return{
                    activity: 'Actividad'
                }
                break;
        }
    }

    return(
        <div
            className="acc-setting"
            style={{ position: "relative", maxHeight: '50vh', overflow: 'auto'}}
            ref={paneDidMount}
        >
            {
                props.timeline ?
                    <React.Fragment>
                        
                        <TimelineItem
                            addedOn="Fecha"
                            activity="Actividad"
                            isTitle
                        />
                        {
                            props.timeline.map((element, i) => {
                                return(
                                    <TimelineItem
                                        addedOn={element.added_on}
                                        {... getActivity(element.activity)}
                                        key={i}
                                    />
                                )
                            })
                        }
                    </React.Fragment>
                :
                <div
                    className="text-center"
                >
                    <h3> No hay elementos para visualizar </h3>
                </div>
            }
        </div>
    )
}