DEV Community: Oluwaseyi Komolafe

No Copilot? No Problem! Get Free AI in VSCode Now

Oluwaseyi Komolafe — Mon, 13 Jan 2025 07:45:32 +0000

Tired of relying on paid tools like Copilot, Cursor AI, or ChatGPT? Here's how you can integrate a powerful and completely free AI assistant directly into your Visual Studio Code. Follow these steps, and you’ll have a personal coding guru at your fingertips—without any restrictions!

Step 1: Set Up Your Groq Account

Visit Groq Console.
Create an account or log in.
Navigate to API Keys and create a new key.

Important: Copy and save your API key immediately—it’s displayed only once!

Step 2: Install the Continue Extension

Open Visual Studio Code.
Search for “Continue” in the Extensions Marketplace.
Install the extension.

Step 3: Configure the Continue Extension

Open the installed extension and click the gear icon (third icon from the right at the top of the page).
A configuration file will open. Replace its content with the following:

   {
     "models": [
       {
         "model": "AUTODETECT",
         "title": "Ollama",
         "apiBase": "http://localhost:11434",
         "provider": "ollama"
       },
       {
         "model": "AUTODETECT",
         "title": "Groq",
         "apiKey": "YOUR_GROQ_API_KEY",
         "provider": "groq"
       }
     ],
     "customCommands": [
       {
         "name": "test",
         "prompt": "{{{ input }}}\n\nWrite a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.",
         "description": "Write unit tests for highlighted code"
       }
     ],
     "tabAutocompleteModel": {
       "title": "codeqwen",
       "provider": "ollama",
       "model": "starcoder2:3b"
     },
     "contextProviders": [
       { "name": "code", "params": {} },
       { "name": "docs", "params": {} },
       { "name": "diff", "params": {} },
       { "name": "terminal", "params": {} },
       { "name": "problems", "params": {} },
       { "name": "folder", "params": {} },
       { "name": "codebase", "params": {} }
     ],
     "slashCommands": [
       { "name": "edit", "description": "Edit selected code" },
       { "name": "comment", "description": "Write comments for the selected code" },
       { "name": "share", "description": "Export the current chat session to markdown" },
       { "name": "cmd", "description": "Generate a shell command" },
       { "name": "commit", "description": "Generate a git commit message" }
     ]
   }

Replace YOUR_GROQ_API_KEY with your saved API key. Save the file.

Step 4: Start Using Your AI Partner!

Highlight any code in your editor.
Press Command + L (or the equivalent on your system) to open Continue.
Ask questions, request code reviews, or generate solutions without limits!

Why This Is a Game-Changer:

Completely Free: Say goodbye to subscription fees!
Unlimited Prompts: Unlike ChatGPT, you’re not capped by usage limits.
Seamless Integration: Directly within your VSCode workspace.
Customizable: Tailor commands to suit your needs.

Experience a smarter, faster way to code. Set up your free AI assistant today and elevate your coding workflow to the next level! 🚀

How to Build a Centered Input Field for Amounts in React Native

Oluwaseyi Komolafe — Tue, 07 Jan 2025 08:59:53 +0000

A clean, centered input field for entering amounts is a small but significant part of any financial app. It enhances user experience, provides clarity, and ensures ease of use. In this article, we’ll walk through creating a reusable CurrencySection component in React Native.

This component is simple yet powerful, featuring:

Dynamic height adjustment for the input field.
Automatic formatting for amounts in a specified currency.
Inline error messaging for better user feedback.

Let’s dive into the details!

What the `CurrencySection` Does

The CurrencySection component is designed to:

Allow users to input amounts in a visually appealing, centered format.
Automatically format amounts into the specified currency.
Provide flexibility to customize elements such as the currency symbol, placeholder text, and error messages.

Implementation

Here’s the full implementation of the CurrencySection component:

/* eslint-disable react-native/no-inline-styles */
import React, {useCallback, useState} from 'react';
import {
  Keyboard,
  NativeSyntheticEvent,
  Platform,
  StyleSheet,
  TextInput,
  TextInputContentSizeChangeEventData,
  TextInputProps,
  View,
} from 'react-native';
import {
  formatAmountInCurrency,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  trimNumber,
} from '../../utils/functions';
import colors from '../../utils/helpers/colors';
import {InlineError} from '../../utils/helpers/Reusables';
import AppText from '../texts/appText';

interface CurrencySectionProps extends TextInputProps {
  title?: string;
  amount?: string;
  error?: string;
  onChangeAmount?: (amount: string) => void;
  isEditable?: boolean;
  currency?: string;
}

const CurrencySection: React.FC<CurrencySectionProps> = ({
  title = 'Enter amount',
  amount = '',
  error = '',
  onChangeAmount,
  isEditable = true,
  currency = '₦',
  ...props
}) => {
  const [height, setHeight] = useState(42);

  const onChangeText = useCallback(
    (text: string) => {
      onChangeAmount?.(trimNumber(text));
    },
    [onChangeAmount],
  );

  const onBlur = useCallback(() => {
    if (amount) {
      const formattedAmount = formatAmountInCurrency(
        Number(amount.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [amount, onChangeAmount]);

  const handleContentSizeChange = useCallback(
    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
      setHeight(e.nativeEvent.contentSize.height);
    },
    [],
  );

  return (
    <View style={styles.amountContainerStyle}>
      {title ? <AppText size={15}>{title}</AppText> : null}
      <View style={[styles.rowContainer, {alignItems: 'center'}]}>
        <AppText size={36} weight="bold">
          {currency}
        </AppText>
        <TextInput
          value={amount}
          style={[
            styles.amountInputTextStyle,
            !amount?.length && styles.emptyInputFieldStyle,
            {height},
          ]}
          onContentSizeChange={handleContentSizeChange}
          placeholderTextColor={colors.grey}
          underlineColorAndroid="transparent"
          placeholder="0.00"
          keyboardType="numeric"
          returnKeyType="done"
          onChangeText={onChangeText}
          onBlur={onBlur}
          editable={isEditable}
          multiline
          maxLength={MAX_AMOUNT_LENGTH_CURRENCY_SECTION}
          onSubmitEditing={Keyboard.dismiss}
          {...props}
        />
      </View>

      {error?.toString()?.length > 0 && (
        <InlineError
          style={{marginTop: 10, padding: 10, borderRadius: 18}}
          message={error}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  amountContainerStyle: {
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  amountInputTextStyle: {
    fontSize: 36,
    fontWeight: '600',
    backgroundColor: 'transparent',
    ...(Platform.OS === 'ios' ? {paddingBottom: 6} : {}),
  },
  emptyInputFieldStyle: {width: 100},
});

export default CurrencySection;

Highlights of the `CurrencySection` Component

Dynamic Height Adjustment

The input field dynamically resizes to match its content size, ensuring a clean and adaptive design.
Automatic Currency Formatting

The formatAmountInCurrency function ensures amounts are formatted appropriately, making them easier to read.
Customizable and Reusable

With props for titles, currency symbols, and error messages, this component is flexible enough for various use cases.
Error Feedback

Inline error messages provide immediate feedback without disrupting the flow of the UI.

Styling Choices

Alignment: Centering the input and currency symbol creates a clean, balanced layout.
Font Size and Weight: The bold and large font for the currency and input fields ensures they stand out.
Colors: Neutral placeholder colors and transparent backgrounds maintain focus on the content.

Conclusion

This CurrencySection component is a simple yet effective addition to any financial app. It’s designed to handle core input requirements while keeping the UI visually appealing and functional.

Give it a try, customize it to suit your app’s style, and let your users enjoy a seamless experience!

Feel free to share your thoughts or questions in the comments.

"'value' is Unavailable: Introduced in iOS 12.0" Xcode Error in React Native

Oluwaseyi Komolafe — Sun, 21 Jan 2024 19:01:51 +0000

When working with React Native on iOS, you might encounter an error message like "'value' is unavailable: introduced in iOS 12.0." This issue arises when the deployment target specified in your project conflicts with the version of iOS you are trying to run your application on. In this quick guide, we'll explain the cause of this problem and provide a solution to fix it. You can just scroll down to the end if you are here for the solution though.

The Error

The error usually occurs when your React Native project's minimum deployment target is set to a version lower than the iOS version you are using for development. This discrepancy can lead to compatibility issues with certain APIs or features introduced in later iOS versions.

The Fix

To address this error, you can adjust the deployment target in your project's Podfile. The Podfile is a configuration file used by CocoaPods, a dependency manager for Swift and Objective-C projects.

Here's a step-by-step breakdown of the fix:

Set the iOS Version: Open your Podfile and add the following lines to set the iOS version:

   IOS_VERSION = '12.4'

Adjust Build Configurations: Inside the post_install block, iterate through the build configurations and set the deployment target:

   installer.pods_project.targets.each do |target|
     target.build_configurations.each do |config|
       config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = IOS_VERSION
       config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
       config.build_settings["ONLY_ACTIVE_ARCH"] = "YES"
     end

     # Special case for 'RCT-Folly'
     case target.name
     when 'RCT-Folly'
       target.build_configurations.each do |config|
         config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
       end
     end
   end

These adjustments ensure that the deployment target is set to iOS 12.4, excluding unnecessary architectures, and using only the active architecture.

Run CocoaPods Install: After modifying your Podfile, run the following command in your project's root directory:

   pod install

This command installs the specified CocoaPods dependencies and updates your project configuration.

Conclusion

By adjusting the iOS deployment target in your Podfile, you resolve the compatibility issue causing the "'value' is unavailable: introduced in iOS 12.0" error. This quick fix ensures your React Native project aligns with the iOS version you are developing for, allowing you to leverage the latest features and APIs seamlessly.

Happy coding! 🚀

Mastering Inactivity Logout in React Native

Oluwaseyi Komolafe — Sun, 21 Jan 2024 18:50:58 +0000

Welcome to another exciting journey in React Native development! In this guide, we're going to explore a crucial feature for both security and user experience: inactivity logout. By the end of this post, you'll be equipped with the knowledge to implement a robust solution for your React Native applications.

Setting Up the Basics:

Before we dive into the code, let's make sure we have the necessary tools. Install the 'moment' library to help with time-related operations. Open your terminal and run:

npm install moment

Tracking User Inactivity:

The first step is detecting user interactions. React Native provides the PanResponder API for handling touch events. Let's set up a PanResponder to track user activity:

import { PanResponder } from 'react-native';

const MyApp = () => {
  // Initialize the PanResponder
  const panResponder = React.useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderTerminationRequest: () => false,
      onShouldBlockNativeResponder: () => false,
    })
  ).current;

  // ... rest of your component logic
};

Implementing Inactivity Timeout:

With user activity being tracked, let's move on to implementing the inactivity timeout. We'll use moment to handle time calculations:

import moment from 'moment';

// ... inside your component

const MyApp = () => {
  // Ref to store the timestamp of the last interaction
  const lastInteraction = React.useRef(new Date());
  // Ref to store the ID of the inactivity timer
  const inactivityTimer = React.useRef(null);
  // Set the time limit for inactivity logout (5 minutes)
  const IDLE_LOGOUT_TIME_LIMIT = 5 * 60 * 1000;

  // Function to check inactivity and trigger logout if needed
  const checkInactive = React.useCallback(() => {
    // Check if the inactivity timer is already running
    if (inactivityTimer.current) {
      return;
    }
    // Start the inactivity timer
    inactivityTimer.current = setInterval(() => {
      // Get the current time
      const currentTime = moment();
      // Calculate the elapsed time since the last interaction
      const elapsedTime = moment(currentTime).diff(lastInteraction.current);

      // Check if the elapsed time exceeds the defined time limit
      if (elapsedTime >= IDLE_LOGOUT_TIME_LIMIT) {
        // Trigger the function to handle inactivity logout
        setIsInactive();
      }
    }, 1000); // Check every second
  }, [setIsInactive]);

  React.useEffect(() => {
    // Initialize inactivity tracking when the component mounts
    checkInactive();
    // Cleanup function to clear the inactivity timer on component unmount
    return () => clearInterval(inactivityTimer.current);
  }, [checkInactive]);

  // ... rest of your component logic
};

Handling App State Changes:

To ensure a seamless experience when the app goes into the background or returns to the foreground, let's handle app state changes:

import { AppState } from 'react-native';

// ... inside your component

React.useEffect(() => {
  // Function to handle changes in app state (background/foreground)
  const handleAppStateChange = (nextAppState) => {
    // If the app is back in the foreground, reset the timeout
    if (nextAppState === 'active') {
      resetTimeout();
    }
  };

  // Subscribe to app state changes
  AppState.addEventListener('change', handleAppStateChange);

  // Cleanup function to remove the subscription when the component unmounts
  return () => {
    AppState.removeEventListener('change', handleAppStateChange);
  };
}, [resetTimeout]);

Bonus Tip - Handling Keyboard Activity:

Consider scenarios where keyboard interactions might affect user activity. Reset the timeout when the keyboard is displayed or hidden:

import { Keyboard } from 'react-native';

// ... inside your component

React.useEffect(() => {
  // Subscribe to keyboard show and hide events
  const keyboardShowSubscription = Keyboard.addListener(
    'keyboardDidShow',
    handleKeyboardActivity
  );
  const keyboardHideSubscription = Keyboard.addListener(
    'keyboardDidHide',
    handleKeyboardActivity
  );

  // Cleanup function to remove the subscriptions when the component unmounts
  return () => {
    keyboardShowSubscription.remove();
    keyboardHideSubscription.remove();
  };
}, [handleKeyboardActivity]);

Congratulations! You've successfully implemented inactivity logout in your React Native application. This not only enhances security by automatically logging out inactive users but also contributes to a smoother user experience. Feel free to customize the timings and adapt the code to fit your app's specific needs.

Happy coding! 🚀

Voicenotes in React Native App

Oluwaseyi Komolafe — Fri, 23 Jun 2023 01:29:45 +0000

Hey there, fellow React Native enthusiast! Are you ready to add some voice recording and playback magic to your app? Well, you're in luck because I'm about to spill the beans on how to do it. So buckle up and let's dive into the wild world of voice notes!

Step 1: Dependencies, the BFFs of React Native

First things first, we need to gather our squad of dependencies. Think of them as your app's best friends forever. Open up your terminal and type in the following command:

npm install react-native-audio-recorder-player react-native-fs react-native-sound-player --save
These buddies will handle all the heavy lifting when it comes to recording and playing audio in your app. They've got your back!

Step 2: Bring in the A-Team

Alright, now that we've got our crew assembled, let's import them into our React Native component. At the top of your component file, add the following lines:

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import {
  AudioEncoderAndroidType,
  AudioSourceAndroidType,
  AVModeIOSOption,
  AVEncoderAudioQualityIOSType,
  AVEncodingOption,
} from 'react-native-audio-recorder-player';
import RNFS from 'react-native-fs';
import SoundPlayer from 'react-native-sound-player';

These imports are like the secret sauce that makes everything work smoothly. We couldn't do it without them!

Step 3: Get in the Zone, State of Mind

Now it's time to set up the stage for our audio adventure. Inside your functional component, declare the states we'll need for recording and playback. Let's keep it simple and sassy:

const VoiceNoteRecorder = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [audioPath, setAudioPath] = useState('');
  const [isPlaying, setIsPlaying] = useState(false);
  // Feel free to add more states if you want to party!
};

These states will keep track of whether we're recording, the path to the recorded audio, and if we're playing any audio. State management, baby!

Step 4: Let the Show Begin!

Now, here's where the real fun starts. We're going to implement the functions for starting, stopping, and sending our amazing voice recordings. Prepare to be amazed!

const startRecording = async () => {
  // Let's get creative and generate a unique audio name!
  const generateAudioName = () => {
    // Come up with a funky way to generate a name here!
  };

  const path = `${generateAudioName()}.aac`;
  // Set up the audio settings for our recording adventure
  const audioSet = {
    AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
    AudioSourceAndroid: AudioSourceAndroidType.MIC,
    AVModeIOS: AVModeIOSOption.measurement,
    AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
    AVNumberOfChannelsKeyIOS: 2,
    AVFormatIDKeyIOS: AVEncodingOption.aac,
  };
  const meteringEnabled = false;

  // Let the countdown begin...or not!
  await setCountdown(0);
  await setSeconds(0);
  await setMinutes(0);
  setStartCountdown(true);

  try {
    // Start the recording and get the audio URI
    const uri = await audioRecorderPlayer?.current?.startRecorder(
      path,
      audioSet,
      meteringEnabled,
    );
    setIsRecording(true);
    setAudio
    setAudioPath(uri);
  } catch (error) {
    console.log('Uh-oh! Failed to start recording:', error);
  }
};

Let's say we get distracted by a barking dog and have the voicenotes ruined and we need to start all over, the user should be able to cancel and start all over.

const stopRecording = async () => {
  setStartCountdown(false);
  try {
    // Stop the recording and see what we've got
    const result = await audioRecorderPlayer?.current?.stopRecorder();
    setIsRecording(false);
  } catch (error) {
    console.log('Oops! Failed to stop recording:', error);
  }
};

But in the case where we have recorded successfully and need to send out the voice note. we call the prepRecording function:

const prepRecording = async () => {
  setStartCountdown(false);
  try {
    // Stop the recording (for real this time)
    const result = await audioRecorderPlayer?.current?.stopRecorder();
    const fileContent = await RNFS.readFile(audioPath, 'base64');
    const fileInfo = await RNFS.stat(audioPath);
    const vnData = {
      fileCopyUri: fileInfo?.path,
      size: fileInfo?.size,
      type: 'audio/mpeg',
      name: `${generateAudioName()}.${getFileType(fileInfo?.path)}`,
    };
    const vnBase = `data:application/audio;base64,${fileContent}`;
    setAudioFile(vnData);
    setAudioBase(vnBase);
    // Now input code here to send your voicenote to websocket endpoint.
    setIsRecording(false);
  } catch (error) {
    console.log('Uh-oh! Failed to stop and send recording:', error);
  }
};

Alright, folks! It's time to put on a show. Let's play and pause our magnificent audio recordings.

const playAudio = async (newAudioUrl) => {
  if (active === newAudioUrl) {
    try {
      if (isPlaying) {
        await SoundPlayer.pause(); // Pause the audio if already playing
        setIsPlaying(false);
      } else {
        await SoundPlayer.resume(); // Resume playing the audio if paused
        setIsPlaying(true);
      }
    } catch (error) {
      console.log('Oh no! An error occurred while pausing/resuming audio:', error);
    }
  } else {
    try {
      if (isPlaying) {
        await SoundPlayer.stop(); // Stop the currently playing audio
      }
      dispatch(setPlaying(newAudioUrl)); // Set the new audio URL
      setIsPlaying(true);
      const soundData = await SoundPlayer.getInfo();
      setTotalDuration(soundData?.duration);
      SoundPlayer.addEventListener('FinishedPlaying', () => {
        setIsPlaying(false); // Reset the playing state when audio finishes playing
        dispatch(clearPlaying(newAudioUrl));
      });

      await SoundPlayer.playUrl(newAudioUrl); // Play the new audio
      const audio = await SoundPlayer.getInfo();
      setTotalDuration(audio?.duration);
    } catch (error) {
      console.log('Oops! An error occurred while playing audio:', error);
    }
  }
};

And that's a wrap! With these snippets of code, you'll be the star of the audio recording and playback show in your React Native app. Remember to add your own creative flair to generate unique audio names or customize the functionality as needed.

So go forth, unleash the power of voice notes, and let your app sing its heart out! Happy coding! 🎤🎶

Redux Toolkit Better Than Realm Database

Oluwaseyi Komolafe — Mon, 17 Apr 2023 08:29:31 +0000

When it comes to state management in React Native applications, you have a lot of options available. Two popular choices are Redux Toolkit and Realm Database. But let's be honest, if you want a state management tool that doesn't drive you crazy, Redux Toolkit is the clear winner and I am speaking from the experience of someone who had to join in on an existing project and had to see the Armageddon going on in the codebase because someone thought "Yeah, let's do Realm".
He could have made so many other bad decisions like maybe using Flipper😬, etc. but he chose Realm!!!

Well, i am here to tell you Redux Toolkit is better and here are ten reasons why:

Predictable state management
Do you want to avoid pulling your hair out over unexpected bugs and behavior? With Redux Toolkit, you can rest easy knowing that state changes are handled in a predictable way.
Centralized store
Who needs the headache of tracking down state changes scattered throughout your codebase? With Redux Toolkit's centralized store, you can easily track and debug issues.
Time-travel debugging
Why settle for regular debugging when you can go back in time and replay past actions? With Redux Toolkit, you can travel back in time to diagnose even the most complex bugs.
Code simplicity
Who has time to write convoluted code? With Redux Toolkit, you can simplify your code and focus on building your app.
Easy integration with React
Why waste time figuring out how to integrate your state management tool with React when you can use Redux Toolkit's built-in integration?
Rich ecosystem
Why reinvent the wheel? With Redux Toolkit's vast ecosystem of libraries and plugins, you can easily extend its functionality and build better apps.
Performance
Why settle for slow state management when Redux Toolkit is designed with performance in mind? It can handle even the largest and most complex state with ease.
Developer experience
Who needs documentation that makes you want to pull your hair out? With Redux Toolkit, you can enjoy clear and intuitive documentation that won't make you want to scream.
Compatibility
Why deal with compatibility issues? Redux Toolkit is compatible with a wide range of React Native libraries and frameworks, making it easy to integrate with your existing codebase.
Community support
Why go it alone? With Redux Toolkit's large and active community, you can easily find support and resources when you need them.

In summary, if you want a state management tool that won't make you want to pull your hair out, Redux Toolkit is the clear winner. With predictable state management, a centralized store, time-travel debugging, code simplicity, easy integration with React, a rich ecosystem, great performance, clear documentation, compatibility with other libraries, and a strong community, what's not to love? So, don't waste your time with Realm Database and embrace the superior state management offered by Redux Toolkit.

Well don't come at me, it's just a thought.🤷🏽‍♂️

Highlight Text in React Native [but with a twist]

Oluwaseyi Komolafe — Thu, 23 Feb 2023 12:00:36 +0000

Now i came across this issue and i thought it something i should share after getting past it.

A little back story

So, i am working on a chat platform using react native and i have to integrate the search in chat logic but the twist to it is that the text i am searching through is in an HTML form which makes it require a different approach.

So now you get the point, let's go straight to the code.

...
  const {width} = useWindowDimensions();
  const escapeRegExp = (text: string) => {
    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  };
  const replaceAll = (str: string, match: string, replacement: any) => {
    if (str === undefined || str === null) {
      return '';
    }
    return str.replace(new RegExp(escapeRegExp(match), 'g'), () => replacement);
  };
  let txt = replaceAll(textProps?.text, '\n\n', '<br><br>');
  txt = replaceAll(textProps?.text, '\n', '<br>');

  const highlightedText = txt
    .replace(
      new RegExp(textProps?.searchedWord, 'gi'),
      `<span style="background-color: #FF842D;">${textProps?.searchedWord}</span>`,
    );

...
  return (
  <View>
    <HTML
          contentWidth={width}
          source={{html: `<div style="color:white;">${highlightedText}</div>`}}
        />
    </View>
  );
};

...

So the escapeRegExp function is replacing all of the characters in text except for letters, numbers, and symbols.

The replaceAll function: The first line checks if str is undefined or null.
If it's not then it continues on to the next line where it performs a search and replace operation on str using escapeRegExp() and new RegExp().

Then we have the highlightedText constant which searches through to get the searched word and replace with a new span with a background color. Which is further put in the HTML tag from the react-native-render-html package. And there you have it. Leave a like if you think this is helpful. Thanks.

GraphQl with RTK Query

Oluwaseyi Komolafe — Mon, 30 Jan 2023 21:42:00 +0000

I am a huge fan of the RTKQuery and how it works with the fetchBaseQuery for calling REST APIs but the beauty of it is that it can work quite the same way for GraphQl endpoints as well. But sadly the documentation on the Redux Toolkit documentation is not broad enough, at least in the aspect of mutations.

So i think i can help with that - both queries and mutations.

Now, right into it, let's say we have our project setup and we have the services for a blog post set up to getBlogPosts from a graphql endpoint.

import {  createApi } from '@reduxjs/toolkit/query/react'
import { gql } from 'graphql-request'
import {graphqlRequestBaseQuery} from '@rtk-query/graphql-request-base-query'

export const postStatuses = ['draft', 'published', 'pending_review'] as const

export interface Post {
  id: string
  title: string
  author: string
  content: string
  status: typeof postStatuses[number]
  created_at: string
  updated_at: string
}

export interface Pagination {
  page: number
  per_page: number
  total: number
  total_pages: number
}

export interface GetPostsResponse extends Pagination {
  data: {
    posts: Post[]
  }
}

export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({
    url: '/graphql',
  }),
  endpoints: (builder) => ({
    getPosts: builder.query<
      GetPostsResponse,
      { page?: number; per_page?: number }
    >({
      query: ({ page, per_page }) => ({
        document: gql`
          query GetPosts($page: Int = 1, $per_page: Int = 10){
            posts(page: $page, per_page: $per_page) {
              id
              title
            }
          }
        `,
        variables: {
          page,
          per_page,
        },
      }),
    }),
  }),
})
export const { useGetPostsQuery } = api

Now to post a blog, i.e. make a mutation we will need to further add another block of code.

   addPost: builder.mutation<any, any>({
      query: ({id, title, content}) => ({
        document: gql`
          mutation addPost($id: Int!, $title: String!, content: String!) {
            addPost(id: $id, title: $title, content: $content)
          }
        `,
        variables: {
          id,
          title,
          content,
        },
      }),
    }),

...
...
export const { useGetPostsQuery, useAddPostMutation } = api

and the same can work for deleting posts and whatever mutations we need to make.

I hope this helps someone that needs it, I would also like to know what alternatives you use in calling your graphql APIs.

Get Data From Store For RTK Queries

Oluwaseyi Komolafe — Sun, 22 Jan 2023 10:11:12 +0000

Redux at the beginning was a lot to phantom, at least for me. I hated Redux to be honest. All the folder structuring and whatnot.
I always hoped not to have to use it, until, the emergence of the redux toolkit, coupled with the RTK Query for making endpoint call.

Things have become more easier and productivity has increased.

Working with the RTK Query to make CRUD request is one of the best things to ever happen since invention of pizza😅.

Well one thing that turns out to be a blocker for most people I've met is accessing the redux state while making queries or mutation.

It can be tricky though as the documentation doesn't really do justice to it. So quickly I'll show you how to access let's say a stored access token from the redux state when accessing a protected API route.

1. Creating A Token Slice

import {createSlice} from '@reduxjs/toolkit'; 
 const initialState = { 
   auth: <any>{},
}; 
 const authSlice = createSlice({ 
   name: 'auth', 
   initialState, 
   reducers: { 
     setAuth: (state, action) => { 
       return {...state, auth: action.payload}; 
     }, 
     clearAuth: () => { 
       return {auth: {}}; 
     },
  }, 
 }); 

 const {reducer, actions} = authSlice; 
 export const { 
   setAuth, 
   clearAuth,} = actions; 
 export default reducer;

Here now we've created a slice that we can dispatch to store the response of a log in action by the user.

We can then proceed to -
2. access it in our createApi query.

  baseQuery: fetchBaseQuery({ 
     baseUrl, 
     prepareHeaders: (headers, {getState}) => { 
       const token = (getState() as RootState)?.auth?.auth?.token; 
       if (token) { 
         headers.set('Authorization', `Bearer ${token}`); 
       } 
       return headers; 
     },

Above we are using the prepareHeader parameter to access the redux state i.e. getState and we follow the chain till we hit our access token.

Adding this in the prepareHeader prop of rtk's createApi gives all our queries and mutations access to the token.

This method works, other than the regular use selector because our query or mutation logic is not going to be a component and this limits the use of React Hooks.

Let me know if this helps you.

Chrome DevTools: Port forwarding allows localhost URLs to work on mobile

Oluwaseyi Komolafe — Sat, 04 Sep 2021 07:19:31 +0000

Port forwarding lets you view your local website, even it's hosted on a custom domain, directly on your android device.

Chrome to Phone my localhost URL from desktop
Remote Debug the mobile localhost page and enable port forwarding
Refresh and observe that no command line was needed!

Set up remote debugging between your development machine and your Android device. When you're finished, you should see your Android device in the list.
Click Port forwarding button. localhost:8080 is set up by default.
Check Enable port forwarding. If you want to set up other ports, follow the steps 4 and 5. Otherwise skip to step 6.
In the Port textfield on the left, enter the localhost port number from which you want to be able to access the site on your Android device. For example, if you wanted to access the site from localhost:5000 you would enter 5000.
In the IP address and port textfield on the right, enter the IP address or hostname on which your site is running on your development machine's web server, followed by the port number. For example, if your site is running on localhost:7331 you would enter localhost:7331.
Click Done.

You can read the full procedure on the official DevTools Documentation

DEV Community: Oluwaseyi Komolafe

No Copilot? No Problem! Get Free AI in VSCode Now

Step 1: Set Up Your Groq Account

Step 2: Install the Continue Extension

Step 3: Configure the Continue Extension

Step 4: Start Using Your AI Partner!

Why This Is a Game-Changer:

How to Build a Centered Input Field for Amounts in React Native

What the CurrencySection Does

Implementation

Highlights of the CurrencySection Component

Styling Choices

Conclusion

"'value' is Unavailable: Introduced in iOS 12.0" Xcode Error in React Native

The Error

The Fix

Conclusion

Mastering Inactivity Logout in React Native

Setting Up the Basics:

Tracking User Inactivity:

Implementing Inactivity Timeout:

Handling App State Changes:

Bonus Tip - Handling Keyboard Activity:

Voicenotes in React Native App

Redux Toolkit Better Than Realm Database

Highlight Text in React Native [but with a twist]

A little back story

GraphQl with RTK Query

Get Data From Store For RTK Queries

Chrome DevTools: Port forwarding allows localhost URLs to work on mobile

What the `CurrencySection` Does

Highlights of the `CurrencySection` Component