use class component for PostAdditions

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

@@ -107,26 +107,15 @@ 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)
-
-    // fullfil url string additions
-    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 () => {
@@ -189,19 +178,21 @@ export const PostAdditions = React.memo((props) => {
                 </React.Suspense>
             </div>
         })
+    }
 
+    render() {
         return <div className="additions">
             <antd.Carousel
-            ref={carruselRef}
                 arrows={true}
                 nextArrow={<Icons.ChevronRight />}
                 prevArrow={<Icons.ChevronLeft />}
-            autoplay={props.autoCarrousel}
+                autoplay={this.props.autoCarrousel}
             >
-            {additions}
+                {this.getAdditions(this.props.additions)}
             </antd.Carousel>
         </div>
-})
+    }
+}
 
 export const PostContent = React.memo((props) => {
     let { message, additions } = props.data