use class component for PostAdditions

packages/app/src/components/PostCard/index.jsx

@@ -107,101 +107,92 @@ export function PostHeader(props) {
     </div>
 }
 
-export const PostAdditions = React.memo((props) => {
+export class PostAdditions extends React.PureComponent {
-    let { additions } = props
+    getAdditions = (data) => {
-
+        return data.map((addition, index) => {
-    let carruselRef = React.useRef(null)
+            if (typeof addition === "string") {
-
+                addition = {
-    // fullfil url string additions
+                    url: addition,
-    additions = additions.map((addition) => {
-        if (typeof addition === "string") {
-            addition = { 
-                url: addition,
-            }
-        }
-
-        return addition
-    })
-
-    // then filter if has an valid url
-    additions = additions.filter(addition => /^(http|https):\/\//.test(addition.url))
-    
-    additions = additions.map((addition, index) => {
-        const { url, id, name } = addition
-
-        const MediaRender = loadable(async () => {
-            let extension = null
-
-            try {
-                // get media type by parsing the url
-                const mediaTypeExt = /\.([a-zA-Z0-9]+)$/.exec(url)
-
-                if (mediaTypeExt) {
-                    extension = mediaTypeExt[1]
-                } else {
-                    // try to get media by creating requesting the url
-                    const response = await fetch(url, {
-                        method: "HEAD",
-                    })
-
-                    extension = response.headers.get("content-type").split("/")[1]
                 }
+            }
 
-                extension = extension.toLowerCase()
+            const { url, id, name } = addition
 
-                const mediaType = mediaTypes[extension]
+            const MediaRender = loadable(async () => {
-                const mimeType = `${mediaType}/${extension}`
+                let extension = null
 
-                if (!mediaType) {
+                try {
+                    // get media type by parsing the url
+                    const mediaTypeExt = /\.([a-zA-Z0-9]+)$/.exec(url)
+
+                    if (mediaTypeExt) {
+                        extension = mediaTypeExt[1]
+                    } else {
+                        // try to get media by creating requesting the url
+                        const response = await fetch(url, {
+                            method: "HEAD",
+                        })
+
+                        extension = response.headers.get("content-type").split("/")[1]
+                    }
+
+                    extension = extension.toLowerCase()
+
+                    const mediaType = mediaTypes[extension]
+                    const mimeType = `${mediaType}/${extension}`
+
+                    if (!mediaType) {
+                        return () => <ContentFailed />
+                    }
+
+                    switch (mediaType.split("/")[0]) {
+                        case "image": {
+                            return () => <img src={url} />
+                        }
+                        case "video": {
+                            return () => <video controls>
+                                <source src={url} type={mimeType} />
+                            </video>
+                        }
+                        case "audio": {
+                            return () => <audio controls>
+                                <source src={url} type={mimeType} />
+                            </audio>
+                        }
+
+                        default: {
+                            return () => <h4>
+                                Unsupported media type [{mediaType}/{mediaTypeExt}]
+                            </h4>
+                        }
+                    }
+                } catch (error) {
+                    console.error(error)
                     return () => <ContentFailed />
                 }
+            })
 
-                switch (mediaType.split("/")[0]) {
+            return <div key={index} className="addition">
-                    case "image": {
+                <React.Suspense fallback={<div>Loading</div>} >
-                        return () => <img src={url} />
+                    <MediaRender />
-                    }
+                </React.Suspense>
-                    case "video": {
+            </div>
-                        return () => <video controls>
-                            <source src={url} type={mimeType} />
-                        </video>
-                    }
-                    case "audio": {
-                        return () => <audio controls>
-                            <source src={url} type={mimeType} />
-                        </audio>
-                    }
-
-                    default: {
-                        return () => <h4>
-                            Unsupported media type [{mediaType}/{mediaTypeExt}]
-                        </h4>
-                    }
-                }
-            } catch (error) {
-                console.error(error)
-                return () => <ContentFailed />
-            }
         })
+    }
 
-        return <div key={index} className="addition">
+    render() {
-            <React.Suspense fallback={<div>Loading</div>} >
+        return <div className="additions">
-                <MediaRender />
+            <antd.Carousel
-            </React.Suspense>
+                arrows={true}
+                nextArrow={<Icons.ChevronRight />}
+                prevArrow={<Icons.ChevronLeft />}
+                autoplay={this.props.autoCarrousel}
+            >
+                {this.getAdditions(this.props.additions)}
+            </antd.Carousel>
         </div>
-    })
+    }
-
+}
-    return <div className="additions">
-        <antd.Carousel
-            ref={carruselRef}
-            arrows={true}
-            nextArrow={<Icons.ChevronRight />}
-            prevArrow={<Icons.ChevronLeft />}
-            autoplay={props.autoCarrousel}
-        >
-            {additions}
-        </antd.Carousel>
-    </div>
-})
 
 export const PostContent = React.memo((props) => {
     let { message, additions } = props.data