Merge pull request #5 from akshay9/feature/favourites

Added Sub-Categories for photos

android/app/build.gradle

@@ -135,8 +135,8 @@ android {
         applicationId "com.librephotosmobile"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
+        versionCode 2
+        versionName "1.0.1"
     }
     splits {
         abi {

app.json

@@ -1,5 +1,5 @@
 {
   "name": "LibrePhotosMobile",
   "displayName": "LibrePhotosMobile",
-  "version": "1.0.0"
+  "version": "1.0.1"
 }

package.json

@@ -1,14 +1,15 @@
 {
   "name": "librephotosmobile",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint .",
-    "type-check": "tsc --build plugins/typescript/template/tsconfig.json"
+    "type-check": "tsc --build plugins/typescript/template/tsconfig.json",
+    "postversion": "react-native-version"
   },
   "dependencies": {
     "@dudigital/react-native-zoomable-view": "^1.1.3",
@@ -59,6 +60,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.64.0",
+    "react-native-version": "^4.0.0",
     "react-test-renderer": "17.0.1"
   },
   "jest": {

src/Components/ImageGrid.js

@@ -57,7 +57,6 @@ const ImageGrid = ({
       </Pressable>
     )
   }
-
   return (
     <>
       {data && data.length > 0 && (
@@ -70,9 +69,12 @@ const ImageGrid = ({
           renderItem={renderPhoto}
         />
       )}
-      {(typeof data === 'undefined' || data.length < 1) && displayError && (
-        <NoResultsError refreshing={refreshing} onRefresh={onRefresh} />
-      )}
+      {(typeof data !== 'object' ||
+        typeof data.length === 'undefined' ||
+        data.length < 1) &&
+        displayError && (
+          <NoResultsError refreshing={refreshing} onRefresh={onRefresh} />
+        )}
 
       <Modal
         animationType="fade"

src/Components/NoResultsError.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { RefreshControl } from 'react-native'
-import { Icon, ScrollView, Text, View } from 'native-base'
+import { Icon, ScrollView, Text } from 'native-base'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { useTheme } from '@/Theme'
 

src/Components/PreviewTile.js

@@ -111,6 +111,7 @@ const PreviewTile = ({
       <FlatList
         // refreshing={false}
         // onRefresh={() => {}}
+        showsHorizontalScrollIndicator={false}
         data={albums}
         renderItem={renderItem}
         horizontal={true}

src/Containers/Gallery/Index.js

@@ -1,13 +1,26 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { View } from 'react-native'
-import { Button, HStack } from 'native-base'
+import { Button, HStack, ScrollView } from 'native-base'
 import { useTheme } from '@/Theme'
 import FetchAlbumByDate from '@/Store/Album/FetchByDate'
 import FetchPhotosWithoutDate from '@/Store/Album/FetchPhotosWithoutDate'
-import TimelineList from '../../Components/TimelineList'
-import { TopBar } from '../../Components'
-import ImageGrid from '../../Components/ImageGrid'
+import FetchRecentlyAdded from '@/Store/Album/FetchRecentlyAdded'
+import FetchFavourites from '@/Store/Album/FetchFavourites'
+import FetchHidden from '@/Store/Album/FetchHidden'
+import FetchPublic from '@/Store/Album/FetchPublic'
+import TimelineList from '@/Components/TimelineList'
+import { TopBar } from '@/Components'
+import ImageGrid from '@/Components/ImageGrid'
+
+const CategoryType = {
+  PhotosByDate: 'With Timestamp',
+  PhotosWithoutDate: 'Without Timestamp',
+  Recent: 'Recently Added',
+  Favourite: 'Favourites',
+  Public: 'Public Photos',
+  Hidden: 'Hidden',
+}
 
 const GalleryContainer = () => {
   const { Common, Layout } = useTheme()
@@ -16,108 +29,136 @@ const GalleryContainer = () => {
   const albums = useSelector(state => state.album)
   const albumByDate = useSelector(state => state.album.albumByDate)
   const albumWithoutDate = useSelector(state => state.album.albumWithoutDate)
-  const photosByDate = albumByDate?.results
+  const albumRecentlyAdded = useSelector(
+    state => state.album.albumRecentlyAdded,
+  )
+  const albumFavourites = useSelector(state => state.album.albumFavourites)
+  const albumPublic = useSelector(state => state.album.albumPublic)
+  const albumHidden = useSelector(state => state.album.albumHidden)
+  const photosByDate = albumByDate
   const photosWithoutDate = albumWithoutDate?.results
 
-  useEffect(() => {
-    handleAlbumWithoutDateRefresh()
-    handleAlbumWithDateRefresh()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const handleAlbumWithoutDateRefresh = () => {
-    dispatch(FetchPhotosWithoutDate.action())
-  }
-
-  const handleAlbumWithDateRefresh = () => {
-    dispatch(FetchAlbumByDate.action())
-  }
-
-  const imageGridMapper = sectionData => {
-    if (typeof sectionData === 'undefined' || sectionData.length < 1) {
-      return []
-    }
-
-    let finalmap = sectionData.map(item => {
-      return {
-        url: item.url,
-      }
-    })
-
-    return finalmap
-  }
+  const [category, setCategory] = useState(CategoryType.PhotosByDate)
 
-  const photoMapper = photosResult => {
-    if (typeof photosResult === 'undefined' || photosResult.length < 1) {
-      return []
+  useEffect(() => {
+    console.log('Fetching Category: ' + category)
+    switch (category) {
+      case CategoryType.PhotosByDate:
+        dispatch(FetchPhotosWithoutDate.action())
+        break
+      case CategoryType.PhotosWithoutDate:
+        dispatch(FetchAlbumByDate.action())
+        break
+      case CategoryType.Recent:
+        dispatch(FetchRecentlyAdded.action())
+        break
+      case CategoryType.Favourite:
+        dispatch(FetchFavourites.action())
+        break
+      case CategoryType.Public:
+        dispatch(FetchPublic.action())
+        break
+      case CategoryType.Hidden:
+        dispatch(FetchHidden.action())
+        break
     }
+  }, [dispatch, category])
 
-    let finalmap = photosResult.map(item => {
-      return {
-        id: item.date,
-        title: item.date,
-        data: imageGridMapper(item.items),
-      }
-    })
+  useEffect(() => {
+    dispatch(FetchAlbumByDate.action())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-    return finalmap
+  const renderButton = (index, buttonCategory) => {
+    return (
+      <Button
+        key={index}
+        size="xs"
+        variant={category === buttonCategory ? 'solid' : 'outline'}
+        colorScheme="dark"
+        onPress={() => setCategory(buttonCategory)}
+      >
+        {buttonCategory}
+      </Button>
+    )
   }
 
-  const [showPhotosByDate, setPhotosByDate] = useState(true)
-
-  return (
-    <>
-      <TopBar />
-      <View style={[Common.backgroundDefault, Layout.colCenter]}>
-        <HStack
-          space={{
-            base: 3,
-            md: 4,
-          }}
-          mx={{
-            base: 5,
-            md: 0,
-          }}
-          my={{
-            base: 2,
-            md: 0,
-          }}
-          style={[Common.backgroundDefault]}
-        >
-          <Button
-            size="xs"
-            variant={showPhotosByDate ? 'solid' : 'outline'}
-            colorScheme="dark"
-            onPress={() => setPhotosByDate(true)}
-          >
-            With Timestamp
-          </Button>
-          <Button
-            size="xs"
-            variant={!showPhotosByDate ? 'solid' : 'outline'}
-            colorScheme="dark"
-            onPress={() => setPhotosByDate(false)}
-          >
-            Without Timestamp
-          </Button>
-        </HStack>
-      </View>
-      <View style={[Layout.fill, Layout.colCenter, Common.backgroundDefault]}>
-        {showPhotosByDate ? (
+  const renderContent = () => {
+    switch (category) {
+      case CategoryType.PhotosByDate:
+        return (
           <TimelineList
-            data={photoMapper(photosByDate)}
-            onRefresh={handleAlbumWithDateRefresh}
+            data={photosByDate}
+            onRefresh={() => dispatch(FetchAlbumByDate.action())}
             refreshing={albums.loading}
           />
-        ) : (
+        )
+      case CategoryType.PhotosWithoutDate:
+        return (
           <ImageGrid
             data={photosWithoutDate}
             numColumns={3}
             displayError={true}
-            onRefresh={handleAlbumWithoutDateRefresh}
+            onRefresh={() => dispatch(FetchPhotosWithoutDate.action())}
+            refreshing={albums.loading}
+          />
+        )
+      case CategoryType.Recent:
+        return (
+          <ImageGrid
+            data={albumRecentlyAdded?.results}
+            numColumns={3}
+            displayError={true}
+            onRefresh={() => dispatch(FetchAlbumByDate.action())}
+            refreshing={albums.loading}
+          />
+        )
+      case CategoryType.Favourite:
+        return (
+          <TimelineList
+            data={albumFavourites}
+            onRefresh={() => dispatch(FetchFavourites.action())}
+            refreshing={albums.loading}
+          />
+        )
+      case CategoryType.Public:
+        return (
+          <TimelineList
+            data={albumPublic}
+            onRefresh={() => dispatch(FetchPublic.action())}
+            refreshing={albums.loading}
+          />
+        )
+      case CategoryType.Hidden:
+        return (
+          <TimelineList
+            data={albumHidden}
+            onRefresh={() => dispatch(FetchHidden.action())}
             refreshing={albums.loading}
           />
-        )}
+        )
+    }
+  }
+
+  return (
+    <>
+      <TopBar />
+      <View style={[Common.backgroundDefault, Layout.colCenter]}>
+        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+          <HStack
+            space={{ base: 3, md: 4 }}
+            mx={{ base: 5, md: 0 }}
+            my={{ base: 2, md: 0 }}
+            style={[Common.backgroundDefault]}
+          >
+            {Object.values(CategoryType).map((buttonCategory, index) =>
+              renderButton(index, buttonCategory),
+            )}
+          </HStack>
+        </ScrollView>
+      </View>
+      <View style={[Layout.fill, Common.backgroundDefault]}>
+        {renderContent()}
       </View>
     </>
   )

src/Containers/Settings/Index.js

@@ -10,7 +10,7 @@ import { SettingSubHeader } from './SettingSubHeader'
 import { OptionMultiSelect } from './OptionMultiSelect'
 import { OptionButton } from './OptionButton'
 import LogoutUser from '@/Store/Auth/LogoutUser'
-import { version } from '../../../app.json'
+import { version } from '../../../package.json'
 import UpdateToken from '../../Services/Auth/UpdateToken'
 import ConfigureLogging from '../../Store/Config/ConfigureLogging'
 import { OptionToggle } from './OptionToggle'

src/Store/Album/FetchByDate.js

@@ -4,6 +4,7 @@ import {
   buildAsyncReducers,
 } from '@thecodingmachine/redux-toolkit-wrapper'
 import api from '@/Services'
+import { photoMapper } from '../../Services/DataMapper/PhotosByDate'
 
 export default {
   initialState: buildAsyncState(),
@@ -13,7 +14,7 @@ export default {
         timeout: 10000,
       })
       .then(response => {
-        return response.data
+        return photoMapper(response.data?.results)
       })
   }),
   reducers: buildAsyncReducers({ itemKey: 'albumByDate' }), // We do not want to modify some item by default

src/Store/Album/FetchFavourites.js

@@ -0,0 +1,21 @@
+import {
+  buildAsyncState,
+  buildAsyncActions,
+  buildAsyncReducers,
+} from '@thecodingmachine/redux-toolkit-wrapper'
+import api from '@/Services'
+import { photoMapper } from '../../Services/DataMapper/PhotosByDate'
+
+export default {
+  initialState: buildAsyncState(),
+  action: buildAsyncActions('album/fetchFavourites', async (args, k) => {
+    return await api
+      .get('/photos/favorites/', {
+        timeout: 10000,
+      })
+      .then(response => {
+        return photoMapper(response.data?.results)
+      })
+  }),
+  reducers: buildAsyncReducers({ itemKey: 'albumFavourites' }), // We do not want to modify some item by default
+}