display layout by max height of podcasts (#34)

Parallel-news · Feb 3, 2022 · 0f4d869 · 0f4d869
1 parent a947c1f
commit 0f4d869
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 18 deletions.
diff --git a/src/component/index.jsx b/src/component/index.jsx
@@ -4,15 +4,26 @@ import PodcastHtml from './podcast_html.jsx'
 import { MESON_ENDPOINT } from '../utils/arweave.js'
 /* make arbitrary change */
 class Index extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
             test: true,
-            podcasts: {}
+            podcasts: {},
+            // stores height passed by each podcast child
+            podcastsHeights: [],
+            // if loaded, change container visibility to true
+            isHeightsLoaded: false
         }
     }
 
+  // load height passed by each podcast child
+  loadPodcastHeight = (currentPodcastHeight) => {
+    this.setState({
+      podcastsHeights: [...this.state.podcastsHeights, currentPodcastHeight]
+    })
+    // console.log(this.state.podcastsHeights)
+  }
+
   fetchAllSwcIds = async () => {
     const response = await fetch("https://permacast-cache.herokuapp.com/feeds/podcasts", {
       method: 'GET',
@@ -28,25 +39,30 @@ class Index extends Component {
 
     return podcastList;
   }
-  renderPodcasts = async (podcasts) => {
+
+  // First, render podcasts with auto height and hidden visibility.
+  // Then, calculate the max height.
+  // Then, render podcasts with max height and change visibility to visible.
+  renderPodcasts = async (podcasts, height = 'auto') => {
         let html = []
 
         for (let podcast of podcasts) {
-          console.log(podcast)
+          // console.log(podcast)
           let p = podcast
           if (p && p.pid !== 'aMixVLXScjjNUUcXBzHQsUPmMIqE3gxDxNAXdeCLAmQ') {
             html.push(
-              <>
+              <div style={{height: height}}>
                 <PodcastHtml
+                  loadPodcastHeight={this.loadPodcastHeight}
                   name={p.podcastName}
                   episodes={p.episodes.length}
                   link={p.pid}
                   description={p.description}
                   image={`${MESON_ENDPOINT}/${p.cover}`}
                   key={p.pid}
                 />
-              </>
-            ) 
+              </div>
+            )
           }
         }
         return html
@@ -55,20 +71,32 @@ class Index extends Component {
     async componentDidMount() {
       this.setState({loading: true})
       this.setState({noPodcasts: false})
-      let pArrays = await this.loadPodcasts()  
+      let pArrays = await this.loadPodcasts()
       let p = pArrays.flat()
-      this.setState({podcasts: p}) 
+      this.setState({podcasts: p})
       let podcasts = await this.renderPodcasts(this.state.podcasts)
-      this.setState({podcastHtml: podcasts}) 
+      this.setState({podcastHtml: podcasts})
       if ( this.state.podcastHtml.length < 1 ) {
         this.setState({noPodcasts: true})
       }
       this.setState({loading: false})
     }
 
+    async componentDidUpdate(prevProps, prevState) {
+      // if for the last change of state, we get the final list of
+      // podcastsHeights, rerender with max height for podcast, not auto height
+      if (prevState.podcastsHeights.length + 1 === prevState.podcasts.length) {
+        let podcasts = await this.renderPodcasts(this.state.podcasts, Math.max(...this.state.podcastsHeights))
+        this.setState({
+          podcastHtml: podcasts,
+          isHeightsLoaded: true,
+        })
+      }
+    }
+
     render() {
       const podcasts = this.state.podcastHtml
-        return( 
+        return(
           <>
           <Container className="mt-5">
           <div className="">
@@ -77,7 +105,11 @@ class Index extends Component {
           </div>
           </Container>
           <div>
-          <CardColumns>
+          {/*
+            hide container if load with podcasts of auto height
+            show container if load with podcasts of max height
+          */}
+          <CardColumns style={{ visibility: this.state.isHeightsLoaded ? 'visible' : 'hidden' }}>
             {podcasts}
           </CardColumns>
           </div>

diff --git a/src/component/podcast_html.jsx b/src/component/podcast_html.jsx
@@ -6,6 +6,28 @@ import { arweave, smartweave, NEWS_CONTRACT } from '../utils/arweave.js'
 import Swal from 'sweetalert2';
 
 export default class PodcastHtml extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            podcastHeight: null
+        }
+    }
+
+    componentDidMount() {
+        setTimeout(() => {
+            this.loadPodcastHeight()
+        })
+    }
+
+    loadPodcastHeight() {
+        // if we receive loadPodcastHeight from props.
+        if (this.props.loadPodcastHeight) {
+            this.setState({
+                podcastHeight: this.container.offsetHeight
+            })
+            this.props.loadPodcastHeight(this.state.podcastHeight)
+        }
+    }
 
     loadRss = () => {
         console.log(this.props.rss)
@@ -84,17 +106,20 @@ export default class PodcastHtml extends Component {
     }
 
     render() {
-        console.log(this.props.rss)
-        return(    
-            <Card className="text-center p-3 border-0">
-                <div className="image-item">
+        // console.log(this.props.rss)
+        const { podcastHeight } = this.state
+        return(
+            <Card className="text-center p-1 border-0" ref={ e => {this.container = e}}>
+                <div className="image-item" style={{ height: '300px'}}>
                     <a href={`/#/podcasts/${this.props.link}`}>
                     {/*!this.props.rss && <Badge className="episode-badge" bg="info">{this.episodeCount(this.props.episodes)}</Badge>*/} {/* TODO: stick badge to bounds of cover image, don't guess */}
                         <Image className="podcast-grid-cover" alt={`${this.props.name} cover`} src={this.props.image} />
                     </a>
                 </div>
-                <div className={this.props.titleClass || 'h3'}>{this.props.name} { this.props.rss ? <span><Button size="sm" className="rss-button" onClick={() => this.loadRss()}><FaRss/></Button>  {this.tipButton()}  </span> : null } </div>
-                <p>{this.props.description}</p>
+                <div>
+                    <div className={this.props.titleClass || 'h3'}>{this.props.name} { this.props.rss ? <span><Button size="sm" className="rss-button" onClick={() => this.loadRss()}><FaRss/></Button>  {this.tipButton()}  </span> : null } </div>
+                    <p>{this.props.description}</p>
+                </div>
             </Card>
         )
     }