Sorting By Numbers when the page loads without click event

Question

Hi I have a modal for event details as in the picture

And here, users can accept/reject the event or it can be pending. In api, the status : pending '0' - yellow bg, accept: '1' - green bg, reject: '3' - red bg

I want to sort them like 0-1-2-3 and show in the UI when the page is loaded. I wrote the sort fuction as below. But how can I show show it in UI ? the order doesnt change at all. I put this function to the button when I toggle the modal

const handleSort = () => {
    createdEventDetails?.invites?.map(item => Number(item.status)).sort();
    console.log(
      'hey',
      createdEventDetails?.invites?.map(item => Number(item.status)).sort(),
    );
  };

Here is my full code

import React, {useEffect, useState} from 'react';
import {View, Text} from 'react-native';
import {Icon} from '@/components';
import styles from '@/screens/dashboard/friends/Events/Events.styles';
import images from '@/config/images';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {blackColor} from '@/config/colors';
import {strings} from '@/localization';
import {useDispatch, useSelector} from 'react-redux';
import {
  closeEventDetailsModal,
  fetchEventDetails,
  fetchEventsList,
  openEventDetailsModal,
} from '@/store/events/events';
import CreatedEventDetails from './CreatedEventDetails';

const CreatedEvents = ({onPress}) => {
  const eventsList = useSelector(state => state.events.eventsList);
  const createdEventDetails = useSelector(state => state?.events?.eventDetails);

  const eventModalVisibility = useSelector(
    state => state.events.eventModalVisibility,
  );
  const dispatch = useDispatch();

  const toggleModal = id => {
    if (eventModalVisibility) {
      dispatch(closeEventDetailsModal());
    } else {
      dispatch(openEventDetailsModal());
    }
    // setModalVisible(!isModalVisible);
    dispatch(fetchEventDetails(id));
    console.log('id', id);
  };

  useEffect(() => {
    dispatch(fetchEventsList());
  }, [dispatch]);

  const handleSort = () => {
    createdEventDetails?.invites?.map(item => Number(item.status)).sort();
    console.log(
      'hey',
      createdEventDetails?.invites?.map(item => Number(item.status)).sort(),
    );
  };

  return (
    <View>
      <View>
        <Text style={styles.eventsTitleStyle}>
          {strings.pendingEvents.allEventsTitle}
        </Text>
        {eventsList?.length > 0 ? (
          eventsList?.map(event => {
            const capitilizedLetter = event.name
              .toLowerCase()
              .charAt(0)
              .toUpperCase();
            const restOfTheName = event.name.slice(1);
            return (
              <TouchableOpacity
                onPress={() => {
                  toggleModal(event.id);
                  handleSort();
                }}
                key={event.id}>
                <View style={styles.eventDatesContainer}>
                  <View style={styles.dateContainer}>
                    <Text style={styles.date}>
                      {event.event_date.substring(0, 10)}
                    </Text>
                    <Icon
                      icon={images.ic_right_arrow}
                      width={16}
                      height={16}
                      style={styles.inputArrow}
                      color={blackColor}
                    />
                  </View>
                  <Text
                    style={
                      styles.event
                    }>{`${capitilizedLetter}${restOfTheName}`}</Text>
                </View>
              </TouchableOpacity>
            );
          })
        ) : (
          <Text>There are no events</Text>
        )}
      </View>
      <CreatedEventDetails
        isVisible={eventModalVisibility}
        closeModal={toggleModal}
      />
    </View>
  );
};

export default CreatedEvents;

import React, {useEffect, useState} from 'react';
import {View, ScrollView, Text, Image, Pressable} from 'react-native';
import styles from '@/screens/dashboard/friends/Events/CreatedEventDetails.styles';
import Modal from 'react-native-modal';
import common from '@/config/common';
import {useDispatch, useSelector} from 'react-redux';
import FastImage from 'react-native-fast-image';
import images from '@/config/images';
import {Icon, LoadingIndicator} from '@/components';
import {
  closeEventDetailsModal,
  fetchEventsList,
  handleDeleteEvent,
  handleWithDrawEvent,
  LOADING,
} from '@/store/events/events';
import {EVENT_STATUS} from '@/constants/eventStatus';

const CreatedEventDetails = ({isVisible, closeModal}) => {
  const createdEventDetails = useSelector(state => state?.events?.eventDetails);
  const userInfo = useSelector(state => state.profile.user);
  const dispatch = useDispatch();

  const isLoading =
    useSelector(state => state?.events?.eventResponseStatus) === LOADING;

  const capitilizedLetter = createdEventDetails?.name
    ?.toLowerCase()
    .charAt(0)
    .toUpperCase();
  const restOfTheName = createdEventDetails?.name?.slice(1);

  const deleteEvent = id => {
    dispatch(handleDeleteEvent(id));
    dispatch(closeEventDetailsModal());
  };

  const withDrawEvent = id => {
    dispatch(handleWithDrawEvent(id));
    dispatch(closeEventDetailsModal());
  };

  function getBgColor(condition) {
    switch (condition) {
      case EVENT_STATUS.STATUS_NEW:
        return '#ef9d50';
      case EVENT_STATUS.STATUS_ACCEPTED:
        return '#a1dc6a';
      case EVENT_STATUS.STATUS_TENTATIVE:
        return 'blue';
      case EVENT_STATUS.STATUS_REJECTED:
        return 'red';
      default:
        return '#ef9d50';
    }
  }

  const isOwner = createdEventDetails?.owner?.id === userInfo?.id;

  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 100);
  }, []);

  return (
    <>
      {loading ? (
        <LoadingIndicator visible={isLoading} />
      ) : (
        <View style={styles.modalContainer}>
          <Modal
            isVisible={isVisible}
            propagateSwipe
            onModalWillHide={() => {
              setTimeout(() => {
                dispatch(fetchEventsList());
              }, 500);
              // console.log('tarkan');
            }}>
            <View style={styles.content}>
              <LoadingIndicator visible={isLoading} />
              <View style={styles.closeBtnContainer}>
                <Pressable style={styles.closeBtn} onPress={closeModal}>
                  <Text style={styles.closeText}>X</Text>
                </Pressable>
              </View>
              <View>
                <Text
                  style={
                    styles.contentTitle
                  }>{`${capitilizedLetter}${restOfTheName}`}</Text>
                <Text style={styles.contenSubtTitle}>
                  {createdEventDetails?.event_date?.substring(0, 10)}
                  {'\n'}
                  {createdEventDetails?.from_time} -{' '}
                  {createdEventDetails?.to_time}
                </Text>
                <Text style={styles.contentText}>
                  {createdEventDetails?.location}
                </Text>
                <View style={styles.participantsContainer}>
                  <Text style={styles.contentTitle}>
                    Participants ({createdEventDetails?.invites?.length})
                  </Text>
                  <View style={common.stickyButtonLine} />
                  <ScrollView>
                    {createdEventDetails?.invites?.map(invite => (
                      <View style={styles.checkboxContainer} key={invite.id}>
                        <View style={styles.imageContainer}>
                          {invite?.user?.thumb ? (
                            <FastImage
                              source={{uri: invite?.user?.thumb}}
                              style={styles.listItemUserImage}
                              resizeMode={FastImage.resizeMode.cover}
                            />
                          ) : (
                            <Icon
                              icon={images.ic_user}
                              style={styles.noUserIcon}
                            />
                          )}
                          <Text style={styles.contentPersonName}>
                            {invite?.user?.name}
                          </Text>
                        </View>
                        // here in this map, I display the status colors according to 
                        // accept/reject/pending
                        <View
                          style={{
                            backgroundColor: getBgColor(invite?.status),
                            width: 25,
                            height: 25,
                            borderRadius: 25,
                          }}
                          onPress={handleSort}>
                          <Text>{''}</Text>
                        </View>
                      </View>
                    ))}
                  </ScrollView>
                </View>
                <View>
                  <View>
                    <Text style={styles.contentTitle}>
                      Hobbies ({createdEventDetails?.hobbies?.length})
                    </Text>
                    <View style={common.stickyButtonLine} />
                    <View style={styles.hobbiesContainer}>
                      {createdEventDetails?.hobbies?.map(hobby => (
                        <View style={styles.emojiContainer} key={hobby.id}>
                          <Text>{hobby.emoji}</Text>
                        </View>
                      ))}
                    </View>
                    <View style={common.stickyButtonLine} />
                  </View>
                  <View style={[styles.buttons, styles.singleButtonAlign]}>
                    {isOwner ? (
                      <Pressable style={styles.decline}>
                        <Text
                          style={styles.declineText}
                          onPress={() => deleteEvent(createdEventDetails?.id)}>
                          Delete
                        </Text>
                      </Pressable>
                    ) : (
                      <Pressable style={styles.decline}>
                        <Text
                          style={styles.declineText}
                          onPress={() =>
                            withDrawEvent(createdEventDetails?.id)
                          }>
                          Withdraw
                        </Text>
                      </Pressable>
                    )}
                  </View>
                </View>
              </View>
            </View>
          </Modal>
        </View>
      )}
    </>
  );
};

export default CreatedEventDetails;

Nico_ · Answer 1 · 2022-05-12T13:27:33.537

0

Your sort will sort the content of each case of your array, so it does nothing, what you want is sorting the array, I adapted the code from this answer to your own issue with apiResult as your data:

const apiResult = {
  events: {
    invites: [
      {
        id: 13,
        status: '3',
        name: 'John',
        event: { id: 9, name: 'hello world', location: 'Madrid' },
      },
      {
        id: 14,
        status: '2',
        name: 'Bob',
        event: { id: 9, name: 'hello world', location: 'Madrid' },
      },
      ,
      {
        id: 15,
        status: '3',
        name: 'Alice',
        event: { id: 9, name: 'hello world', location: 'Madrid' },
      },
    ],
  },
};
    
const handleSort = () => {
        apiResult?.events?.invites?.sort((a, b) => Number(a.status) - Number(b.status));
};

edited May 12 '22 at 13:27

answered May 12 '22 at 12:19

Nico_

1,388
17
31

I see, but how can I fix it ? @Nico_ – Ayse8888 May 12 '22 at 12:48
My code should work but, can you share your an example of your `createdEventDetails. invites`? – Nico_ May 12 '22 at 12:50
sorry, it didn't work :( my crearedEventDetails api is like below as structure. i have an events object. and inside there is invites array and status is inside of this array ```` { "status": "ok", "message": "Event is retrieved successfully.", "events": { "invites": [ { "id": 13, "status": "3", "event": { "id": 9, "name": "hello world", "location": "Madrid", } } ] } } – Ayse8888 May 12 '22 at 13:00
I adapted my answer to your data structure and it should work: first you have the invites with the lowest status (1), then 2 and finally 3. – Nico_ May 12 '22 at 13:28

Sorting By Numbers when the page loads without click event

1 Answers1