nkGMKmfr

1import React, { Component } from 'react'
2
3import {
4    Section,
5    Breadcrumb,
6    Sharer,
7    utils,
8    Closing,
9    Embed,
10} from '@airc/ui-components'
11
12import { ContentSection } from '@/universal/components/Sections'
13import { getUpload, } from '@/universal/libs/utils'
14import { fetchData } from '@/universal/libs/API'
15import { Sidebar } from '@/universal/components'
16
17
18const {
19    getDate,
20    removeLastSlash
21} = utils
22
23
24export default class Initiative extends Component {
25    static async getInitialProps(url, data) {
26        const _url = url
27
28        if (!url && typeof window !== 'undefined') {
29            // _url = window.location.pathname
30            url = removeLastSlash(window.location.pathname)
31
32            console.log('ciaoooo', url)
33        }
34
35        /*
36        // It's not clear why this strip
37        try {
38          url = `/${_url.split('/').slice(-1)[0]}`
39        } catch (error) {
40          console.error(error)
41        }
42        */
43
44        const search = data.queryParams.status ? '&status=' + data.queryParams.status : ''
45
46        const [page] = await Promise.all([
47            fetchData(`/news?url=${url}${search}`)
48        ])
49
50        return {
51            page: page.data
52        }
53    }
54    constructor(props) {
55        super(props)
56        this.hasStore = !!props.store
57        this.breadcrumb = props.routeInfo ? props.routeInfo.breadcrumb : null
58        this.state = {
59            page: props.store ? props.store.page ? props.store.page[0] : null : { page: null }
60        }
61    }
62
63    componentDidMount() {
64        this.setState({
65            layout: this.props.getCurrentLayout()
66        })
67        if (!this.hasStore) {
68            console.log('CALL API FROM CLIENT')
69            const self = this
70            const { search } = this.props.location
71            const params = !search || search == '' ? {} : JSON.parse('{"' + search.substring(1).replace(/&/g, '","').replace(/=/g, '":"') + '"}', function(key, value) {
72                return key === '' ? value : decodeURIComponent(value)
73            })
74            this.constructor.getInitialProps(undefined, { queryParams: params }).then(data => {
75                if (data.page.length > 0) {
76                    self.hasStore = true
77                    self.setState({
78                        page: data.page[0]
79                    })
80
81                    const { lang } = this.props.routeInfo
82                    this.props.onMetadataUpdate({ ...data.page[0].seodata, ...{ lang }})
83                }
84            })
85                .catch(console.error)
86        }
87    }
88    render() {
89        const _layout = this.state.layout
90        const { page = {}} = this.state
91        const cover = page && page.featuredimage && page.featuredimage.url ? page.featuredimage.url : null
92        const { title, subtitle, newstype, titleoriginal, titlenewspaper, datenewspaper, featuredvideo } = page
93        const isResearcher = newstype === 'researchergoal'
94        const hasVideo = featuredvideo
95        return <Section cover={getUpload(cover, _layout, 'hero')} first>
96            <div className="row">
97                <div className="col col--b1">
98                    <Sharer />
99                </div>
100                <div ref={node => { this.content = this.content || node }} className="col col--b7">
101                    <Breadcrumb items={this.breadcrumb} />
102                    {
103                        page &&
104                        page.title &&
105                        <div className="__margin-bottom-4x">
106                            <h1>{title}</h1>
107                        </div>
108                    }
109                    {
110                        cover &&
111                        !hasVideo &&
112                        <img className="image" src={getUpload(cover, _layout, 'news')} alt={page.title} />
113                    }
114
115                    {
116                        hasVideo &&
117                        <Embed className="__margin-bottom-2x" type={this.state.page.featuredvideo.type} src={this.state.page.featuredvideo.id} />
118                    }
119
120                    {!!subtitle && <p className="__margin-bottom-3x"><em>{subtitle}</em></p>}
121                    {
122                        isResearcher && titleoriginal &&
123                        <p className="excerpt __margin-right-2x __margin-bottom-2x">Titolo originale dell'articolo: <b>{titleoriginal}</b></p>
124                    }
125                    {
126                        isResearcher && titlenewspaper &&
127                        <p className="excerpt __margin-right-2x __margin-bottom-2x">Titolo della rivista: <b>{titlenewspaper}</b></p>
128                    }
129                    {
130                        isResearcher && datenewspaper &&
131                        <p className="excerpt __margin-right-2x __margin-bottom-4x">Data di pubblicazione originale: <b>{getDate(datenewspaper)}</b></p>
132                    }
133                    {
134                        page &&
135                        page.readtime &&
136                        <p className="excerpt __margin-right-2x __margin-bottom-2x __display-inlineblock">Tempo di lettura: <b>{page.readtime} minuti</b></p>
137                    }
138                    {
139                        page &&
140                        page.sections &&
141                        <ContentSection sections={page.sections} />
142                    }
143                    <Closing
144                        author={page.author}
145                        date={getDate(page.created_at)}
146                        tags={page.tagnames}
147                        initialData={this.props.initialData}
148                    />
149                </div>
150                <div className="col col--b3 col--offset-b1">
151                    {
152                        page &&
153                        page.pagedata &&
154                        page.pagedata.sidebar &&
155                        <Sidebar pageId={page.id} parent={this} />
156                    }
157                </div>
158
159            </div>
160        </Section>
161    }
162}