FormationMaterialPage.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useRef } from 'react';
import styled from 'styled-components';
import { Grid } from '@material-ui/core';
import FormationMaterialHeader from '../Components/FormationMaterialHeader.js';
import FormationMaterialDescription from '../Components/FormationMaterialDescription.js';
import TopicList from '../Components/TopicList.js';
import TopicFooter from '../Components/TopicFooter.js';
import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import {Link} from "react-router-dom"

export default function FormationMaterialPage(props) {
	const colecao = props.location.pathname === "/colecao";
	const colecoes = colecoes_obj();

	const colecao_id = Number(
		colecao ?
			props.location.search.split('=')[1]
			: props.location.search.split('&')[0].split('=')[1]
	);
	const topico_id = Number(colecao ? 0 : props.location.search.split('&')[1].split('=')[1]);

	const colecao_obj = ((id) => {
		for (const c in colecoes) {
			if (id === colecoes[c].id)
				return colecoes[c];
		}
	})(colecao_id);

	const topico_obj = ((id) => {
		for (const t in colecao_obj.topics) {
			if (id === colecao_obj.topics[t].id)
				return colecao_obj.topics[t];
		}
	})(topico_id);

	const topic_list_ref = useRef(null);

	const handleHeaderClick = () => {
		if (colecao)
			window.scrollTo(0, topic_list_ref.current.offsetTop);
	}

	console.log(colecao_obj);

	return (
		<Background>
			<BreadCrumbsDiv>
				<StyledBreadCrumbs>
					<Link to="/">Página Inicial</Link>
					<span>
						{
							colecao ? "Material de formação" : "Tópicos"
						}
					</span>
				</StyledBreadCrumbs>
			</BreadCrumbsDiv>
			<MainContainer>
				<Grid container
					direction="row"
					justify="flex-start"
					alignItems="center"
				>
					<Grid item xs={12}>
						<FormationMaterialHeader
							colecao={colecao}
							colecao_obj={colecao_obj}
							topico_obj={topico_obj}
							handleClick={handleHeaderClick}
						/>
					</Grid>
					<Grid item xs={12}>
						<FormationMaterialDescription
							colecao={colecao}
							colecao_obj={colecao_obj}
							topico_obj={topico_obj}
						/>
					</Grid>
					<Grid item xs={12} ref={topic_list_ref}>
						{
							colecao ?
								<TopicList
									topicos={colecao_obj.topics}
									colecao_id={colecao_id}
								/>
								:
								<div></div>
						}
					</Grid>
				</Grid>
			</MainContainer>
			{colecao ?
				<div></div>
				:
				<TopicFooter
					topic_name={colecao_obj.topic_name}
					src={colecao_obj.img}
					colecao_name={colecao_obj.name} />
			}
		</Background>
	);
}

const Background = styled.div`
	background-color: #f4f4f4;
`
const MainContainer = styled.div`
    margin-left: auto;
    margin-right: auto;
    padding : 0;

    @media screen and (min-width: 768px) {
        width : 750px;
    }
    @media screen and (min-width: 992px) {
        width : 970px;
    }
    @media screen and (min-width: 1200px) {
        width : 1170px;
    }
`
const StyledBreadCrumbs = styled(Breadcrumbs)`
  display: flex;
  justify-content: flex-start;
  max-width: 1170px;
  span {
    color: #a5a5a5;
  }
  a {
    color: #00bcd4;
    text-decoration: none;
  }
`

const BreadCrumbsDiv = styled.div`
  padding: 10px;
  display: flex;
`