Explore palette (#233)

* Network layer added for explore palette * Card modifications * explore palette ui added * explore palette added
croma-app · May 7, 2024 · 2456f28 · 2456f28
1 parent 10b64b2
commit 2456f28
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 11 deletions.
diff --git a/components/PalettePreviewCard.js b/components/PalettePreviewCard.js
@@ -11,7 +11,9 @@ export class PalettePreviewCard extends React.Component {
         <View>
           <MultiColorView {...this.props}></MultiColorView>
           <View style={styles.bottom}>
-            <Text style={styles.label}>{this.props.name}</Text>
+            <Text style={styles.label}>
+              {this.props.name.substring(0, 55) + (this.props.name.length > 55 ? '...' : '')}
+            </Text>
           </View>
         </View>
       </Card>
@@ -23,12 +25,13 @@ const styles = StyleSheet.create({
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',
-    height: 48
+    minHeight: 35
   },
   label: {
     flex: 1,
     fontWeight: '500',
-    marginHorizontal: 16,
+    fontSize: 12,
+    marginHorizontal: 8,
     color: Colors.darkGrey
   }
 });
diff --git a/network/index.js b/network/index.js
@@ -5,7 +5,8 @@ import {
   deletePalette,
   patchPalette,
   addNewColorToPalette,
-  deleteColorFromPalette
+  deleteColorFromPalette,
+  getExplorePalettes
 } from './palettes';
 const network = {
   login: login,
@@ -15,6 +16,7 @@ const network = {
   deletePalette: deletePalette,
   patchPalette: patchPalette,
   addNewColorToPalette: addNewColorToPalette,
-  deleteColorFromPalette: deleteColorFromPalette
+  deleteColorFromPalette: deleteColorFromPalette,
+  getExplorePalettes: getExplorePalettes
 };
 export default network;
diff --git a/network/palettes.js b/network/palettes.js
@@ -44,3 +44,8 @@ export const deleteColorFromPalette = async (paletteId, colorId) => {
   const axiosClient = await getAxiosClient();
   return axiosClient.delete(`color_palettes/${paletteId}/colors/${colorId}.json`);
 };
+
+export const getExplorePalettes = async (page = 1, query = '') => {
+  const axiosClient = await getAxiosClient();
+  return axiosClient.get(`color_palettes/explore.json?page=${page}&query=${query}`);
+};
diff --git a/screens/PaletteLibraryScreen.js b/screens/PaletteLibraryScreen.js
@@ -1,18 +1,84 @@
-import React from 'react';
-import { ScrollView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  ActivityIndicator
+} from 'react-native';
 import { logEvent } from '../libs/Helpers';
 import { material } from 'react-native-typography';
 import Colors from '../constants/Colors';
+import network from '../network';
 import useApplicationStore from '../hooks/useApplicationStore';
+import { PalettePreviewCard } from '../components/PalettePreviewCard';
+import { TextInput } from 'react-native-gesture-handler';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 const allPalettes = require('../constants/palettes/palettes').default;
 
 export default function PaletteLibraryScreen({ navigation }) {
-  logEvent('palette_library_screen');
-
+  const [explorePalettes, setExplorePalettes] = useState();
+  const [query, setQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
   const { setCommonPalettes } = useApplicationStore();
+  useEffect(() => {
+    logEvent('palette_library_screen');
+  }, []);
+
+  const getExplorePalettes = useCallback(async (query) => {
+    setIsLoading(true);
+    const res = await network.getExplorePalettes(1, query);
+    const palettes = res.data.search_results.map((p) => {
+      return {
+        name: p.user_query,
+        colors: p.colors.map((color) => ({
+          id: color.id,
+          name: color.name,
+          color: color.hex
+        }))
+      };
+    });
+    setExplorePalettes(palettes);
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    getExplorePalettes();
+  }, [getExplorePalettes]);
 
   return (
     <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.searchContainer}>
+        <TextInput
+          style={styles.searchText}
+          placeholder="Search keyword"
+          value={query}
+          onChangeText={setQuery}
+          onBlur={() => {
+            getExplorePalettes(query);
+          }}
+        />
+        <Ionicons name="search" size={20} color={Colors.grey} style={styles.searchIcon} />
+      </View>
+
+      {isLoading ? (
+        <ActivityIndicator style={styles.loader} size={'large'} color={Colors.primary} />
+      ) : (
+        explorePalettes?.map((palette, index) => (
+          <PalettePreviewCard
+            key={index}
+            onPress={() => {
+              navigation.navigate('ColorList', {
+                colors: palette.colors,
+                suggestedName: name + ' - ' + palette.name
+              });
+            }}
+            colors={palette.colors}
+            name={palette.name}
+          />
+        ))
+      )}
       {allPalettes.map((palettes, index) => {
         return (
           <TouchableOpacity
@@ -48,12 +114,26 @@ const styles = StyleSheet.create({
     marginVertical: 8,
     elevation: 1,
     padding: 8,
-    borderRadius: 8
+    borderRadius: 8,
+    marginBottom: 10
   },
   title: {
     ...material.title
   },
   desc: {
     ...material.body1
-  }
+  },
+  searchContainer: { flexDirection: 'row', alignItems: 'center', marginTop: 10 },
+  searchText: {
+    flex: 1,
+    borderColor: Colors.grey,
+    borderWidth: 1,
+    borderRadius: 10,
+    height: 40,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    fontSize: 14
+  },
+  searchIcon: { marginLeft: 10 },
+  loader: { margin: 20 }
 });