Merge pull request #2715 from ecency/mb/theme-container

Mb/theme container
ecency · Jul 11, 2023 · d7d29fa · d7d29fa
2 parents 74568fd + 724fe84
commit d7d29fa
Show file tree

Hide file tree

Showing 17 changed files with 429 additions and 484 deletions.
diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js
@@ -1,11 +1,10 @@
 /* eslint-disable radix */
 import React from 'react';
 import { View } from 'react-native';
+import { useSelector } from 'react-redux';
 import times from 'lodash/times';
 import Placeholder from 'rn-placeholder';
-
-import { ThemeContainer } from '../../../../containers';
-
+// import { useSelector } from 'react-redux'; //NEW LINE ADDED
 import styles from './boostPlaceHolderStyles';
 import getWindowDimensions from '../../../../utils/getWindowDimensions';
 
@@ -14,37 +13,31 @@ const HEIGHT = getWindowDimensions().height;
 const BoostPlaceHolder = () => {
   const ratio = (HEIGHT - 300) / 50 / 1.3;
   const listElements = [];
-
+  const isDarkTheme = useSelector((state) => state.application.isDarkTeme);
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
   times(parseInt(ratio), (i) => {
-    listElements.push(
-      <ThemeContainer>
-        {({ isDarkTheme }) => {
-          const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-          return (
-            <View style={styles.container} key={`key-${i.toString()}`}>
-              <View style={styles.line}>
-                <Placeholder.Box color={color} width={90} height={40} animate="fade" />
-                <View style={styles.paragraphWrapper}>
-                  <Placeholder.Box
-                    color={color}
-                    width={140}
-                    radius={25}
-                    height={50}
-                    animate="fade"
-                  />
-                </View>
-                <Placeholder.Box
-                  style={styles.rightBox}
-                  color={color}
-                  width={20}
-                  height={10}
-                  animate="fade"
-                />
-              </View>
-            </View>
-          );
-        }}
-      </ThemeContainer>,
+    listElements.push(<View style={styles.container} key={`key-${i.toString()}`}>
+      <View style={styles.line}>
+        <Placeholder.Box color={color} width={90} height={40} animate="fade" />
+        <View style={styles.paragraphWrapper}>
+          <Placeholder.Box
+            color={color}
+            width={140}
+            radius={25}
+            height={50}
+            animate="fade"
+          />
+        </View>
+        <Placeholder.Box
+          style={styles.rightBox}
+          color={color}
+          width={20}
+          height={10}
+          animate="fade"
+        />
+      </View>
+    </View>
+
     );
   });
 

diff --git a/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js
@@ -2,8 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import LottieView from 'lottie-react-native';
-import { ThemeContainer } from '../../../../containers';
-
+import { useSelector } from 'react-redux';
 import styles from './listItemPlaceHolderStyles';
 
 const CommentPlaceHolderView = () => {
@@ -12,31 +11,31 @@ const CommentPlaceHolderView = () => {
     height: 72,
   };
 
+
+  const isDarkTheme = useSelector((state) => state.application.isDarkTheme);
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
+
   return (
-    <ThemeContainer>
-      {({ isDarkTheme }) => {
-        const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-        return (
-          <View style={styles.container}>
-            <LottieView
-              style={animationStyle}
-              source={require('../../../../assets/animations/commentBody.json')}
-              autoPlay
-              loop={true}
-              autoSize={true}
-              resizeMode="cover"
-              colorFilters={[
-                {
-                  keypath: 'comments',
-                  color,
-                },
-              ]}
-            />
-          </View>
-        );
-      }}
-    </ThemeContainer>
+    <View style={styles.container}>
+      <LottieView
+        style={animationStyle}
+        source={require('../../../../assets/animations/commentBody.json')}
+        autoPlay
+        loop={true}
+        autoSize={true}
+        resizeMode="cover"
+        colorFilters={[
+          {
+            keypath: 'comments',
+            color,
+          },
+        ]}
+      />
+    </View>
   );
+
+
+
 };
 
 export default CommentPlaceHolderView;
diff --git a/src/components/basicUIElements/view/placeHolder/communitiesPlaceHolder.js b/src/components/basicUIElements/view/placeHolder/communitiesPlaceHolder.js
@@ -2,33 +2,29 @@ import React from 'react';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
-import { ThemeContainer } from '../../../../containers';
+import { useSelector } from 'react-redux';
 
 import styles from './postCardPlaceHolderStyles';
 // TODO: make container for place holder wrapper after alpha
 const PostCardPlaceHolder = () => {
+  const isDarkTheme = useSelector((state) => state.application.isDarkTheme)
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
   return (
-    <ThemeContainer>
-      {({ isDarkTheme }) => {
-        const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-        return (
-          <View style={styles.container}>
-            <View style={styles.paragraphWrapper}>
-              <Placeholder.Paragraph
-                lineNumber={4}
-                color={color}
-                textSize={16}
-                lineSpacing={5}
-                width="100%"
-                lastLineWidth="70%"
-                firstLineWidth="20%"
-                animate="fade"
-              />
-            </View>
-          </View>
-        );
-      }}
-    </ThemeContainer>
+    <View style={styles.container}>
+      <View style={styles.paragraphWrapper}>
+        <Placeholder.Paragraph
+          lineNumber={4}
+          color={color}
+          textSize={16}
+          lineSpacing={5}
+          width="100%"
+          lastLineWidth="70%"
+          firstLineWidth="20%"
+          animate="fade"
+        />
+      </View>
+    </View>
   );
+
 };
 export default PostCardPlaceHolder;
diff --git a/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js
@@ -2,35 +2,32 @@ import React from 'react';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
-import { ThemeContainer } from '../../../../containers';
+import { useSelector } from 'react-redux';
 
 import styles from './listItemPlaceHolderStyles';
 
 const ListItemPlaceHolderView = () => {
+
+  const isDarkTheme = useSelector((state) => state.application.isDarkTheme);
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
   return (
-    <ThemeContainer>
-      {({ isDarkTheme }) => {
-        const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-        return (
-          <View style={styles.container}>
-            <Placeholder.Media size={30} hasRadius animate="fade" color={color} />
-            <View style={styles.paragraphWrapper}>
-              <Placeholder.Paragraph
-                color={color}
-                lineNumber={2}
-                textSize={12}
-                lineSpacing={8}
-                width="100%"
-                lastLineWidth="70%"
-                firstLineWidth="50%"
-                animate="fade"
-              />
-            </View>
-          </View>
-        );
-      }}
-    </ThemeContainer>
+    <View style={styles.container}>
+      <Placeholder.Media size={30} hasRadius animate="fade" color={color} />
+      <View style={styles.paragraphWrapper}>
+        <Placeholder.Paragraph
+          color={color}
+          lineNumber={2}
+          textSize={12}
+          lineSpacing={8}
+          width="100%"
+          lastLineWidth="70%"
+          firstLineWidth="50%"
+          animate="fade"
+        />
+      </View>
+    </View>
   );
+
 };
 
 export default ListItemPlaceHolderView;
diff --git a/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js
@@ -1,39 +1,34 @@
 import React from 'react';
 import { View } from 'react-native';
 import LottieView from 'lottie-react-native';
-import { ThemeContainer } from '../../../../containers';
+import { useSelector } from 'react-redux';
 import styles from './postCardPlaceHolderStyles';
 import getWindowDimensions from '../../../../utils/getWindowDimensions';
-
 const PostCardPlaceHolder = () => {
   const animationStyle = {
     width: getWindowDimensions().nativeWidth - 32,
   };
 
+  const isDarkTheme = useSelector((state) => state.application.isDarkTheme);
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
   return (
-    <ThemeContainer>
-      {({ isDarkTheme }) => {
-        const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-        return (
-          <View style={styles.container}>
-            <LottieView
-              style={animationStyle}
-              source={require('../../../../assets/animations/postList.json')}
-              autoPlay
-              loop={true}
-              autoSize={true}
-              resizeMode="cover"
-              colorFilters={[
-                {
-                  keypath: 'postList',
-                  color,
-                },
-              ]}
-            />
-          </View>
-        );
-      }}
-    </ThemeContainer>
+    <View style={styles.container}>
+      <LottieView
+        style={animationStyle}
+        source={require('../../../../assets/animations/postList.json')}
+        autoPlay
+        loop={true}
+        autoSize={true}
+        resizeMode="cover"
+        colorFilters={[
+          {
+            keypath: 'postList',
+            color,
+          },
+        ]}
+      />
+    </View>
   );
+
 };
 export default PostCardPlaceHolder;
diff --git a/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js
@@ -1,36 +1,33 @@
 import React from 'react';
 import { View } from 'react-native';
 import LottieView from 'lottie-react-native';
-import { ThemeContainer } from '../../../../containers';
-import getWindowDimensions from '../../../../utils/getWindowDimensions';
+import { useSelector } from 'react-redux';
 
+import getWindowDimensions from '../../../../utils/getWindowDimensions';
 const PostPlaceHolder = () => {
-  return (
-    <ThemeContainer>
-      {({ isDarkTheme }) => {
-        const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
-        return (
-          <View>
-            <LottieView
-              style={{ width: getWindowDimensions().nativeWidth - 24 }}
-              source={require('../../../../assets/animations/postBody.json')}
-              autoPlay
-              loop={true}
-              autoSize={true}
-              resizeMode="cover"
-              colorFilters={[
-                {
-                  keypath: 'layer1',
-                  color,
-                },
-              ]}
-            />
-          </View>
-        );
-      }}
-    </ThemeContainer>
+  const isDarkTheme = useSelector((state) => state.application.isDarkTheme);
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
+
+  return (
+    <View>
+      <LottieView
+        style={{ width: getWindowDimensions().nativeWidth - 24 }}
+        source={require('../../../../assets/animations/postBody.json')}
+        autoPlay
+        loop={true}
+        autoSize={true}
+        resizeMode="cover"
+        colorFilters={[
+          {
+            keypath: 'layer1',
+            color,
+          },
+        ]}
+      />
+    </View>
   );
+
 };
 
 export default PostPlaceHolder;