DEV Community: Majuran SIVAKUMAR

SneakerShop Tutorial : Filter Screen 🔍

Majuran SIVAKUMAR — Fri, 07 Jul 2023 17:00:00 +0000

Filter products 🔍

We're finally at the point where we can start integrating some really cool features. We'll be adding a filter feature that will make it easier for users to find exactly what they're looking for.

We will create multiple filters, and whenever the user changes one of their values it will update our store

We have

Sort Filter
BrandFilter
Color Filter
Price Filter

For the Price Filter I wanted a slider to be user friendly. I used @react-native-community/slider

Let’s create the filter screen first :

import { View, Text, TouchableOpacity, ScrollView, SafeAreaView } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import { ChevronLeftIcon, TrashIcon } from "react-native-heroicons/outline";
import SortBy from "../components/Filter/SortBy";
import ColorFilter from "../components/Filter/ColorFilter";
import BrandFilter from "../components/Filter/BrandFilter";
import PriceFilter from "../components/Filter/PriceFilter";
import { useDispatch } from "react-redux";
import { resetFilters } from "../store/features/products/productsSlice";

const FilterScreen = () => {
  const navigation = useNavigation();
  const dispatch = useDispatch();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: "Filter",
      headerLeft: () => (
        <TouchableOpacity onPress={() => navigation.goBack()} className="p-2">
          <ChevronLeftIcon color="black" size="30" />
        </TouchableOpacity>
      ),
    });
  }, []);

  const clearFilters = () => {
// Dispatch clear filter action to the store
    dispatch(resetFilters());
  };

  return (
    <SafeAreaView className="bg-slate-100">
      <TouchableOpacity
        className="w-full p-2 pt-4"
        onPress={() => clearFilters()}
      >
        <Text className="text-xs text-right font-semibold">
          Clear all filters
          <TrashIcon
            color="black"
            size="18"
            style={{ marginLeft: 8 }}
          ></TrashIcon>
        </Text>
      </TouchableOpacity>
      <View className="h-full">
        <ScrollView>
          <SortBy />
          <ColorFilter />
          <BrandFilter />
          <PriceFilter />
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

export default FilterScreen;

Store Update

We are going to store ou filters state in product store. And apply the filter on the getProducts selector. With that way we are keeping logic in store.

Let’s update our store with :

// /store/features/products/productsSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
  filters: {},
  sort: null,
};

export const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {
    setProducts: (state, action) => {
      state.items = [...action.payload];
    },
    setFilters: (state, action) => {
      /*
       ex: 
       {
        "color": {
          fn: (e) => e.some(c => ['black', 'yellow'].includes(c))
          "black": {
            id: "black",
            ...
          },
          "yellow": {
            id: "yellow",
            ...
          },
        }
       }
       with that structure its easy to find or delete a filter
      */
      state.filters = { ...state.filters, ...action.payload };
    },
    deleteFilterById: (state, action) => {
      const filters = { ...state.filters };
      const idToDelete = action.payload;

      if (filters[idToDelete]) {
        delete filters[idToDelete];
      }

      state.filters = { ...filters };
    },
    setSort: (state, action) => {
      state.sort = action.payload;
    },
    resetFilters: (state, action) => {
      state.filters = {};
      state.sort = null;
    },
  },
});

// Action creators are generated for each case reducer function
export const {
  setProducts,
  setFilters,
  setSort,
  deleteFilterById,
  resetFilters,
} = productsSlice.actions;

// Selectors
export const selectProducts = ({ products }) => {
  const { items, filters, sort } = products;
  let productList = [...items];
  const filtersIds = Object.keys(filters);

  // 👉 CHECK IF THERE IS FILTERS
  if (filtersIds.length > 0) {
    filtersIds.forEach((filterId) => {
      if (filters[filterId]?.fn) {
        // APPLY FILTERS
        productList = productList.filter(filters[filterId]?.fn);
      }
    });
  }

  if (sort?.fn) {
    // 👉  SORT PRODUCTS
    productList.sort(sort.fn);
  }

  return productList || [];
};

export const selectSortBy = ({ products }) => products.sort;
export const selectFilters = (id) => (state) => {
  // return filters without fn
  const { fn, ...filter } = state.products.filters[id] || {};
  return filter;
};
export const selectNbOfFilters = (state) =>
  Object.keys(state.products.filters).length + (state.products.sort ? 1 : 0);

export default productsSlice.reducer;

Filter Component

import { View, Text, TouchableOpacity } from "react-native";
import React, { useState } from "react";
import { useEffect } from "react";
import Slider from "@react-native-community/slider";

const Filter = ({ filter, defaultValue, onValueChange = () => {} }) => {
  const { id, name, type, options } = filter;
  const [selectedOptions, setSelectedOptions] = useState({});

  useEffect(() => {
    defaultValue && setSelectedOptions(defaultValue);
  }, [defaultValue]);

  const handleFilterChange = (option) => {
    let currentOptions = { ...selectedOptions };

    if (currentOptions[option?.id]) {
      delete currentOptions[option?.id];
    } else {
      if (type === "radio") {
        // reset all options
        currentOptions = {};
      }
      //set new option
      currentOptions[option?.id] = option;
    }

    setSelectedOptions(currentOptions);
    onValueChange(currentOptions);
  };

  return (
    <View className="p-2 pb-5 bg-white mt-2 mx-2 rounded" key={id}>
      <Text className="text-md font-bold">{name}</Text>
      <View className="flex-row flex-wrap w-full justify-center mt-2">
        {options &&
          options?.map((option) => (
            <TouchableOpacity
              className={`py-3 px-2 border border-slate-500 w-auto m-1 ${
                selectedOptions[option?.id] && "bg-black"
              }`}
              key={option.id}
              onPress={() => handleFilterChange(option)}
            >
              <Text
                className={`text-center ${
                  selectedOptions[option?.id] && "text-white font-semibold"
                }`}
              >
                {option.name}
              </Text>
            </TouchableOpacity>
          ))}

        {type === "slider" && (
          <View className="w-full text-center">
            <Text className="text-center text-md font-bold">
              {defaultValue} €
            </Text>
            <Slider
              style={{ width: "100%", height: 80 }}
              minimumValue={0}
              value={defaultValue}
              step={10}
              maximumValue={200}
              minimumTrackTintColor="#000000"
              maximumTrackTintColor="#e3e3e3"
              onValueChange={onValueChange}
            />
          </View>
        )}
      </View>
    </View>
  );
};

export default Filter;

Sort Filter

import React from "react";
import Filter from "./Filter";
import { useDispatch, useSelector } from "react-redux";
import {
  selectSortBy,
  setSort,
} from "../../store/features/products/productsSlice";
import { useState } from "react";
import { useEffect } from "react";

const SORT_FILTERS = {
  id: "sort",
  name: "Sort by",
  type: "radio",
  options: [
    {
      id: "asc",
      name: "Price low to hight",
      fn: (a, b) => a?.price > b?.price,
    },
    {
      id: "desc",
      name: "Price hight to low",
      fn: (a, b) => a?.price < b?.price,
    },
  ],
};

const SortBy = () => {
  const selectedOptions = useSelector(selectSortBy);
  const [defaultValue, setDefaultValue] = useState({});
  const dispatch = useDispatch();

  const onChange = (selectedValues) => {
    const key = Object.keys(selectedValues)[0];

    dispatch(setSort(selectedValues[key]));
  };

  useEffect(() => {
    if (selectedOptions) {
      setDefaultValue({ [selectedOptions?.id]: selectedOptions });
    } else {
      setDefaultValue({});
    }
  }, [selectedOptions]);

  return (
    <Filter
      filter={SORT_FILTERS}
      defaultValue={defaultValue}
      onValueChange={onChange}
    ></Filter>
  );
};

export default SortBy;

Color Filter

import React from "react";
import Filter from "./Filter";
import { withMultipleChoice } from "./withMultipleChoice";

const generateFilterFunction = (values) => (item) =>
  item?.color?.some?.((c) => values.includes(c?.hex));

const COLOR_FILTER = {
  id: "color",
  name: "Color",
  type: "checkbox",
  options: [
    {
      id: "white",
      name: "White",
      hex: "#ffffff",
    },
    {
      id: "black",
      name: "Black",
      hex: "#000000",
    },
    {
      id: "gray",
      name: "Gray",
      hex: "#808080",
    },
    {
      id: "red",
      name: "Red",
      hex: "#ff0000",
    },
    {
      id: "green",
      name: "Green",
      hex: "#008000",
    },
    {
      id: "blue",
      name: "Blue",
      hex: "#0000ff",
    },
  ],
};

export default withMultipleChoice(
  COLOR_FILTER,
  ({ hex }) => hex,
  generateFilterFunction
)(Filter);

Brand Filter

import React from "react";
import Filter from "./Filter";
import { withMultipleChoice } from "./withMultipleChoice";

const generateFilterFunction = (values) => (item) =>
  values.includes(item.brand);

const BRAND_FILTER = {
  id: "brand",
  name: "Brand",
  type: "checkbox",
  options: [
    {
      id: "nike",
      name: "Nike Sportswear",
    },
    {
      id: "adidas",
      name: "Adidas Originals",
    },
    {
      id: "new-balance",
      name: "New Balance",
    },
    {
      id: "puma",
      name: "Puma",
    },
  ],
};

export default withMultipleChoice(
  BRAND_FILTER,
  ({ name }) => name,
  generateFilterFunction
)(Filter);

Price Filter

import React from "react";
import Filter from "./Filter";
import { useDispatch, useSelector } from "react-redux";
import {
  selectFilters,
  setFilters,
} from "../../store/features/products/productsSlice";

const generateFilterFunction =
  (value = 200) =>
  (a) =>
    a.price <= value;

const FILTER = {
  id: "price",
  name: "Price Max",
  type: "slider",
  min: 0,
  max: 200,
};

const PriceFilter = () => {
  const selectedOptions = useSelector(selectFilters(FILTER.id));
  const dispatch = useDispatch();

  const onChange = (value) => {
    const fn = generateFilterFunction(value); // filterFunction

    dispatch(setFilters({ [FILTER.id]: { value, fn } }));
  };

  return (
    <Filter
      filter={FILTER}
      defaultValue={selectedOptions.value}
      onValueChange={onChange}
    />
  );
};

export default PriceFilter;

We can see that Color and Brand filter are using a higher-order components. Because both components are using same logic of multiple choice.

React HOC is like a helper tool that helps you change the way your React components look or behave without having to rewrite the code every time. It's a way to add extra features or functionality to your components quickly and easily.

withMultipleChoice :

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  deleteFilterById,
  selectFilters,
  setFilters,
} from "../../store/features/products/productsSlice";

export const withMultipleChoice =
  (filter, mapValuesFn, filterFn) => (Component) => (props) => {
    const selectedOptions = useSelector(selectFilters(filter.id));
    const dispatch = useDispatch();

    const onChange = (selectedValues) => {
      const hasValues = Object.keys(selectedValues).length > 0;

      if (!hasValues) {
        dispatch(deleteFilterById(filter.id));
        return;
      }

      const values = Object.values(selectedValues).map(mapValuesFn);
      const fn = filterFn(values);

      dispatch(setFilters({ [filter.id]: { ...selectedValues, fn } }));
    };

    return (
      <Component
        filter={filter}
        defaultValue={selectedOptions}
        onValueChange={onChange}
      />
    );
  };

Conclusion

In this post, we were able to list products and filter them. We used react HOC to do that. Let's continue to work hard and create something truly incredible together!

Hopefully you enjoyed the article as well—if so, please let me know in the comment section below!

Source code 👨‍💻

Feel free to checkout the source code there 👉 Github

SneakerShop Tutorial : Home Screen ✨👟✨

Majuran SIVAKUMAR — Fri, 07 Apr 2023 16:30:00 +0000

Hello team 👋, I hope you are all doing well!

In our last post, we made some great progress by configuring our project and successfully navigating between screens.

In today's post, we have some amazing things to showcase on our home screen!

Home Screen 🏠

For the home screen, I want:

A simple header with the project name and a shopping bag icon displaying the number of products in the cart.
A button to navigate to Filter screen
A product list that includes a picture, model name, brand name, and price.

To populate this data, I created a JSON file that mocks an API fetch.

// /api/index.js
import { data } from "./data.json";

export const getProducts = () => Promise.resolve(data)

The mock data object is like :

{
  "data": [
    {
      "id": 11,
      "brand": "Nike Sportswear",
      "model": "AIR FORCE 1",
      "imageUrl": "https://img01.ztat.net/article/spp-media-p1/b83f2fe8dfd14010b0f07f919710380d/64888efd8c034688aa9c7677151fba44.jpg",
      "price": 119.95,
      "description": "Duis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.",
      "color": [
        {
          "name": "White",
          "hex": "#ffffff"
        }
      ]
    },
    {
      "id": 9,
      "brand": "Nike Sportswear",
      "model": "DUNK RETRO SE DC",
      "imageUrl": "https://img01.ztat.net/article/spp-media-p1/d5bf785592bb477db8d8208c984dfc86/eee0aab7b764448ca86050955de6ee02.jpg",
      "price": 109.95,
      "description": "Duis consequat dui nec nisi volutpat eleifend. Donec ut dolor. Morbi vel lectus in quam fringilla rhoncus.",
      "color": [
        {
          "name": "Gray",
          "hex": "#808080"
        }
      ]
    },
// .... 
// I let you mock the data as you need
  ]
}

The Home Screen becomes :

// /screens/HomeScreen.js
import React, { useEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import { Text, SafeAreaView, View, ScrollView, TouchableOpacity, Image} from "react-native";
import { ShoppingBagIcon, AdjustmentsIcon } from "react-native-heroicons/outline";
import { useSelector, useDispatch } from "react-redux";

import { getProducts } from "../api";
import { nbItemsInCart } from "../store/features/cart/cartSlice";
import { selectNbOfFilters, selectProducts, setProducts } from "../store/features/products/productsSlice";

const HomeScreen = () => {
    // 👉 get informations from store
  const products = useSelector(selectProducts);
  const itemsInCart = useSelector(nbItemsInCart);
  const filterItems = useSelector(selectNbOfFilters);
  const dispatch = useDispatch();
  const { navigate } = useNavigation();

  useEffect(() => {
    /* 👉 Fetch data from api on init  */ 
    async function getData() {
      const datas = await getProducts();
      dispatch(setProducts(datas));
    }
    getData();
  }, []);

  const goToDetails = (item) => navigate("Detail", item);
  const goToCart = () => navigate("Cart");
  const goToFilter = () => navigate("Filter");

  return (
    <SafeAreaView className="bg-white">
      {/* 👉 HEADER */}
      <View className="relative flex-row justify-between px-5 py-2">
        <Text className="uppercase text-xl font-bold">Sneakershop</Text>
        <TouchableOpacity onPress={goToCart}>
          <ShoppingBagIcon color="black" size="32" strokeWidth={1.5} />

          {/* 👉 SHOW NUMBER OF ITEM IN CART */}
          {!!itemsInCart && (
            <View className="absolute bg-red-400 px-1 rounded-full bottom-0 right-0">
              <Text className="text-white text-xs font-bold">
                {itemsInCart}
              </Text>
            </View>
          )}
        </TouchableOpacity>
      </View>
      <View className="flex-row justify-between px-5 py-2 mb-2">
        <Text className="text-lg font-bold">Products</Text>
        <View className="flex-row justify-between">
{/* 👉 Filter button to go to Filter Screen */}
          <TouchableOpacity
            className="relative border border-slate-400 p-1"
            onPress={goToFilter}
          >
            <AdjustmentsIcon color="black" size="30" strokeWidth="1.5" />
{/* 👉 Show number of filter applied */}
            {!!filterItems && (
              <View className="absolute bg-slate-900 px-1 rounded-full -bottom-1 -right-1">
                <Text className="text-white text-xs font-bold">
                  {filterItems}
                </Text>
              </View>
            )}
          </TouchableOpacity>
        </View>
      </View>
{/* 👉 ScrollView to show products */}
      <ScrollView className="h-full bg-white">
        <View className="flex flex-row flex-wrap justify-between pb-32 px-0.5">
{/* Map on products to show a product card*/}
          {products.map((item) => (
            <TouchableOpacity key={item.id} onPress={() => goToDetails(item)}>
              <View className="flex w-48 h-60 pb-4 bg-white">
                <View className="flex-1 bg-slate-200">
                  <Image
                    className="flex-1"
                    resizeMode="cover"
                    source={{
                      uri:
                        item.imageUrl +
                        "?imwidth=1080&filter=packshot&imformat=jpeg",
                    }}
                  ></Image>
                </View>
                <View className="p-1">
                  <Text className="uppercase text-s font-bold">
                    {item.model}
                  </Text>
                  <Text className="capitalize">{item.brand}</Text>
                  <Text className="text-xs text-slate-500 mt-1">
                    {item.price} €
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          ))}

          {products.length === 0 && <Text>No results</Text>}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;

Next 🔜

I'm really excited about the progress we're making and can't wait to see what we will accomplish next.

Now that our Home Screen is done, we are going to start the FilterScreen in next post 🔜

Hopefully you enjoyed the article as well—if so, please let me know in the comment section below! 💬

Source code 👨‍💻

Feel free to checkout the source code there 👉 Github

SneakerShop Tutorial : Configuration ⚙️

Majuran SIVAKUMAR — Thu, 08 Dec 2022 17:50:00 +0000

A mobile app build with ReactNative, JavaScript, Tailwind, Redux etc.

Hello 👋

It has been a long time since I wanted to give a try with ReactNative. But was looking for a good project idea to start. With a todo app, I was sure to not be enough entertained to finish it…
One day, while purchasing a new pair of sneakers, I was like “Hey! It can be fun to create a sneaker app 💡” and tada I’m here with this series!

Demo

What we are going to build together.

Features 🚀

In term of features I wanted some basics ones:

User can browse a list of sneakers in the catalog screen and filter them.
Open a product screen, choose a size and add the sneaker to his basket.
In the cart screen, user can edit his cart by removing products.

Configuration 🛠️

First of all, let’s generate the project with Expo.

# Install expo-cli and create project 
npm install --global expo-cli && npx create-expo-app my-sneaker-app

Here are some important libraries I used 👇

For design system:

Tailwind. Yes ! You can use Tailwind with React Native thanks to NativeWind by Mark Lawlor 🤘

# Install NativeWind and TailwindCSS
npm install nativewind
npm install -D tailwindcss

HeroIcons for icons

# Install HeroIcons
npm install @heroicons/react

Navigation

To navigate between screens: React Navigation.

npm install @react-navigation/native

For state management

Install React Redux and Redux Toolkit

# Install React Redux and Redux Toolkit
npm install @reduxjs/toolkit react-redux

Then create files following this structure:

/store
├── /features
│   ├── /cart
│   │   └── cartSlice.js
│   └── /products
│       └── productsSlice.js
└── index.js

cartSlice.js:

This reducer will handle state of our cart, adding, removing item in cart.

// store/features/cart/cartSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
};

export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    setItemToCart: (state, action) => {
      state.items = [...state.items, action.payload];
    },
    removeItemFromCart: (state, action) => {
      state.items = state.items.filter((e) => e.id !== action.payload);
    },
  },
});

// Action creators are generated for each case reducer function
export const { setItemToCart, removeItemFromCart } = cartSlice.actions;

// Selectors
export const selectCartItems = (state) => state.cart.items;
export const nbItemsInCart = (state) => state.cart.items.length;
export const itemExistInCart = (id) => (state) =>
  state.cart.items.some((i) => i.id === id);

export default cartSlice.reducer;

productSlice.js

It is where we are going to set our products state. Its going to be usefull for catalog page. It will handle list of products, filters and sort states.

// /store/products/productsSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  items: [],
  filters: {},
  sort: null,
};

export const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {
    setProducts: (state, action) => {
      state.items = [...action.payload];
    },
    setFilters: (state, action) => {
      /* TODO */
    },
    deleteFilterById: (state, action) => {
      /* TODO */
    },
    setSort: (state, action) => {
      state.sort = action.payload;
    },
    resetFilters: (state, action) => {
      state.filters = {};
      state.sort = null;
    },
  },
});

// Action creators are generated for each case reducer function
export const {
  setProducts,
  setFilters,
  setSort,
  deleteFilterById,
  resetFilters,
} = productsSlice.actions;

// Selectors
export const selectProducts = ({ products }) => {
  /* TODO filter products */
  return productList ;
};

export const selectSortBy = ({ products }) => products.sort;
export const selectFilters = (id) => (state) => {
  // return filters
};
export const selectNbOfFilters = (state) =>
  Object.keys(state.products.filters).length + (state.products.sort ? 1 : 0);

export default productsSlice.reducer;

index.js

We can create our store with those reducers.

// /store/index.js
import { configureStore } from "@reduxjs/toolkit";
import cartSliceReducer from "./features/cart/cartSlice";
import productsSliceReducer from "./features/products/productsSlice";

export const store = configureStore({
  reducer: {
    cart: cartSliceReducer,
    products: productsSliceReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

Screens

Let's create our main screens following this file structure:

/screens
├── CartScreen.js
├── DetailScreen.js
├── FilterScreen.js
└── HomeScreen.js

For now, we are creating empty screen with links to other screens. We will update each screen in next parts.

Cart Screen

// /screens/CartScreen.js
import React from "react";
import { useNavigation } from "@react-navigation/native";

import { Text, View } from "react-native";

const CartScreen = () => {
  const { navigate, goBack } = useNavigation();

  return (
    <View className="bg-white">
      <Text>Cart Screen</Text>
      <TouchableOpacity onPress={() => goBack()}>
        <View>
          <Text>Previous screen</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default CartScreen;

Detail Screen

// /screens/DetailScreen.js
import React from "react";
import { useNavigation } from "@react-navigation/native";

import { Text, View } from "react-native";

const DetailScreen = () => {
  const { navigate, goBack } = useNavigation();

  return (
    <View className="bg-white">
      <Text>Detail Screen</Text>
      <TouchableOpacity onPress={() => goBack()}>
        <View>
          <Text>Previous screen</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigate("Cart")}>
        <View>
          <Text>Cart screen</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default DetailScreen;

Filter Screen

// /screens/FilterScreen.js
import React from "react";
import { useNavigation } from "@react-navigation/native";

import { Text, View } from "react-native";

const FilterScreen = () => {
  rconst { navigate, goBack } = useNavigation();

  return (
    <View className="bg-white">
      <Text>Filter Screen</Text>
      <TouchableOpacity onPress={() => goBack()}>
        <View>
          <Text>Previous screen</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default FilterScreen;

Home Screen

// /screens/HomeScreen.js
import React from "react";

import { Text, View } from "react-native";

const HomeScreen = () => {
  const { navigate } = useNavigation();

  const goToDetails = (item) => navigate("Detail", item);
  const goToCart = () => navigate("Cart");
  const goToFilter = () => navigate("Filter");

  return (
    <View className="bg-white">
      <Text>Home Screen</Text>
      <TouchableOpacity onPress={goToCart}>
        <View>
          <Text>Go to Cart Screen</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={goToFilter}>
        <View>
          <Text>Go to Filter Screen</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity onPress={goToDetails}>
        <View>
          <Text>Go to Detail Screen</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default HomeScreen;

Now that we have our screens, we can update our App.js :

// App.js
import React from "react";
import { Provider } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { store } from "./store";

import HomeScreen from "./screens/HomeScreen";
import DetailScreen from "./screens/DetailScreen";
import CartScreen from "./screens/CartScreen";
import FilterScreen from "./screens/FilterScreen";

const Stack = createNativeStackNavigator();
const screenDefaultOption = { headerShown: false };

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={screenDefaultOption}
          />
          <Stack.Screen
            name="Detail"
            component={DetailScreen}
            options={screenDefaultOption}
          />
          <Stack.Screen name="Filter" component={FilterScreen} />
          <Stack.Screen name="Cart" component={CartScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

Next 🔜

In this first part, we have setup, configured our project and can navigate between screens.

On the next post of this serie, we will start our Home Screen and list/filter products 🔜

Hope you enjoyed reading this post 😇

If you have any questions or feedback, feel free to reach out in the comment section! 💬

Source code 👨‍💻

Feel free to checkout the source code there 👉 Github

NPM: How to patch a dependency 📦

Majuran SIVAKUMAR — Fri, 23 Apr 2021 16:18:17 +0000

Why?

As a Javascript developer, you might have come to a situation where you found a bug in a dependency you use.

As a good soul 😇, you have done a pull request with the fix. But what if the pull request is not yet accepted and you need this fix to deploy your project?! 🤔

Patch-Package 🚀

Patch-Package is a tool to patch a dependency, it will create a .patch file and it will patch the package after each npm install.

How?

Open the file you want to edit and add your fix.

vim node_modules/package-name/file-to-edit.js

Run :

npx patch-package package-name

This will create a .patch file under a new repository patches/

Commit this file to your git repository
Finally add following script to your package.json. This will run after each npm install and will patch the package.

 "scripts": {
   "postinstall": "patch-package"
 }

Tutorial: React ⚛ + Leaflet 🗺

Majuran SIVAKUMAR — Thu, 14 Jan 2021 17:22:57 +0000

Hello, 👋 Today I want to share with you a small tutorial on how to use Leaflet with React.

For this, we are going to make a web app where we can find some tourist places at... Paris! 🇫🇷 🥖.

You can check the Demo on : https://react-leaflet-example.netlify.app/ 🚀

What is Leaflet?

Leaflet is the most popular open-source library for interactive maps. You can add markers to a map, make a circle, square, line, and much more interesting stuff. Check the documentation for more: https://leafletjs.com/

What we are going to do : 📝

Create our project and install all dependencies
Show a map, centered on Paris
Show markers on the map
Add a new marker on the map
Draw line between markers

For a sake of visibility, I will put only some part of the code in this article, but feel free to check the source code on Github repo

Installation ⚙️

First of all, let's create and install dependencies for this project.

Let's create our project with create-react-app

npx create-react-app react-leaflet-example --template typescript

Install leaflet and react-leaflet

npm i -S leaflet react-leaflet

Install types (Optional if you are not using typescript):

npm i -D @types/leaflet

Show a Map 🗺

Now that we have installed all we need, let's create a new component called Map. And add the starter code from the documentation.

It uses MapContainer, and we are passing to it some coordinates to center the map to our city.

TileLayer is used to show copyright on the Map

import { MapContainer, TileLayer } from "react-leaflet";

const Map = () => {
  const defaultPosition: LatLngExpression = [48.864716, 2.349]; // Paris position

  return (
    <div className="map__container">
      <MapContainer
        center={defaultPosition}
        zoom={13}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
};

Show markers on the map 📍

Our map doesn't have any places yet. So let's add some default places. For that, I created an array of places in advance, with those attributes:

import { LatLngExpression } from "leaflet";

export interface Place {
  id: string;
  picture: string;
  title: string;
  description: string;
  seeMoreLink: string;
  position: LatLngExpression;
}

In my application, I use redux to handle state management of places, show preview modal, etc. I skip how to create/use a store with react-redux. You can check the code on githup repo

So let's import our array of places, and use the Marker component for each place. Marker needs as props our place's position. We can also handle events like click to show a place's description.

Check more about Marker's options


import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
import { LatLngExpression } from "leaflet";

const Map = ({places}) => {
  const defaultPosition: LatLngExpression = [48.864716, 2.349]; // Paris position

  const showPreview = (place) => {
    // show place's description
  }

  return (
    <div className="map__container">
      <MapContainer
        center={defaultPosition}
        zoom={13}
      >
        {places.map((place: Place) => (
          <Marker
            key={place.id}
            position={place.position} // 👈
            eventHandlers={{ click: () => showPreview(place) }}
          >
            {/* show place's title on hover the marker */}
            <Tooltip>{place.title}</Tooltip> 
          </Marker>
        ))}

        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
};

Add new marker on the map ➕📍

Cool! Now we have markers on our map, but how to add new places dynamically? Let's say we want to add a new place when we click on the map.

To show a new place on click, we are going to create a new component called AddMarker that will handle this and update the store.

In this component, we are going to use useMapEvents hook.

import { MapContainer, TileLayer, Marker, Tooltip, useMapEvents } from "react-leaflet";

const AddMarker = () => {
  const [position, setPosition] = useState(null);

  useMapEvents({
    click: (e) => {
      setPosition(e.latlng); // 👈 add marker

      /* CODE TO ADD NEW PLACE TO STORE (check the source code) */
    },
  });

  return position === null ? null : (
    <Marker position={position}></Marker>
  );
};
const Map = ({places}) => {
  /* ... */

  return (
    <div className="map__container">
      <MapContainer
        center={defaultPosition}
        zoom={13}
      >
        {/* ... */}
        <AddMarker/>
        {/* ... */}
      </MapContainer>
    </div>
  );
};

As we visit Paris let's add Paris-Saint-Germain's stadium ⚽️

So on click, we are showing the form to add a new place :

On save, the new place is added to our map 🎉.

Draw lines ✏️

Now that we have learned how to add markers to our map, let's try to draw a line between each marker.

For that, we are going to use Polyline component.
This component needs a list of positions to draw the line. So let's create an array of positions with our places.

I'll use useEffect to create this array only when places change.

const Map = ({ places }) => {

  const [polyLineProps, setPolyLineProps] = useState([]);

  useEffect(() => {
      setPolyLineProps(places.reduce((prev: LatLngExpression[], curr: Place) => {
        prev.push(curr.position);
        return prev
        ;
      }, []))
    }, [places]);

  return (
    <MapContainer
          center={defaultPosition}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: "100vh" }}
          zoomControl={false}
        >
    {/* ... */}
      <Polyline positions={polyLineProps} /> {/* 👈 */}
    {/* ... */}

    </ MapContainer>
  )
}

Conclusion

In this article, we succeed to show a map and interact with it, like adding markers dynamically and drawing a line. To go further you can try to draw a circle or a rectangle.

Hope it helped some of you.

Thanks for reading. 😇

Source code available on Github 👈

Sources

Prerender an Angular app

Majuran SIVAKUMAR — Sun, 29 Nov 2020 17:32:19 +0000

Hello 👋 ! Not so long ago, I meet the need to prerender an Angular application and I taught it will be nice to share it with you.

Let's check step by step, how to create and prerender a new Angular app.

If you are interested to prerender an existing app, You can jump to step 3. 😉

FYI: You can also clone this example on Github 👈

1. New project

Let's create a new angular project with Angular Cli

ng new angular-prerender-test

2. Create some routes

For the example I will create 3 routes :

/ : Home page (static route)
/contact : Contact page (static route)
/user/:id : User profile (dynamic route), content will be different for each id

You can create your components via Angular Cli with :

ng g c YourComponentName

Here is what my components looks like:

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h1>Home Page</h1>
    <p>Hello World, welcome to the home page</p> `,
  styles: [],
})
export class HomeComponent{
  constructor() {}
}

// contact.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact',
  template: `<h1>Contact</h1>
    <p>You can contact me on : +1 *** *** *** *23</p>`,
  styles: [],
})
export class ContactComponent {
  constructor() {}
}

// user.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>User: {{ id }}</h1>
    <p>This is {{ id }}'s profile</p>`, // 👈 user id in template
  styles: [],
})
export class UserComponent {
  id = '';

  constructor(private route: ActivatedRoute) {
    // Get param from route
    this.route.params.subscribe({ next: (res) => (this.id = res.id) });
  }
}

and your app-routing.module.ts should be like :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  /* Home page */
  {
    path: '',
    component: HomeComponent,
  },
  /* Contact page */
  {
    path: 'contact',
    component: ContactComponent,
  },
  /* User profile page */
  {
    path: 'user/:id',
    component: UserComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

So now when you run your project with npm start, you should have 3 pages

http://localhost:4200 => home page
http://localhost:4200/contact => Contact page
http://localhost:4200/user/bob => bob's profile page

3. Install Angular Universal

Now that we have our project configured, we can move on and install Angular Universal.

ng add @nguniversal/express-engine

If you open your package.json, you should find a new script :

"prerender": "ng run angular-prerender-example:prerender"

4. Static routes

To prerender static routes, it's pretty straightforward, run :

npm run prerender

If you check the build, you should have something like :

dist/angular-prerender-example/browser
├── 3rdpartylicenses.txt
├── contact
│   └── index.html # 👈 contact page
├── favicon.ico
├── index.html # 👈 home page
├── index.original.html
├── main.271dcd2770e618160ca0.js
├── polyfills.bf99d438b005d57b2b31.js
├── runtime.359d5ee4682f20e936e9.js
└── styles.617af1cc16b34118b1d3.css

If you open those file you are going to have :

<!-- index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-home>
    <h1>Home Page</h1>
    <p>Hello World, welcome to the home page</p>
  </app-home>
</div>
...

<!-- contact/index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-contact>
    <h1>Contact</h1>
    <p>You can contact me on : +1 *** *** *** *23</p>
  </app-contact>
</div>
...

Tada ! Our static routes are prerendered ! 🎉

But, wait what about my dynamic route /user/:id ?!? 🤔

5. Dynamic routes

For dynamic routes, we should define which routes we want to prerender. For it, we need to create a new file user-routes at the root of the project and list all routes you want.

You can name the file as you like

Example :

/user/Joan
/user/Sherry
/user/Frank
/user/Bob

Let's open angular.json.

In prerender section add a new attribute routesFile with your file name.

...
"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "browserTarget": "angular-prerender-example:build:production",
    "serverTarget": "angular-prerender-example:server:production",
    "routes": [
      "/"
    ],
    "routesFile" : "user-routes" // 👈 add your file name
  },
  "configurations": {
    "production": {}
  }
}
...

Then run :

npm run prerender

Let's check the output:

dist/angular-prerender-example/browser
├── 3rdpartylicenses.txt
├── contact
│   └── index.html
├── favicon.ico
├── index.html
├── index.original.html
├── main.271dcd2770e618160ca0.js
├── polyfills.bf99d438b005d57b2b31.js
├── runtime.359d5ee4682f20e936e9.js
├── styles.617af1cc16b34118b1d3.css
└── user
    ├── Bob
    │   └── index.html # 👈 
    ├── Frank
    │   └── index.html # 👈 
    ├── Joan
    │   └── index.html # 👈 
    └── Sherry
        └── index.html # 👈

Let's open one of those files :

<!-- user/bob/index.html -->
...
<div _ngcontent-sc36="" class="container">
  <router-outlet _ngcontent-sc36=""></router-outlet>
  <app-user>
    <h1>User: Bob</h1>
    <p>This is Bob's profile</p>
  </app-user>
</div>
...

and that's it, routes listed in user-routes are prerendered ! 🎉

Hope it helped some of you.
Thanks for reading. 😇

Source code available on Github 👈

React Tutorial: Movie App 🎬

Majuran SIVAKUMAR — Fri, 30 Oct 2020 20:14:21 +0000

Hello 👋, For my first post on dev.to, I decided to share with you a small tuto about creating a Movie App with React and TypeScript.

Demo https://movie-app-majuran.netlify.app 🚀

Source code available on Github : Here !

Setup

Before starting coding let's setup our project.

Generate project with CreateReactApp:

I often (to not say always 😁) use Create React App to initiate my React projects.

In order to generate our project run :

npx create-react-app my-movie-app --template typescript

API :

The frontend will have to fetch the data from an API, I choose TMDb 🎬 : It's free, you just need to create an account to get your API key

Please use your API key as an environment variable, in .env file :

REACT_APP_API_KEY=YOUR_API_KEY

The configuration is done, let's start coding. 💻

State Management

Our app components are going to communicate between them.
To handle this, we need a state management, for that, we are going to combine the context API and state hooks

In case, you are not familiar with react hooks. I encourage you, to read ➡️ React Hooks and Context API

// create context
export const MoviesContext = React.createContext<{
  movies: Movie[];
  updateMovies: Function;
}>({
  movies: [],
  updateMovies: Function,
});

function App() {
// get default values
  useEffect(() => {
    discoverMovies()
      .then(setMovies)
      .catch((_) => setMovies([]));
  }, []);

// use state hook
  const [movies, setMovies] = useState<Movie[]>([]);

  return (
  // Provide to the all project: 
  // - movies an array of Movie, 
  // - updateMovies : function to update the movies list
    <MoviesContext.Provider value={{ movies, updateMovies: setMovies }}>
      <div className="App">
        <Header></Header>
        <Catalog></Catalog>
      </div>
    </MoviesContext.Provider>
  );
}

Components

Don’t be afraid to split components into smaller components. (React Doc)

In React it's important to split the UI by components, so let's check how many components do we need :

As you can see, three components are standing out:

Header
Search
Catalog

A question to ask when creating a component:
What my component should do ?! 🤔

Header

The header component is pretty simple, it contains the project title and the Search component.

export const Header = () => {
  return (
    <div className="header">
      <h1 className="header__title">Movie App</h1>
      <div className="header__search">
        <Search></Search>
      </div>
    </div>
  );
};

Search

The search component should:

show an input field
save user search
query the API with this search
update the movie list

In order to save the state of our input, we will use in this component the useState hook.

export const Search = () => {
  const [search, setSearch] = useState("");
  // Consume our context to get updateMovies function
  const { updateMovies } = useContext(MoviesContext); 

  const handleOnSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (search) {
      searchMovies(search).then((movies) => {
        updateMovies(movies);
      });
    }

  return (
    <div>
      <form name="form" onSubmit={(e) => handleOnSubmit(e)} noValidate>
        <input
          type="text"
          name="movie"
          className="search__input"
          placeholder="Search movie ... "
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </form>
    </div>
  );
};

Catalog

The catalog component should:

get movies from the context
loop on this array

export const Catalog = () => {
  // Consume the context to get list of movies.
  const { movies } = useContext(MoviesContext);

  return (
    <div className="catalogContainer">
      {movies.map((movie) => (
        <div className="catalog__item" key={movie.id}>
          <div className="catalog__item__img">
            <img src={movie.picture || imgPlaceholder} alt={movie.title} />
            <div className="catalog__item__resume">{movie.resume}</div>
          </div>
          <div className="catalog__item__footer">
            <div className="catalog__item__footer__name">
              {movie.title} ({new Date(movie.date).getFullYear()})
            </div>
            <div className="catalog__item__footer__rating">{movie.rating}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

fetch() data from API

In order to fetch the API for data, let's create a service :

const movieApiBaseUrl = "https://api.themoviedb.org/3";

export function searchMovies(search: string): Promise<Movie[]> {
  return fetch(
    `${movieApiBaseUrl}/search/movie?query=${search}&api_key=${process.env.REACT_APP_API_KEY}`
  )
    .then((res) => res.json())
    .catch((_) => {
      return [];
    });
}

export function discoverMovies(): Promise<Movie[]> {
  return fetch(
    `${movieApiBaseUrl}/discover/movie?sort_by=popularity.desc&api_key=${process.env.REACT_APP_API_KEY}`
  )
    .then((res) => res.json())
    .then((response) => mapResult(response.results))
    .catch((_) => {
      return [];
    });
}

Conclusion

With this tutorial, I tried to present to you some important concept like :

React Context API
React hooks
function fetch to make API calls

To go further

Some more ideas to improve your skills:

handle No result
use Redux
pagination

Source :

You can clone this project on Github