ClipSync-Mobile/src/components/notif/NotifViewRemote.tsx

import React from 'react';
import axios from 'axios';
import {ScrollView, View, Text, useWindowDimensions} from 'react-native';
import NotifListfrom from './NotifList';
import {store} from '../../redux/store';
import {useToast} from 'react-native-toast-notifications';
import {Button} from 'react-native-paper';
import {ps} from '../../utils';
import NotifList from './NotifList';
import {useDispatch} from 'react-redux';
import {remoteNotifAddToList} from '../../redux/reducers';

export default function NotifViewRemote() {
  const [clips, setClips] = React.useState(
    store.getState().remoteNotif.remoteNotif,
  );
  const toast = useToast();
  const dispatch = useDispatch();

  const {height, width} = useWindowDimensions();

  async function getNotif(dispatch) {
    axios
      .get(
        'https://notifysync.simailadjalim.fr/notification?token=' +
          store.getState().user.token,
      )
      .then((response, status) => {
        let remoteNotif = Object.values(response['data']['notifications']);
        setClips(remoteNotif);
        dispatch(remoteNotifAddToList(remoteNotif));
        toast.show('fetched latest notifications from remote');
      })
      .catch(response => {
        toast.show('failed to fetch latest notifications');
      });
  }

  return (
    <View
      style={{
        width: '100%',
        height: '100%',
        flex: 1,
        margin: width > 600 ? ps(10) : 0,
      }}>
      <Button mode="elevated" onPress={() => dispatch(getNotif)}>
        Refresh
      </Button>
      <ScrollView>
        <NotifList type="remote" notifs={clips} />
      </ScrollView>
    </View>
  );
}