fixed photos and added trip screen layout

Route.tsx

@@ -34,6 +34,7 @@ import EarthScreen from 'src/screens/InAppScreens/TravelsScreen/EarthScreen';
 import PhotosScreen from 'src/screens/InAppScreens/TravelsScreen/PhotosScreen';
 import MorePhotosScreen from 'src/screens/InAppScreens/TravelsScreen/MorePhotosScreen';
 import AddPhotoScreen from 'src/screens/InAppScreens/TravelsScreen/AddPhotoScreen';
+import TripsScreen from 'src/screens/InAppScreens/TravelsScreen/TripsScreen';
 
 import { NAVIGATION_PAGES } from './src/types';
 import { storage, StoreType } from './src/storage';
@@ -97,7 +98,8 @@ const Route = () => {
         android: {
           height: 58
         }
-      })
+      }),
+      backgroundColor: '#FAFAFA',
     }
   });
 
@@ -170,6 +172,7 @@ const Route = () => {
                   <ScreenStack.Screen name={NAVIGATION_PAGES.PHOTOS} component={PhotosScreen} />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.MORE_PHOTOS} component={MorePhotosScreen} />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_PHOTO} component={AddPhotoScreen} />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS} component={TripsScreen} />
                 </ScreenStack.Navigator>
               )}
             </BottomTab.Screen>

assets/icons/travels-screens/chevron-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.49805 7.50098L10.4985 12.5014L15.4989 7.50098" stroke="#C8C8C8" stroke-width="1.66678" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/travels-screens/circle-plus.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1967_17639)">
+<path d="M8.25 16.001C10.3717 16.001 12.4066 15.1581 13.9069 13.6578C15.4071 12.1575 16.25 10.1227 16.25 8.00098C16.25 5.87924 15.4071 3.84441 13.9069 2.34412C12.4066 0.843831 10.3717 0.000976563 8.25 0.000976562C6.12827 0.000976563 4.09344 0.843831 2.59315 2.34412C1.09285 3.84441 0.25 5.87924 0.25 8.00098C0.25 10.1227 1.09285 12.1575 2.59315 13.6578C4.09344 15.1581 6.12827 16.001 8.25 16.001ZM7.5 10.751V8.75098H5.5C5.08437 8.75098 4.75 8.4166 4.75 8.00098C4.75 7.58535 5.08437 7.25098 5.5 7.25098H7.5V5.25098C7.5 4.83535 7.83437 4.50098 8.25 4.50098C8.66562 4.50098 9 4.83535 9 5.25098V7.25098H11C11.4156 7.25098 11.75 7.58535 11.75 8.00098C11.75 8.4166 11.4156 8.75098 11 8.75098H9V10.751C9 11.1666 8.66562 11.501 8.25 11.501C7.83437 11.501 7.5 11.1666 7.5 10.751Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1967_17639">
+<rect width="16" height="16" fill="white" transform="translate(0.25 0.000976562)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/travels-screens/trip.svg

@@ -0,0 +1,5 @@
+<svg width="129" height="129" viewBox="0 0 129 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.6707 54.1246C29.1815 47.2282 41.7497 30.5135 41.7497 21.1249C41.7497 9.73822 32.5115 0.5 21.1249 0.5C9.73822 0.5 0.5 9.73822 0.5 21.1249C0.5 30.5135 13.0683 47.2282 18.579 54.1246C19.9003 55.7682 22.3495 55.7682 23.6707 54.1246ZM21.1249 14.2499C22.028 14.2495 22.9223 14.427 23.7568 14.7722C24.5914 15.1175 25.3496 15.6239 25.9884 16.2623C26.6272 16.9008 27.1339 17.6588 27.4796 18.4931C27.8253 19.3275 28.0033 20.2217 28.0033 21.1249C28.0033 22.028 27.8253 22.9223 27.4796 23.7566C27.1339 24.5909 26.6272 25.349 25.9884 25.9874C25.3496 26.6258 24.5914 27.1322 23.7568 27.4775C22.9223 27.8228 22.028 28.0003 21.1249 27.9998C20.2217 28.0003 19.3274 27.8228 18.4929 27.4775C17.6584 27.1322 16.9001 26.6258 16.2613 25.9874C15.6226 25.349 15.1158 24.5909 14.7701 23.7566C14.4244 22.9223 14.2465 22.028 14.2465 21.1249C14.2465 20.2217 14.4244 19.3275 14.7701 18.4931C15.1158 17.6588 15.6226 16.9008 16.2613 16.2623C16.9001 15.6239 17.6584 15.1175 18.4929 14.7722C19.3274 14.427 20.2217 14.2495 21.1249 14.2499Z"/>
+<path d="M24.4278 128.187C13.6643 126.381 4.76975 118.39 1.4784 107.57C0.738501 105.138 0.659679 104.421 0.637477 99.9223C0.616417 95.6403 0.707153 94.6138 1.29868 92.4503C3.82765 83.2006 10.8336 75.5715 19.5906 72.5314C24.2527 70.9129 23.4075 70.9601 51.1551 70.7685L77.0278 70.5898L78.32 69.8999C80.3116 68.8365 81.8917 67.2435 82.8101 65.3733C83.938 63.0765 83.9886 59.6558 82.9296 57.2883C82.0975 55.4282 79.8473 53.2171 77.8453 52.2922C76.4361 51.6412 76.2784 51.6359 55.437 51.5516L34.448 51.4666L36.0717 49.4457C37.9505 47.1073 41.1108 42.3535 42.1653 40.2796L42.8919 38.8506H59.987C76.1394 38.8506 77.2132 38.884 79.4617 39.4571C85.9809 41.1185 90.9628 45.0459 94.0387 50.9486C95.7663 54.2637 96.4932 57.2619 96.5031 61.1132C96.5134 65.118 95.9177 67.664 94.1094 71.3419C92.9261 73.7487 92.2741 74.6294 89.9804 76.9196C87.0381 79.8575 84.4318 81.4503 80.3371 82.8133L78.2312 83.5143L52.0576 83.6707C25.9976 83.8264 25.8764 83.8299 24.1293 84.4899C19.1357 86.3763 15.7761 89.7577 14.0579 94.6268C13.0889 97.3728 12.9851 101.607 13.825 104.134C14.7299 106.857 16.0671 109.104 17.8543 110.905C19.7664 112.833 21.3202 113.822 24.1934 114.941L26.1849 115.717L54.5409 115.802L82.897 115.888L83.9856 118.049C85.3366 120.732 87.0447 123.482 89.1237 126.322L90.7206 128.503L58.3023 128.467C40.4722 128.448 25.2287 128.322 24.4278 128.187Z"/>
+<path d="M110.421 127.269C115.931 120.373 128.5 103.658 128.5 94.2694C128.5 82.8828 119.262 73.6445 107.875 73.6445C96.4882 73.6445 87.25 82.8828 87.25 94.2694C87.25 103.658 99.8183 120.373 105.329 127.269C106.65 128.913 109.099 128.913 110.421 127.269ZM107.875 87.3944C108.778 87.3942 109.672 87.5718 110.506 87.9172C111.341 88.2626 112.099 88.7689 112.737 89.4074C113.376 90.0458 113.883 90.8038 114.228 91.638C114.574 92.4722 114.752 93.3664 114.752 94.2694C114.752 95.1724 114.574 96.0665 114.228 96.9008C113.883 97.735 113.376 98.493 112.737 99.1314C112.099 99.7698 111.341 100.276 110.506 100.622C109.672 100.967 108.778 101.145 107.875 101.144C106.972 101.145 106.078 100.967 105.243 100.622C104.409 100.276 103.651 99.7698 103.012 99.1314C102.374 98.493 101.867 97.735 101.521 96.9008C101.176 96.0665 100.998 95.1724 100.998 94.2694C100.998 93.3664 101.176 92.4722 101.521 91.638C101.867 90.8038 102.374 90.0458 103.012 89.4074C103.651 88.7689 104.409 88.2626 105.243 87.9172C106.078 87.5718 106.972 87.3942 107.875 87.3944Z"/>
+</svg>

src/screens/InAppScreens/TravelsScreen/AddPhotoScreen/index.tsx

@@ -20,7 +20,7 @@ import AddImgSvg from '../../../../../assets/icons/travels-screens/add-img.svg';
 import ChooseSvg from '../../../../../assets/icons/travels-screens/choose.svg';
 import SaveSvg from '../../../../../assets/icons/travels-screens/save.svg';
 import XCircleSvg from '../../../../../assets/icons/travels-screens/x-circle.svg';
-import ChevronIcon from '../../../../../assets/icons/chevron-left.svg';
+import ChevronIcon from '../../../../../assets/icons/travels-screens/chevron-bottom.svg';
 import CalendarSvg from '../../../../../assets/icons/calendar.svg';
 
 const AddPhotoScreen = ({ route }: { route: any }) => {
@@ -212,12 +212,14 @@ const AddPhotoScreen = ({ route }: { route: any }) => {
             style={[styles.image, { width: itemWidth, height: itemWidth }]}
           />
         )}
-        <TouchableOpacity
-          style={[styles.deleteTemp, !item.loaded && { top: -18, right: -10 }]}
-          onPress={() => deleteTemp(item)}
-        >
-          <XCircleSvg />
-        </TouchableOpacity>
+        {item.loaded && (
+          <TouchableOpacity
+            style={styles.deleteTemp}
+            onPress={() => deleteTemp(item)}
+          >
+            <XCircleSvg />
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );
@@ -267,7 +269,7 @@ const AddPhotoScreen = ({ route }: { route: any }) => {
             onPress={() => setIsModalVisible(true)}
           >
             <Text style={styles.regionText}>{selectedRegion?.country ?? 'Choose a region'}</Text>
-            <ChevronIcon fill={'#C8C8C8'} style={{ transform: [{ rotate: '-90deg' }] }} />
+            <ChevronIcon />
           </TouchableOpacity>
         )}
 

src/screens/InAppScreens/TravelsScreen/Components/PhotoEditModal.tsx

@@ -17,7 +17,7 @@ import { AllRegions, PhotosData } from '../utils/types';
 import { getImageUri } from '../utils';
 import { styles } from './styles';
 
-import ChevronIcon from '../../../../../assets/icons/chevron-left.svg';
+import ChevronIcon from '../../../../../assets/icons/travels-screens/chevron-bottom.svg';
 import CalendarSvg from '../../../../../assets/icons/calendar.svg';
 
 export const PhotoEditModal = ({
@@ -101,7 +101,7 @@ export const PhotoEditModal = ({
                 {selectedRegion?.country ??
                   allRegions.find((region: AllRegions) => region.id === photo?.region)?.country}
               </Text>
-              <ChevronIcon fill={'#C8C8C8'} style={{ transform: [{ rotate: '-90deg' }] }} />
+              <ChevronIcon />
             </TouchableOpacity>
 
             <TouchableOpacity

src/screens/InAppScreens/TravelsScreen/PhotosScreen/index.tsx

@@ -9,13 +9,13 @@ import { useGetPhotosForUserQuery, useGetTempQuery } from '@api/photos';
 import { StoreType, storage } from 'src/storage';
 
 import { AllRegions, ByDateData, ByRegionData, PhotosData } from '../utils/types';
-import { groupByDate } from '../utils';
+import { compareDates, groupByDate } from '../utils';
 import { NAVIGATION_PAGES } from 'src/types';
 import { Colors } from 'src/theme';
 import { styles } from './styles';
 
 import AddImgSvg from '../../../../../assets/icons/travels-screens/add-img.svg';
-import ChevronIcon from '../../../../../assets/icons/chevron-left.svg';
+import ChevronIcon from '../../../../../assets/icons/travels-screens/chevron-bottom.svg';
 
 const ByRegionContent = ({
   data,
@@ -54,7 +54,7 @@ const ByRegionContent = ({
     <View style={{ flex: 1 }}>
       <TouchableOpacity style={styles.regionSelector} onPress={() => setVisible(true)}>
         <Text style={styles.regionText}>{selectedRegion?.country ?? 'All Regions'}</Text>
-        <ChevronIcon fill={'#C8C8C8'} style={{ transform: [{ rotate: '-90deg' }] }} />
+        <ChevronIcon />
       </TouchableOpacity>
       <Modal
         onRequestClose={() => setVisible(false)}
@@ -99,11 +99,12 @@ const ByDateContent = ({ data, allRegions }: { data: ByDateData; allRegions: All
       const keys: string[] = Object.keys(data);
 
       if (keys.length > 0) {
-        const firstKey = keys[0];
+        let sortedKeys = keys?.sort(compareDates);
+        const firstKey = sortedKeys[0];
 
         const groupedByDate = groupByDate(data[firstKey]);
         setPhotos(groupedByDate);
-        setFilter(keys);
+        setFilter(sortedKeys);
       }
       setLoading(false);
     }, [data])
@@ -115,7 +116,7 @@ const ByDateContent = ({ data, allRegions }: { data: ByDateData; allRegions: All
     <View style={{ flex: 1 }}>
       <TouchableOpacity style={styles.regionSelector} onPress={() => setVisible(true)}>
         <Text style={styles.regionText}>{selectedDate ?? filter[0]}</Text>
-        <ChevronIcon fill={'#C8C8C8'} style={{ transform: [{ rotate: '-90deg' }] }} />
+        <ChevronIcon />
       </TouchableOpacity>
       <Modal onRequestClose={() => setVisible(false)} headerTitle={'Select Date'} visible={visible}>
         <List

src/screens/InAppScreens/TravelsScreen/TripsScreen/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { PageWrapper, Header, Modal, FlatList as List } from 'src/components';
+import { styles } from './styles';
+
+import ChevronIcon from '../../../../../assets/icons/travels-screens/chevron-bottom.svg';
+import AddIcon from '../../../../../assets/icons/travels-screens/circle-plus.svg';
+import TripSvg from '../../../../../assets/icons/travels-screens/trip.svg';
+
+const TripsScreen = () => {
+  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
+  return (
+    <PageWrapper>
+      <Header label="Trips" />
+      <View style={styles.tabContainer}>
+        <TouchableOpacity style={styles.regionSelector} onPress={() => setDatePickerVisible(true)}>
+          <Text style={styles.regionText}>{'2024'}</Text>
+          <ChevronIcon />
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.addNewTab}>
+          <AddIcon />
+          <Text style={styles.addNewTabText}>Add New Trip</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 10 }}>
+        <View style={styles.noTripsIcon}>
+          <TripSvg fill={'rgb(242, 242, 242)'} />
+        </View>
+        <Text style={styles.noTripsText}>No trips at the moment</Text>
+      </View>
+
+      <Modal
+        onRequestClose={() => setDatePickerVisible(false)}
+        headerTitle={'Select Date'}
+        visible={isDatePickerVisible}
+      >
+        <List
+          itemObject={(object) => {
+            setDatePickerVisible(false);
+          }}
+          initialData={['2024']}
+          date={true}
+        />
+      </Modal>
+    </PageWrapper>
+  );
+};
+
+export default TripsScreen;

src/screens/InAppScreens/TravelsScreen/TripsScreen/styles.tsx

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const styles = StyleSheet.create({
+  tabContainer: { flexDirection: 'row', gap: 10, alignItems: 'center' },
+  regionSelector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'rgba(250, 250, 250, 1)',
+    borderRadius: 4,
+    height: 34,
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  regionText: {
+    fontSize: 14,
+    color: Colors.LIGHT_GRAY,
+    fontWeight: '500'
+  },
+  addNewTab: {
+    flex: 1,
+    backgroundColor: Colors.ORANGE,
+    height: 36,
+    borderRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    gap: 4
+  },
+  addNewTabText: { fontSize: 14, color: Colors.WHITE, fontWeight: 'bold' },
+  noTripsIcon: {
+    height: 256,
+    width: 256,
+    borderRadius: 128,
+    backgroundColor: '#FAFAFA',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  noTripsText: { color: Colors.DARK_BLUE, fontSize: 11, fontWeight: '600' }
+});

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -56,7 +56,14 @@ const TravelsScreen = () => {
     },
     {
       label: 'Trips',
-      icon: <TripIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+      icon: <TripIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
+      buttonFn: (navigation) => {
+        if (!token) {
+          setIsModalVisible(true);
+        } else {
+          navigation.navigate(NAVIGATION_PAGES.TRIPS);
+        }
+      }
     },
     {
       label: 'Photos',

src/screens/InAppScreens/TravelsScreen/utils/groupPhotosByDate.tsx

@@ -17,3 +17,21 @@ export function groupByDate(items: PhotosData[]) {
     }))
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 }
+
+const normalizeDate = (dateStr: string) => {
+  const parts = dateStr.split('-');
+  const normalizedDate = `${parts[0]}-${parts[1] || '12'}-${parts[2] || '01'}`;
+  return normalizedDate;
+};
+
+export const compareDates = (date1: string, date2: string) => {
+  const normalizedDate1 = normalizeDate(date1);
+  const normalizedDate2 = normalizeDate(date2);
+  if (normalizedDate1 > normalizedDate2) {
+    return -1;
+  }
+  if (normalizedDate1 < normalizedDate2) {
+    return 1;
+  }
+  return 0;
+};

src/types/navigation.ts

@@ -28,4 +28,5 @@ export enum NAVIGATION_PAGES {
   PHOTOS = 'inAppPhotos',
   MORE_PHOTOS = 'inAppMorePhotos',
   ADD_PHOTO = 'inAppAddPhoto',
+  TRIPS = 'inAppTrips',
 }