feat: Implement discipline tasks (#145)

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@expo/config-plugins": "~7.8.0",
     "@expo/vector-icons": "^14.0.0",
-    "@gorhom/bottom-sheet": "^5.0.0-alpha.6",
+    "@gorhom/bottom-sheet": "^5.0.0-alpha.7",
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/material-top-tabs": "^6.6.3",
@@ -64,13 +64,14 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-tab-view": "^3.5.2",
-    "react-native-ui-datepicker": "^1.0.11",
+    "react-native-ui-datepicker": "^2.0.0",
     "react-native-web": "~0.19.6",
     "react-native-webview": "13.6.4",
     "react-redux": "^8.1.3",
     "sentry-expo": "~7.1.0",
     "sp-react-native-in-app-updates": "^1.3.1",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "expo-clipboard": "~5.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/App.tsx

@@ -9,7 +9,8 @@ import { Provider } from 'react-redux';
 import StackNavigator from './navigation/StackNavigator';
 import setupStore from './redux';
 import { loadStorage } from './redux/storageLoader';
-import { defineFetchTask } from './tasks/signs';
+import { defineReminderTask } from './tasks/disciplineTasks';
+import { defineSignsFetchTask } from './tasks/signs';
 import { checkUpdate } from './utils/inappUpdate';
 import { registerForPushNotificationsAsync, setNotificationHandler } from './utils/notifications';
 import { addShortcuts } from './utils/shortcuts';
@@ -19,7 +20,8 @@ SplashScreen.preventAutoHideAsync().catch((e) => e);
 const store = setupStore();
 store.dispatch(loadStorage());
 
-defineFetchTask();
+defineSignsFetchTask();
+defineReminderTask();
 setNotificationHandler();
 addShortcuts();
 

src/components/AnnouncePopover.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import AutoHeightWebView from 'react-native-autoheight-webview';
+import Popover, { PopoverPlacement } from 'react-native-popover-view';
+
+import { useGlobalStyles } from '../hooks';
+import { useAppTheme } from '../hooks/theme';
+import { getStyles } from '../utils/webView';
+import { Button } from './Button';
+
+const AnnouncePopover = ({ data }: { data: string }) => {
+  const globalStyles = useGlobalStyles();
+  const theme = useAppTheme();
+
+  return (
+    <Popover
+      placement={PopoverPlacement.FLOATING}
+      from={(_, showPopover) => (
+        <Button text={'Объявление'} onPress={showPopover} variant={'card'} />
+      )}
+      popoverStyle={{
+        borderRadius: globalStyles.border.borderRadius,
+        backgroundColor: globalStyles.block.backgroundColor,
+        padding: '2%',
+      }}
+    >
+      <AutoHeightWebView
+        source={{ html: data }}
+        customStyle={getStyles(theme.colors.textForBlock, theme.colors.primary)}
+      />
+    </Popover>
+  );
+};
+
+export default AnnouncePopover;

src/components/BottomSheetModalBackdrop.tsx

@@ -0,0 +1,24 @@
+import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
+import React, { useMemo } from 'react';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+
+const BottomSheetModalBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
+  const containerAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(animatedIndex.value, [-1, 0], [0, 0.3], Extrapolation.CLAMP),
+  }));
+
+  const containerStyle = useMemo(
+    () => [
+      style,
+      {
+        backgroundColor: '#000000',
+      },
+      containerAnimatedStyle,
+    ],
+    [style, containerAnimatedStyle]
+  );
+
+  return <Animated.View style={containerStyle} />;
+};
+
+export default BottomSheetModalBackdrop;

src/components/Button.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { ActivityIndicator, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
+import {
+  ActivityIndicator,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 import { useGlobalStyles } from '../hooks';
 import { fontSize } from '../utils/texts';
@@ -13,77 +21,79 @@ const defaultStyles = StyleSheet.create({
   },
 });
 
-const Button = ({
-  text,
-  onPress,
-  disabled,
-  showLoading,
-  variant,
-  fontStyle,
-}: {
+interface ButtonProps {
   text: string;
   onPress(): void;
   disabled?: boolean;
   showLoading?: boolean;
   variant: 'primary' | 'secondary' | 'card';
   fontStyle?: StyleProp<TextStyle>;
-}) => {
-  const globalStyles = useGlobalStyles();
+}
 
-  const styles = {
-    primary: {
-      textColor: globalStyles.textColor.color,
-      text: [globalStyles.fontColorForPrimary, { fontWeight: '500' }, fontStyle || fontSize.xlarge],
-      view: [
-        defaultStyles.container,
-        globalStyles.primaryBackgroundColor,
-        globalStyles.borderRadius,
-      ],
-    },
-    secondary: {
-      textColor: globalStyles.textColor.color,
-      text: [
-        globalStyles.fontColorForSecondary,
-        { fontWeight: '500' },
-        fontStyle || fontSize.xlarge,
-      ],
-      view: [
-        defaultStyles.container,
-        globalStyles.secondaryBackgroundColor,
-        globalStyles.borderRadius,
-      ],
-    },
-    card: {
-      textColor: globalStyles.fontColorForBlock.color,
-      text: [globalStyles.fontColorForBlock, { fontWeight: '500' }, fontStyle || fontSize.xlarge],
-      view: [defaultStyles.container, globalStyles.block, globalStyles.border],
-    },
-  };
+const Button = React.forwardRef<View | Text | TouchableOpacity, ButtonProps>(
+  ({ text, onPress, disabled, showLoading, variant, fontStyle }, ref) => {
+    const globalStyles = useGlobalStyles();
 
-  if (showLoading) {
-    return (
-      <View style={styles[variant].view}>
-        <ActivityIndicator size="large" color={styles[variant].textColor} />
-      </View>
-    );
-  }
+    const styles = {
+      primary: {
+        textColor: globalStyles.textColor.color,
+        text: [
+          globalStyles.fontColorForPrimary,
+          { fontWeight: '500' },
+          fontStyle || fontSize.xlarge,
+        ],
+        view: [
+          defaultStyles.container,
+          globalStyles.primaryBackgroundColor,
+          globalStyles.borderRadius,
+        ],
+      },
+      secondary: {
+        textColor: globalStyles.textColor.color,
+        text: [
+          globalStyles.fontColorForSecondary,
+          { fontWeight: '500' },
+          fontStyle || fontSize.xlarge,
+        ],
+        view: [
+          defaultStyles.container,
+          globalStyles.secondaryBackgroundColor,
+          globalStyles.borderRadius,
+        ],
+      },
+      card: {
+        textColor: globalStyles.fontColorForBlock.color,
+        text: [globalStyles.fontColorForBlock, { fontWeight: '500' }, fontStyle || fontSize.xlarge],
+        view: [defaultStyles.container, globalStyles.block, globalStyles.border],
+      },
+    };
+
+    if (showLoading) {
+      return (
+        <View style={styles[variant].view} ref={ref as React.Ref<View>}>
+          <ActivityIndicator size="large" color={styles[variant].textColor} />
+        </View>
+      );
+    }
+
+    if (disabled) {
+      return (
+        <View style={styles[variant].view} ref={ref as React.Ref<View>}>
+          <Text style={styles[variant].text}>{text}</Text>
+        </View>
+      );
+    }
 
-  if (disabled) {
     return (
-      <View style={styles[variant].view}>
-        <Text style={styles[variant].text}>{text}</Text>
-      </View>
+      <ClickableText
+        ref={ref as React.Ref<TouchableOpacity>}
+        text={text}
+        onPress={onPress}
+        textStyle={styles[variant].text}
+        viewStyle={styles[variant].view}
+      />
     );
   }
-
-  return (
-    <ClickableText
-      text={text}
-      onPress={onPress}
-      textStyle={styles[variant].text}
-      viewStyle={styles[variant].view}
-    />
-  );
-};
+);
 
 export { Button };

src/components/CardHeaderOut.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
 
 import { useGlobalStyles } from '../hooks';
 import { fontSize } from '../utils/texts';
@@ -11,26 +11,27 @@ const styles = StyleSheet.create({
   },
   cardHeaderText: {
     fontWeight: '600',
+    ...fontSize.medium,
   },
 });
 
 const CardHeaderOut = ({
   topText,
   children,
   style,
+  topTextStyle,
 }: {
   topText: string;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  topTextStyle?: StyleProp<TextStyle>;
 }) => {
   const globalStyles = useGlobalStyles();
 
   return (
     <>
       <View style={styles.cardHeaderView}>
-        <Text style={[fontSize.medium, styles.cardHeaderText, globalStyles.textColor]}>
-          {topText}
-        </Text>
+        <Text style={[styles.cardHeaderText, globalStyles.textColor, topTextStyle]}>{topText}</Text>
       </View>
       <Card style={style}>{children}</Card>
     </>

src/components/ClickableText.tsx

@@ -1,30 +1,58 @@
 import React from 'react';
-import { StyleProp, TextStyle, TouchableOpacity, ViewStyle } from 'react-native';
+import {
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  ViewStyle,
+} from 'react-native';
 
 import Text, { TextColorVariant } from './Text';
 
-interface ClickableTextProps {
+interface ClickableTextProps extends TouchableOpacityProps {
   text: string | number;
   textStyle?: StyleProp<TextStyle>;
   viewStyle?: StyleProp<ViewStyle>;
   onPress(): void;
   adjustsFontSizeToFit?: boolean;
   colorVariant?: TextColorVariant;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
 }
 
-const ClickableText = ({
-  text,
-  textStyle,
-  viewStyle,
-  onPress,
-  adjustsFontSizeToFit,
-  colorVariant,
-}: ClickableTextProps) => (
-  <TouchableOpacity style={viewStyle} onPress={onPress}>
-    <Text adjustsFontSizeToFit={adjustsFontSizeToFit} style={textStyle} colorVariant={colorVariant}>
-      {text}
-    </Text>
-  </TouchableOpacity>
+const ClickableText = React.forwardRef<TouchableOpacity, ClickableTextProps>(
+  (
+    {
+      text,
+      textStyle,
+      viewStyle,
+      adjustsFontSizeToFit,
+      colorVariant,
+      iconLeft,
+      iconRight,
+      ...props
+    },
+    ref
+  ) => (
+    <TouchableOpacity style={[styles.row, viewStyle]} ref={ref} {...props}>
+      {iconLeft}
+      <Text
+        adjustsFontSizeToFit={adjustsFontSizeToFit}
+        style={textStyle}
+        colorVariant={colorVariant}
+      >
+        {text}
+      </Text>
+      {iconRight}
+    </TouchableOpacity>
+  )
 );
 
 export default ClickableText;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+});