Refactor dimension handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-07-13 19:03:53 +03:00
parent 703155232d
commit 4128b0df20
17 changed files with 406 additions and 250 deletions
--- a/src/screens/addMeme.tsx
+++ b/src/screens/addMeme.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Appbar, Text } from 'react-native-paper';
-import { PaddedView } from '../components';
+import { RootScrollView } from '../components';
 import { useNavigation } from '@react-navigation/native';

 const AddMeme = () => {
@@ -12,9 +12,9 @@ const AddMeme = () => {
        <Appbar.BackAction onPress={() => navigation.goBack()} />
        <Appbar.Content title="Add Meme" />
      </Appbar.Header>
-      <PaddedView centered>
+      <RootScrollView centered padded>
        <Text>Add Meme</Text>
-      </PaddedView>
+      </RootScrollView>
    </>
  );
 };
--- a/src/screens/addTag.tsx
+++ b/src/screens/addTag.tsx
@@ -1,37 +1,12 @@
 import React, { useState } from 'react';
-import { View, StyleSheet } from 'react-native';
-import {
-  Chip,
-  TextInput,
-  Appbar,
-  HelperText,
-  Button,
-} from 'react-native-paper';
+import { View } from 'react-native';
+import { TextInput, Appbar, HelperText, Button } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { BSON } from 'realm';
 import { useRealm } from '@realm/react';
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-import { PaddedView } from '../components';
-import styles, { horizontalScale, verticalScale } from '../styles';
-import {
-  generateRandomColor,
-  getContrastColor,
-  isValidColor,
-} from '../utilities';
-
-const tagStyles = StyleSheet.create({
-  preview: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-    marginVertical: verticalScale(75),
-  },
-  chip: {
-    padding: horizontalScale(5),
-  },
-  chipText: {
-    fontSize: horizontalScale(15),
-  },
-});
+import { RootScrollView, TagPreview } from '../components';
+import styles from '../styles';
+import { generateRandomColor, isValidColor } from '../utilities';

 const AddTag = () => {
  const navigation = useNavigation();
@@ -87,34 +62,19 @@ const AddTag = () => {
        <Appbar.BackAction onPress={() => navigation.goBack()} />
        <Appbar.Content title="Add Tag" />
      </Appbar.Header>
-      <PaddedView style={[styles.flex, styles.flexColumnSpaceBetween]}>
-        <View>
-          <View style={[tagStyles.preview]}>
-            <Chip
-              icon={() => {
-                return (
-                  <FontAwesome5
-                    name="tag"
-                    size={horizontalScale(12)}
-                    color={getContrastColor(validatedTagColor)}
-                  />
-                );
-              }}
-              elevated
-              style={[tagStyles.chip, { backgroundColor: validatedTagColor }]}
-              textStyle={[
-                tagStyles.chipText,
-                { color: getContrastColor(validatedTagColor) },
-              ]}>
-              {'#' + tagName}
-            </Chip>
-          </View>
+      <RootScrollView
+        padded
+        style={[styles.flexGrow, styles.flexColumnSpaceBetween]}>
+        <View style={[styles.flex, styles.justifyStart]}>
+          <TagPreview name={tagName} color={validatedTagColor} />
          <TextInput
            mode="outlined"
            label="Tag Name"
            value={tagName}
            onChangeText={handleTagNameChange}
            error={!!tagNameError}
+            autoCapitalize="none"
+            selectTextOnFocus
          />
          <HelperText type="error" visible={!!tagNameError}>
            {tagNameError}
@@ -125,6 +85,7 @@ const AddTag = () => {
            value={tagColor}
            onChangeText={handleTagColorChange}
            error={!!tagColorError}
+            autoCorrect={false}
            right={
              <TextInput.Icon
                icon="palette"
@@ -136,14 +97,16 @@ const AddTag = () => {
            {tagColorError}
          </HelperText>
        </View>
-        <Button
-          mode="contained"
-          icon="floppy"
-          onPress={handleSave}
-          disabled={!!tagNameError || !!tagColorError}>
-          Save
-        </Button>
-      </PaddedView>
+        <View style={[styles.flex, styles.justifyEnd]}>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={handleSave}
+            disabled={!!tagNameError || !!tagColorError}>
+            Save
+          </Button>
+        </View>
+      </RootScrollView>
    </>
  );
 };
--- a/src/screens/home.tsx
+++ b/src/screens/home.tsx
@@ -9,8 +9,8 @@ import {
  Searchbar,
 } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
-import { PaddedView } from '../components';
-import styles, { verticalScale } from '../styles';
+import { RootScrollView } from '../components';
+import styles from '../styles';
 import { SORT, SORT_DIRECTION } from '../types';
 import { getSortIcon, getViewIcon } from '../utilities';
 import {
@@ -23,10 +23,11 @@ import {
  setFilter,
 } from '../state';
 import { MEME_TYPE, memeTypePlural } from '../database';
+import { useDimensions } from '../contexts';

 const Home = () => {
  const theme = useTheme();
-
+  const dimensions = useDimensions();
  const sort = useSelector((state: RootState) => state.home.sort);
  const sortDirection = useSelector(
    (state: RootState) => state.home.sortDirection,
@@ -63,7 +64,7 @@ const Home = () => {
  const [search, setSearch] = useState('');

  return (
-    <PaddedView>
+    <RootScrollView padded>
      <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
      <View style={[styles.flexRowSpaceBetween, styles.centeredVertical]}>
        <View style={[styles.flexRow, styles.centeredVertical]}>
@@ -96,13 +97,13 @@ const Home = () => {
          <IconButton
            icon={getViewIcon(view)}
            iconColor={theme.colors.primary}
-            size={verticalScale(16)}
+            size={dimensions.static.verticalScale(16)}
            onPress={() => dispatch(cycleView())}
          />
          <IconButton
            icon={favoritesOnly ? 'heart' : 'heart-outline'}
            iconColor={theme.colors.primary}
-            size={verticalScale(16)}
+            size={dimensions.static.verticalScale(16)}
            onPress={() => dispatch(toggleFavoritesOnly())}
          />
          <Menu
@@ -113,7 +114,7 @@ const Home = () => {
                onPress={() => setFilterMenuVisible(true)}
                icon={filter ? 'filter' : 'filter-outline'}
                iconColor={theme.colors.primary}
-                size={verticalScale(16)}
+                size={dimensions.static.verticalScale(16)}
              />
            }>
            <Menu.Item
@@ -138,7 +139,7 @@ const Home = () => {
        </View>
      </View>
      <Divider />
-    </PaddedView>
+    </RootScrollView>
  );
 };

--- a/src/screens/settings.tsx
+++ b/src/screens/settings.tsx
@@ -4,18 +4,19 @@ import { Button, List, Snackbar, Switch, Text } from 'react-native-paper';
 import { useRealm } from '@realm/react';
 import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
-import { PaddedView } from '../components';
+import { RootScrollView } from '../components';
 import styles from '../styles';
 import { Meme } from '../database';
 import { RootState, updateNoMedia, updateStorageUri } from '../state';
 import type {} from 'redux-thunk/extend-redux';
+import { useDimensions } from '../contexts';

 const SettingsScreen = () => {
-  const [optimizingDatabase, setOptimizingDatabase] = useState(false);
-
  const noMedia = useSelector((state: RootState) => state.settings.noMedia);
  const dispatch = useDispatch();
+  const dimensions = useDimensions();

+  const [optimizingDatabase, setOptimizingDatabase] = useState(false);
  const [snackbarVisible, setSnackbarVisible] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState('');

@@ -45,13 +46,15 @@ const SettingsScreen = () => {

  return (
    <>
-      <PaddedView>
+      <RootScrollView padded>
        <View>
          <List.Section>
            <List.Subheader>Database</List.Subheader>
            <Button
              mode="elevated"
-              style={styles.marginBottom}
+              style={{
+                marginBottom: dimensions.responsive.verticalScale(15),
+              }}
              loading={optimizingDatabase}
              onPress={optimizeDatabase}>
              Optimize Database Now
@@ -61,7 +64,9 @@ const SettingsScreen = () => {
            <List.Subheader>Media Storage</List.Subheader>
            <Button
              mode="elevated"
-              style={styles.marginBottom}
+              style={{
+                marginBottom: dimensions.responsive.verticalScale(15),
+              }}
              onPress={async () => {
                const { uri } = await openDocumentTree(true);
                void dispatch(updateStorageUri(uri));
@@ -72,7 +77,9 @@ const SettingsScreen = () => {
              style={[
                styles.flexRowSpaceBetween,
                styles.smallPaddingHorizontal,
-                styles.marginBottom,
+                {
+                  marginBottom: dimensions.responsive.verticalScale(15),
+                },
              ]}>
              <Text>Hide media from gallery</Text>
              <Switch
@@ -84,7 +91,7 @@ const SettingsScreen = () => {
            </View>
          </List.Section>
        </View>
-      </PaddedView>
+      </RootScrollView>
      <Snackbar
        visible={snackbarVisible}
        onDismiss={() => setSnackbarVisible(false)}
--- a/src/screens/tags.tsx
+++ b/src/screens/tags.tsx
@@ -1,7 +1,7 @@
 import React from 'react';

 import { Button, Text } from 'react-native-paper';
-import { PaddedView } from '../components';
+import { RootScrollView } from '../components';
 import { useQuery, useRealm } from '@realm/react';
 import { Tag, deleteAllTags } from '../database';

@@ -10,14 +10,14 @@ const Tags = () => {
  const tags = useQuery<Tag>('Tag');

  return (
-    <PaddedView centered>
+    <RootScrollView centered padded>
      {tags.map(tag => (
        <Text key={tag.id.toHexString()} style={{ color: tag.color }}>
          {tag.name}
        </Text>
      ))}
      <Button onPress={() => deleteAllTags(realm)}>Delete All Tags</Button>
-    </PaddedView>
+    </RootScrollView>
  );
 };

--- a/src/screens/welcome.tsx
+++ b/src/screens/welcome.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { Button, Text } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { openDocumentTree } from 'react-native-scoped-storage';
-import { PaddedView } from '../components';
+import { RootView } from '../components';
 import styles from '../styles';
 import { noOp } from '../utilities';
 import { updateStorageUri } from '../state';
+import { useDimensions } from '../contexts';

 const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
  const dispatch = useDispatch();
+  const dimensions = useDimensions();

  const selectStorageLocation = async () => {
    const uri = await openDocumentTree(true).catch(noOp);
@@ -18,19 +20,26 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
  };

  return (
-    <PaddedView centered>
+    <RootView centered padded>
      <Text
        variant="displayMedium"
-        style={[styles.bigMarginBottom, styles.centerText]}>
+        style={[
+          {
+            marginBottom: dimensions.responsive.verticalScale(30),
+          },
+          styles.centerText,
+        ]}>
        Welcome to Terminally Online!
      </Text>
      <Button
        mode="contained"
        onPress={selectStorageLocation}
-        style={styles.extremeMarginBottom}>
+        style={{
+          marginBottom: dimensions.responsive.verticalScale(100),
+        }}>
        Select Storage Location
      </Button>
-    </PaddedView>
+    </RootView>
  );
 };