DEV Community: Vicky Vasilopoulou

Template Design Pattern

Vicky Vasilopoulou — Thu, 01 May 2025 09:55:35 +0000

Hello reader!

I hope you feeling good today because you are gonna learn something pretty cool! Well at least thats how I see it...

Right, so I wont go into details explaining in theory what it is I am pretty sure you checked that already and you want to see an implementation around it, right?

So, I'm going to walk you through an example from my work..

So I had two selectors from Redux that had same logic and conditions apart from a small part that makes them quite distinguished.

Selector A.

export const selectSomeSelectorNameForNotDomesticUser = createSelector(
  selectSomeLocation,
  selectSomeDestination,
  selectUserCountry,
  (originUser, destinationUser, userCountry) => {
    const userOriginCountryCode = originUser.countryCode;
    const userDestinationCountryCode = destinationUser.countryCode;

    if (
      userCountry === userOriginCountryCode ||
      userCountry === userDestinationCountryCode
    ) {
      return false;
    }

    return true;
  }
);

Selector B.

export const selectSomeSelectorNameForDomesticUser = createSelector(
  selectSomeLocation,
  selectSomeDestination,
  selectUserCountry,
  (originUser, destinationUser, userCountry) => {
    const userOriginCountryCode = originUser.countryCode;
    const userDestinationCountryCode = destinationUser.countryCode;

    if (
      userCountry === userOriginCountryCode ||
      userCountry === userDestinationCountryCode
    ) {
      return true;
    }

    return false;
  }
);

So you can see that the skeleton of the selectors and the main logic is the same, however are a bit different in the interpretation. For that I thought it would be a good idea to utilise the Template Method Pattern, also because I was curious about the implementation.

So the first thing you do is to create the Abstract class that holds the main functionality and then the sub-class that they have to interpret accordingly that logic.

Abstract Component:

The abstract class contains the template method and the private methods in common. The abstract class contains the code basically that is duplicated or is common.
So here we are using the evaluate method, because we want to focus on performing a specific operation or calculation, in our case to evaluate or determine if a user is domestic or not based on their country/ location.

abstract class UserDomesticEvaluator {
  protected abstract shouldReturn(isMatch: boolean): boolean;

  public evaluate(
    originUser: Location | undefined,
    destinationUser: Location | undefined,
    userCountry: string | undefined
  ): boolean {
    const userOriginCountryCode = originUser.countryCode;
    const userDestinationCountryCode = destinationUser.countryCode;

    if (!userCountry || (!originLocation && !destinationLocation)) {
      return this.shouldReturn(false);
    }

    const isMatch =
      userCountry === userOriginCountryCode ||
      userCountry === userDestinationCountryCode;

    return this.shouldReturn(isMatch);
  }
}

Then the two sub-classes

export class IsDomesticUser extends UserDomesticEvaluator {
  protected shouldReturn(isMatch: boolean): boolean {
    return isMatch;
  }
}

export class IsNotDomesticUser extends UserDomesticEvaluator {
  protected shouldReturn(isMatch: boolean): boolean {
    return !isMatch;
  }
}

Then in the code where you are using it you can just create a new instance of this class:

const isDomesticUser = new IsDomesticUser()

isDomesticUser.evaluate(your params here: origin, destination, usercountry)

Happy coding!

State Management with Zustand

Vicky Vasilopoulou — Fri, 24 May 2024 12:53:35 +0000

Heya again!

As we all know state management can be challenging, especially when we have parent with nested children and passing props down from a parent component to children..and normally in the past I would use context from React together with a provider..but it happened that somewhere in the middle between the children the state wasn't updating correctly. So I was looking around for an alternative and came across with zustand

I was working on a table with some user information and a sidebar that shows the information of the user that you click, as in picture below.

So I created a store:




import { create } from 'zustand'

type User = {
  id: string
  name: string
  address: string
  emailAddress: string
}

type UsersStore = {
  selectedUser: Applicant | null
  handleOnClick: (user: User) => void
}


export const useUsersStore = create<UsersStore>((set) => ({
  selectedUser: null,
  handleOnClick: (user) => set({ selectedUser: user }),
}))

Then on the child component user I just retrieve the value that I needed.




type UserProps = {
  user: UserModel
}

export default function UserProfile({ user }: UserProps) {
  const { handleOnClick } = useUsersStore()

  return (
    <TableRow
      key={user.id}
      className="cursor-pointer"
      onClick={() =>
        handleOnClick({
          id: user.id,
          name: user.name,
          address: user.address,
          emailAddress: user.emailAddress,
        })
      }
    >

Then on the sidebar I retrieve the user object.




export default function UserProfileSidebar() {
  const { selectedUser } = useUsersStore()

  return (
    <div className="flex flex-col" id={selectedUser?.id}>

Now when I click a user's row I can see the users details on the sidebar on the right.

Of course on the parent component i just pass the user object such as:




 {usersData.map((applicant) => (
                <UserProfile key={user.id} user={user} />
              ))}

In the case you can just retrieve the value you need from the store and you wont have to worry about passing props between components plus is safer, easier and less costly.

React Query Tanstack, axios and customised hooks

Vicky Vasilopoulou — Sun, 21 Jan 2024 20:33:54 +0000

Hello guys!😀

Thank you for reading my article!

This one is short but I hope you find some value to it and give you some ideas to be more creative with your code ❤️

The concept is to create the connection between the frontend app + graphql + server for transferring data back and forth. I am gonna share an example doing a GET request.

Firstly we need to set up our http-client


const instance = axios.create({
  baseURL: config.ApiBaseUrl,
  headers: {
    'Content-type': 'application/json',
  },
})

export default setupYourInterceptors(instance)

In the code below your ApiBaseUrl could be your actual API. In the case below I am storing it in this format.


const { YOUR_API_BASE_URL } = = import.meta.env

const config: Configuration = {
  ApiBaseUrl: 'YOUR_API_BASE_URL' || 'default'
}

Axios interceptors allow you to run your code or modify the request and/or response before the request is sent or after the response is received.

onRequest is a function that will be called before each request is sent. It can modify the request configuration.
onResponseError is a function that will be called if the response results in an error. This allows for centralized error handling.


function setupYourInterceptors(axiosInstance: AxiosInstance): AxiosInstance {
  axiosInstance.interceptors.request.use(onRequest, undefined)

  axiosInstance.interceptors.response.use(undefined, onResponseError)

  return axiosInstance
}

Now lets create a book service. Lets say we are searching for books.


const endpoint: string = '/books'

const getBooks = async (): Promise<BooksResponse[]> => {
  const { data: response } = await httpClient.get<BooksResponse[]>(`${endpoint}`)
  if (response) {
    return response.items
  }
  throw new Error('Data is undefined')
}

export default getBooks

Lastly our customisable hook for fetching books.

function useGetBooks() {
  return useQuery({
    queryKey: ['books'],
    queryFn: () => getBooks(),
  })
}

Thank you for reading it 😀

Simple Github Workflow for Lint - Prettier & Jest (yarn)

Vicky Vasilopoulou — Sun, 18 Dec 2022 13:05:23 +0000

For this workflow make sure you add your own version of node that you have installed on your machine


name: Master Preview

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  run-linters:
    name: Lint & Jest
    runs-on: ubuntu-latest
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: v16.6.1
      - name: Install dependencies
        run: yarn --prefer-offline
      - name: Run linters
        run: yarn lint
      - name: Test
        run: yarn test
  prettier:
    name: Prettier
    runs-on: ubuntu-latest
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: v16.6.1
      - name: Install dependencies
        run: yarn --prefer-offline
      - name: Run Prettier
        run: yarn run format
  build:
    runs-on: ubuntu-latest
    name: Build and Test
    steps:
      - uses: actions/checkout@v2
        name: Check out repository
      - uses: actions/setup-node@v1
        name: Set up Node.js
        with:
          node-version: 16.10.0

React Authentication with Firebase v9, TypeScript and Yup.

Vicky Vasilopoulou — Wed, 13 Jul 2022 11:55:11 +0000

Hi guys,

This is a step by step guide on how you can build and authentication login form with firebase and react. I have done it a couple of times and I want to share my experience as I struggled when I first did it.

So if you dont know how to use Firebase is fine they have really good documentation but first you go to their website make an account and I will show you the steps...

Once you create an account you can go to the console and create a new project as picture shows below.

Insert the name of your project and the rest of the details that it requests once you are here:

Then on the right side below the subheader 'Get started by adding Firebase to your app' click the third icon which is the web(</>) symbol.

You should be seeing this:

What you see are the keys that you are going to use on your react app to connect it with firebase.

You can access those keys anytime simply when you click on project settings as you see below.

You need to enable on the project the email and password authentication for email/password:

I am assuming you know how to create a react app but if not you can check documentation here but make sure you have TypeScript installed.

Then based on firebase documentation you need to link and connect your project. You can create on your root of your project first a .env file and you have to add those variables:

Each value corresponds to the values you see from the picture above.

REACT_APP_FIREBASE_API_KEY=" "
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""

For this app I am using firebase v9.

Now on your react app you need to install Firebase SDK and login. Install firebase and firebase tools on your machine.Then you initialise your app with `firebase -init` and follow the instructions from their documentation so that you can initialise your project that is on the cloud, is quite simple and straightforward. Then try and do `firebase login` it should redirect you and then it will mean that you are connected.

Once this is done, create a firebase.ts file.

mport { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const FIREBASE_CONFIG = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  appId: process.env.REACT_APP_FIREBASE_ID,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
}

const firebaseApp = initializeApp(FIREBASE_CONFIG)

export const auth = getAuth(firebaseApp)

Then you create an AuthProvider file `Authprovider.ts`


import React, {
  ReactNode,
  useEffect,
  useState,
  useContext,
  createContext,
} from 'react'
import { auth } from '../config/firebase'
import {
  Auth,
  UserCredential,
  User,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  sendPasswordResetEmail,
} from 'firebase/auth'

export interface AuthProviderProps {
  children?: ReactNode
}

export interface UserContextState {
  isAuthenticated: boolean
  isLoading: boolean
  id?: string
}

export const UserStateContext = createContext<UserContextState>(
  {} as UserContextState,
)
export interface AuthContextModel {
  auth: Auth
  user: User | null
  signIn: (email: string, password: string) => Promise<UserCredential>
  signUp: (email: string, password: string) => Promise<UserCredential>
  sendPasswordResetEmail?: (email: string) => Promise<void>
}

export const AuthContext = React.createContext<AuthContextModel>(
  {} as AuthContextModel,
)

export function useAuth(): AuthContextModel {
  return useContext(AuthContext)
}

export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
  const [user, setUser] = useState<User | null>(null)

  function signUp(email: string, password: string): Promise<UserCredential> {
    return createUserWithEmailAndPassword(auth, email, password)
  }

  function signIn(email: string, password: string): Promise<UserCredential> {
    return signInWithEmailAndPassword(auth, email, password)
  }
  function resetPassword(email: string): Promise<void> {
    return sendPasswordResetEmail(auth, email)
  }
  useEffect(() => {
    //function that firebase notifies you if a user is set
    const unsubsrcibe = auth.onAuthStateChanged((user) => {
      setUser(user)
    })
    return unsubsrcibe
  }, [])

  const values = {
    signUp,
    user,
    signIn,
    resetPassword,
    auth,
  }
  return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>
}

export const useUserContext = (): UserContextState => {
  return useContext(UserStateContext)

Then you need to wrap your App.tsx with the provider we just made like this:


function App(): JSX.Element {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
         ..........

           .......
           <AuthProvider/>

Now are signUp.tsx file:

Note:

For the Forms I am using Yup and customised Form such as

FormGroup or FormActions. You can find the files here:

https://codesandbox.io/s/form-yup-typescript-e7yum


import React, { useState } from 'react'
import { Input, ThemeUIStyleObject, Grid, Button, Text, Alert } from 'theme-ui'
import { Form, Formik } from 'formik'
import * as Yup from 'yup'
import { useHistory } from 'react-router-dom'
import { FormGroup } from '../FormGroup/FormGroup'
import { DASHBOARD_PAGE_PATH, SIGN_IN_PAGE_PATH } from '../../config/paths'
import { useAuth } from '../../providers/AuthProvider'
import { passwordValidation } from '../../utils/passwordValidation/passwordValidation'
import { FormWrapper } from '../FormWrapper/FormWrapper'
import { Link } from 'react-router-dom'

interface SignUpFormValues {
  email: string
  password: string
  repeatPassword: string
}

const SignUpSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: passwordValidation,
  repeatPassword: Yup.string().when('password', {
    is: (val: string) => val && val.length > 0,
    then: Yup.string()
      .oneOf([Yup.ref('password')], 'Both passwords need to be the same')
      .required('Required'),
  }),
})

export interface SignUpProps {
  sx?: ThemeUIStyleObject
}

const SignUp = ({ sx }: SignUpProps): JSX.Element => {
  const { signUp } = useAuth()
  const [formError, setFormError] = useState<string>('')
  const [formSubmitting, setFormSubmitting] = useState<boolean>(false)
  const history = useHistory()

  return (
    <FormWrapper title="Create account" sx={{ ...sx }}>
      <Formik
        initialValues={{
          email: '',
          password: '',
          repeatPassword: '',
        }}
        onSubmit={async (values: SignUpFormValues) => {
          setFormSubmitting(true)
          try {
            await signUp(values.email, values.password)
            try {
              history.push(DASHBOARD_PAGE_PATH)
            } catch (error) {
              console.log(`🚀 ~ signup error`, error)
            }
          } catch (error) {
            console.log(error)
            setFormError(formError)
            setFormSubmitting(false)
          }
        }}
        validationSchema={SignUpSchema}
      >
        {({ getFieldProps }) => (
          <Form>
            <FormGroup label="Email address" name="email">
              <Input
                sx={{ borderColor: 'rgb(209, 218, 230)' }}
                {...getFieldProps('email')}
                id="email"
              />
            </FormGroup>
            <FormGroup label="Password" name="password">
              <Input
                sx={{
                  borderColor: 'rgb(209, 218, 230)',
                }}
                {...getFieldProps('password')}
                type="password"
                id="password"
              />
            </FormGroup>
            <FormGroup label="Repeat password" name="repeatPassword">
              <Input
                sx={{
                  borderColor: 'rgb(209, 218, 230)',
                }}
                {...getFieldProps('repeatPassword')}
                type="password"
                id="repeatPassword"
              />
            </FormGroup>
            <Grid>
              <Button type="submit" sx={{ mt: 1 }} variant="buttons.primary">
                Sign up
              </Button>
              <Link to={{ pathname: SIGN_IN_PAGE_PATH }}>
                <Text
                  sx={{
                    display: 'inline-block',
                    textDecoration: 'none',
                    textAlign: 'center',
                    margin: '0 auto',
                    fontSize: 2,
                    color: 'brand',
                  }}
                >
                  Do you already have an account? Please login in here.
                </Text>
              </Link>
            </Grid>
            {formError && <Alert variant="error">{formError}</Alert>}
          </Form>
        )}
      </Formik>
    </FormWrapper>
  )
}
export default SignUp

Now on our sign in component:

I am using Formik cause it has ready function and you write less code.. You can check it out here:


import React, { useState } from 'react'
import { Input, Button, Grid, Text, ThemeUIStyleObject, Alert } from 'theme-ui'
import { Link } from 'react-router-dom'
import { useHistory } from 'react-router-dom'
import { Form, Formik, ErrorMessage } from 'formik'
import * as Yup from 'yup'
import { DASHBOARD_PAGE_PATH, SIGN_UP_PAGE_PATH } from '../../config/paths'
import { useAuth } from '../../providers/AuthProvider'
import { FormGroup } from '../../components/FormGroup/FormGroup'
import { FormWrapper } from '../FormWrapper/FormWrapper'

export interface SignInProps {
  sx?: ThemeUIStyleObject
}

interface SignInFormValues {
  email: string
  password: string
}

const SignInSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().required('Required').min(8).max(200),
})

export const SignIn = ({ sx }: SignInProps): JSX.Element => {
  const { signIn } = useAuth()
  const [formSubmitting, setFormSubmitting] = useState<boolean>(false)
  const [formError, setFormError] = useState<string>('')
  const history = useHistory()

  return (
    <FormWrapper title="Welcome back" sx={{ ...sx }}>
      <Formik
        initialValues={{
          email: '',
          password: '',
        }}
        onSubmit={async (values: SignInFormValues) => {
          setFormSubmitting(true)
          try {
            await signIn(values.email, values.password)
            history.push(DASHBOARD_PAGE_PATH)
          } catch (error: unknown) {
            let errorMessage = 'error.unknown'
            if (typeof error === 'string') {
              errorMessage = error.toUpperCase()
            } else if (error instanceof Error) {
              errorMessage = error.message
            }
            setFormError(errorMessage)
            setFormSubmitting(false)
          }
        }}
        validationSchema={SignInSchema}
      >
        {({ getFieldProps }) => (
          <Form>
            <FormGroup label="You email address" name="email">
              <Input
                sx={{ borderColor: 'rgb(209, 218, 230)' }}
                {...getFieldProps('email')}
                id="email"
              />
            </FormGroup>
            <FormGroup label="Password" name="password">
              <Input
                sx={{ width: '400px', borderColor: 'rgb(209, 218, 230)' }}
                {...getFieldProps('password')}
                type="password"
                id="password"
              />
            </FormGroup>
            <Grid>
              <Button type="submit" sx={{ mt: 1 }} variant="buttons.primary">
                Log in
              </Button>
              <Link to={SIGN_UP_PAGE_PATH}>
                <Text
                  sx={{
                    display: 'inline-block',
                    color: 'brand',
                    textDecoration: 'none',
                    fontSize: 2,
                  }}
                >
                  Dont have an account? Please Sign up here.
                </Text>
              </Link>
            </Grid>
            <br />
            {formError && <Alert variant="error">{formError}</Alert>}
          </Form>
        )}
      </Formik>
    </FormWrapper>
  )
}

Now on your console you should be seeing on the Authentication tab at the email and and firebase token that has been created.

The Adapter Pattern?

Vicky Vasilopoulou — Fri, 13 May 2022 08:46:04 +0000

So recently I came across with a challenge where I had to create a way of allowing users to grant permission for camera/ mic in a web app and also on an android using the browser API and for the android is was a cordova plugin. In android is a little bit different with the same concept. So firstly need to check if the permission from the browser is allowed if not then to request permission. The logic is the sam. So instead of repeating myself, as I had to create (if I wouldn't use the adapter pattern two different Providers as well, plus use repetitive code on the files I want to use the adapter) I found out about the adapter pattern. That concept is one of the engineering patterns which is quite interesting, a bit difficult to get your head around the first time but then you can see how beneficial it can be plus next time you do it is much easier.

I will give you an example on a recent project and hope that helps you to use it on your work. I also use the mic-check package for microphone check, cause I saw it somewhere and thought it was cool. The example below is not fully finished but you will get the idea...

type AdapterType = {
  requestCameraPermission: () => void,
  requestMicrophonePermission: () => void,
  hasCameraPermission: () => Promise<boolean>,
  hasMicrophonePermission: () => Promise<boolean>,
};

export class PermissionsApiAdapter {
   hasCameraPermission = () =>
    navigator.permissions.query({ name: 'camera' }).then((permissionObj) => {
      console.log('permissionObj state:', permissionObj.state);

      return permissionObj.state === 'granted';
    });

  hasMicrophonePermission = () =>
    navigator.permissions
      .query({ name: 'microphone' })
      .then((permissionObj) => {
        console.log(permissionObj.state);

        return permissionObj.state === 'granted';
      });

  requestCameraPermission = () => {
    const cameraPermissions =
      navigator.mediaDevices &&
      navigator.mediaDevices.getUserMedia({
        video: true,
      });

    if (cameraPermissions) {
      return cameraPermissions
        .then(() => {
          alert('Accept permissions camera');
          console.log('request camera permissions enabled');

          return Promise.resolve(true);
        })
        .catch((err) =>
          Promise.reject(new Error(`${err.name} : ${err.message}`))
        );
    }

    return Promise.resolve(false);
  };

  requestMicrophonePermission = () => {
    const audioPermissions =
      navigator.mediaDevices &&
      navigator.mediaDevices.getUserMedia({
        audio: true,
      });

    if (audioPermissions) {
      return audioPermissions
        .then(() => {
          alert('Accept permissions microphone');
          console.log('request microphone permissions enabled');

          return Promise.resolve(true);
        })
        .catch((err: MediaPermissionsError) => {
          const { type } = err;

          if (type === MediaPermissionsErrorType.SystemPermissionDenied) {
            console.log(
              'browser does not have permission to access camera or microphone'
            );
          } else if (type === MediaPermissionsErrorType.UserPermissionDenied) {
            console.log('user didnt allow app to access camera or microphone');
          } else if (
            type === MediaPermissionsErrorType.CouldNotStartVideoSource
          ) {
            console.log(
              'camera is in use by another application (Zoom, Skype) or browser tab (Google Meet, Messenger Video'
            );
          }

          return Promise.reject(new Error(`${err.name} : ${err.message}`));
        });
    }

    return Promise.resolve(false);
  };
}

class WebAppsPermission {
  constructor(permissionAdapter: AdapterType) {
    this.permissionAdapter = permissionAdapter;
  }

  permissionAdapter: AdapterType;

  requestCameraPermission = () =>
    this.permissionAdapter.requestCameraPermission();
  requestMicrophonePermission = () =>
    this.permissionAdapter.requestMicrophonePermission();
  hasCameraPermission = () => this.permissionAdapter.hasCameraPermission();
  hasMicrophonePermission = () =>
    this.permissionAdapter.hasMicrophonePermission();
}

export default WebAppsPermission;

Now for the Android Apps the adapter has same logic with a bit different functionality.


type AndroidAdapterType = {
  requestCameraPermission: () => void,
  requestMicrophonePermission: () => void,
  hasCameraPermission: () => Promise<boolean>,
  hasMicrophonePermission: () => Promise<boolean>,
};

export class AndroidPermissionsApiAdapter {
   hasCameraPermission = (): Promise<boolean> =>
    new Promise((resolve, reject) => {
      window.cordova.plugins.diagnostic.isCameraAuthorized(
        (authorized) => {
          console.log(
            `App is ${
              authorized ? 'authorized' : 'denied'
            } access to the camera`
          );

          resolve(authorized);
        },
        (error) => {
          console.error(`The following error occurred: ${error}`);
          reject(error);
        },
        false
      );
    });

  hasMicrophonePermission = (): Promise<boolean> =>
    new Promise((resolve, reject) => {
      window.cordova.plugins.diagnostic.isMicrophoneAuthorized(
        (authorized) => {
          console.log(
            `App is ${
              authorized ? 'authorized' : 'denied'
            } access to the microphone`
          );
          resolve(authorized);
        },
        (error) => {
          console.error(`The following error occurred: ${error}`);
          reject(error);
        }
      );
    });

  requestCameraPermission = (): Promise<boolean> =>
    new Promise((resolve, reject) => {
      window.cordova.plugins.diagnostic.requestCameraAuthorization(
        (status) => {
          console.log(
            `Authorization request for camera use was ${
              status ===
              window.cordova.plugins.diagnostic.permissionStatus.GRANTED
                ? 'granted'
                : 'denied'
            }`
          );
          resolve(status);
        },
        (error) => {
          console.error(error);
          reject(error);
        },

        false
      );
    });

  requestMicrophonePermission = (): Promise<boolean> =>
    new Promise((resolve, reject) => {
      window.cordova.plugins.diagnostic.requestMicrophoneAuthorization(
        (status) => {
          if (
            status ===
            window.cordova.plugins.diagnostic.permissionStatus.GRANTED
          ) {
            console.log('Microphone use is authorized');
          }

          resolve(status);
        },
        (error) => {
          console.error(error);
          reject(error);
        }
      );
    });
}

class AndroidPermissions {
  constructor(permissionAdapter: CordovaAdapterType) {
    this.permissionAdapter = permissionAdapter;
  }

  permissionAdapter: AndroidAdapterType;

  requestCameraPermission = () =>
    this.permissionAdapter.requestCameraPermission();
  requestMicrophonePermission = () =>
    this.permissionAdapter.requestMicrophonePermission();
  hasCameraPermission = () => this.permissionAdapter.hasCameraPermission();
  hasMicrophonePermission = () =>
    this.permissionAdapter.hasMicrophonePermission();
}

export default AndroidPermissions;

And when I wanted to use it in a specific folder in my case was inside a Context Provider

const adapter = new PermissionsApiAdapter();
    const cordovaAdapter = new AndroidPermissionsApiAdapter();
    const mediaPermission = new WebAppsPermission(
      window.cordova ? cordovaAdapter : adapter
    );

So now I can use the adaptors on my Provider, or at any place of my code I want to.

Hope that makes sense ☺️

How to create an auth login system with axios interceptors (TypeScript) PART I

Vicky Vasilopoulou — Tue, 26 Apr 2022 16:37:29 +0000

Hi guys!

In this article I am sharing a small process of an auth system using axios interceptors. The concept below, is that, when you submit your email or password you want to check if that user exists on the server and if the user is authenticated then the user would be able to navigate to other pages.

More information about interceptors you can check here.

You could simply do a post request inside your SignIn component however if one day lets say axios doesn't exist anymore and you want to be able to change what you used in just one place but not the logic behind it then interceptors is the way to go. Also this is a concept recently came across called [MVP] - minimum viable product - LINK, still trying to get my head around it but is good to know.

By the way the article is giving you an idea how that works of course you would need to add your own bits and pieces, api etc...

So let's take a step back.

What I am sharing below is:

Setup the connection with a server.
Create a service layer

Set up with a server

Create your client, which is the connection with your API.

Below the REACT_APP_API_URL could be your own API saved on your .env file or .env.local

interface ConfigType {
  ApiUrl: string
}

const config: ConfigType = {
  ApiUrl: process.env.REACT_APP_API_URL || '',
}

export default config

Here we have our http-client file.


import axios from 'axios'
import config from './config'
import setupInterceptorsTo from './http-client-interceptor'

const instance = axios.create({
  baseURL: config.ApiUrl,
  headers: {
    'Content-type': 'application/json',
  },
})

export default setupInterceptorsTo(instance)

Create the service layer

Below we have the interceptors which will handle our error messages because there is always different type of errors.


import { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
import { toast } from 'react-toastify'
import { isObject, isEmpty } from 'lodash'

const API_DEFAULT_MESSAGE_REQUEST = 'The request is invalid'

function handleError(serverError: any) {
  if (isObject(serverError)) {
    Object.entries(serverError).forEach(([, value]) => {
      const errorMessage = isEmpty(value) ? API_DEFAULT_MESSAGE_REQUEST : value
      toast.error(`${errorMessage}`)
    })
  }
}

const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
  return config
}

const onResponseError = (error: AxiosError): Promise<AxiosError> => {
  handleError(error?.response?.data)
  return Promise.reject(error)
}

export default function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
  axiosInstance.interceptors.request.use(onRequest, undefined)

  axiosInstance.interceptors.response.use(undefined, onResponseError)

  return axiosInstance
}

Here is where we actually send a request to the server in this case a post request.


import { BehaviorSubject } from 'rxjs'
import { isNull } from 'lodash'
import httpClient from '../../shared/http-client'

interface LoginRequestModel {
  email: string
  password: string
}

const currentUserSubject = isNull(localStorage.getItem('current_user'))
  ? new BehaviorSubject(null)
  : new BehaviorSubject(JSON.parse(localStorage.getItem('current_user')!))

export const currentUserValue = currentUserSubject.value

export async function login(requestData: LoginRequestModel): Promise<string> {
  const response = await httpClient.post('/auth/login', requestData)

  const { access_token: accesstoken } = response.data

  return accesstoken
}

Finally you can call your login function on your SignIn component and the only thing you need to do is to use it in an async way where await login(data). Thats the only input it gets since above you have the schema for this function and it does all the work for us isolated.

Fetching Data with React Query and TypeScript II

Vicky Vasilopoulou — Tue, 01 Mar 2022 15:31:03 +0000

Below you can see a way of fetching data using React query and TypeScript.

React Query Link
You can use Transform tool that transforms JSON files to TypeScript and much more. This tool is quite handy when you have nested data.

You need to create your graphql Client.
In my case I used the graphql-request:

import { GraphQLClient } from 'graphql-request'

const endpoint = `ADD YOUR ENDPOINT HERE`
export const graphQlClient = new GraphQLClient(endpoint)

Then you can make your useGqlQuery.ts file.

import { QueryKey, useQuery, UseQueryResult } from 'react-query';
import { graphQlClient } from '../../graphql/client';

export const useGqlQuery = <ResponseData = unknown, Variables = unknown>(
  queryKey: QueryKey,
  query: string,
  variables?: Variables,
): UseQueryResult<ResponseData, Error> => {
  return useQuery(queryKey, async () => {
    try {
      const response = await graphQlClient.request(query, variables);
      return response;
    } catch (error) {
      console.log(error);
    }
  });
};

Lets say we have a list of doctors that we want to fetch.
First we need to create the types of the data that we get as a model.

export interface DoctorsDataModel {
  doctors: Doctor[];
}

export interface Doctor {
  first_name: string;
  last_name: string;
  doctor_id: string;
}

We can create our custom hook that will fetch our data.

export const useFetchDoctors = () => {
  const getDoctorsData = useGqlQuery<DoctorsDataModel>('getDoctorsData', GET_ALL_DOCTORS);

  const doctorsData = useMemo(() => getDoctorsData?.data?.doctors, [getDoctorsData]);
  return {
    doctorsData,
  };
};

Then on the component you want to use this data you can bring it simply as:

const { doctorsData } = useFetchDoctors();

For mutations the schema is a little bit different:


export const useMutation = <Response = unknown, Variables = unknown>(
  query: string,
  sideEffects?: UseMutationOptions<Response, Error, Variables, unknown>,
): UseMutationResult<Response, Error, Variables, unknown> => {
  return useMutation(async (variables) => {
    const yourToken = 'YOURTOKEN'
    return graphQlClient.request(query, variables, {
      Authorization: XXXXX,
    })
  }, sideEffects)
}

Explaining localStorage and Provider/ Context with example

Vicky Vasilopoulou — Wed, 22 Dec 2021 11:51:50 +0000

Hi guys!

This is more for beginners developers and I decided to write this article as I came across many times with a task to create a local storage state and then use a Provider for different type of features on an application. Thought to share and hopefully it will be more understandable so you can use the concept anywhere.

Lets work through an example:

Let's say we create a text where the initial state is visible and once we click the text disappears, however is stored in memory. Normally with useState the state of that handler changes but is not persistent once the page re-renders.

In that case we will use localstorage since we manage the state internally in our applciation. For localStorage I found some react-hooks that are really good
Check here

I am gonna be using TypeScript for our code.
Based on that example the first step is to import our package and start creating the initial or default state of that text(visible-invisible) with the types. For the state we create the context and we import from react another hook as well called useContext.

Let's create a file name TextVisibleProvider.tsx

import React, { useContext, ReactNode } from 'react'
import useLocalStorageState from 'use-local-storage-state'

type TextContextType = {
  isTextVisible: boolean
  setTextVisible: () => void
}

const TextContext = React.createContext<TextContextType>({
  isTextVisible: false,
  setTextVisible: () => {
    console.log('is text visible')
  },
})

export const useTextVisible = () => useContext(TextContext)

Then we create our Provider. The provider is important cause it what is gonna hold our localstorage in memory across the application which is also important to put it on top level component as a wrapper. Below the useLocalStorageState replaces the useState hook. We have a key text-storage and the initial state which is false. Inside the provider you can create any function that will change the state in that case the handleTextVisibility.

const TextProvider = ({ children }: { children: ReactNode }) => {
  const [isTextVisible, setTextVisible] = useLocalStorageState(
    'text-storage',
    false,
  )

  const handleTextVisibility = () => {
    if (!isTextVisible) {
      setTextVisible(true)
    }
  }

  return (
    <TextContext.Provider
      value={{ setTextVisible: handleTextVisibility, isTextVisible }}
    >
      {children}
    </TextContext.Provider>
  )
}

export default TextProvider

Now le'ts create a small component that has the text and a button that manages the state. As you can see you are exporting the state inside the TextProvider so that you can use it anywhere in your project.

Create a TextVisible.tsx


const TextVisible = (): JSX.Element => {
  const { isTextVisible, setTextVisible } = useTextVisible()

  return (
    <div>
      {!isTextVisible && (
        <div>
            <p>
              This website is using cookies to enhance the user experience.
            </p>
            <button
              onClick={() => setTextVisible()}
            >
              I accept
            </button>
        </div>
      )}
    </div>
  )
}

export default TextVisible

Then you put the TextProvider on level higher than the component that we just made or it could be on an index file.

How to make a password validation with Regex or Yup

Vicky Vasilopoulou — Tue, 20 Jul 2021 09:23:02 +0000

Password Validation with Regex


const isUpperCase = new RegExp(/(?=.*[A-Z])/g)
const isSpecialChar = new RegExp(/(?=./*[!@#$%^&*])/g)
const isLowerCase = new RegExp(/(?=./*[a-z])/g)
const isLong = new RegExp(/(?=.{7,})/g)
const checkIsWhiteSpacefromBegAndEnd = new RegExp(/^[^][\w\W]*[^]/g)

const passwordValidation = (currentPassword: string): boolean => {
 if(
   currentPassword.match(isUpperCase) &&
   currentPassword.match(isSpecialChar) &&
   currentPassword.match(isLowerCase) &&
   currentPassword.match(isLong) && 
   currentPassword.match(checkIsWhiteSpacefromBegAndEnd) 
 ) {
   return true
 }
 return false
}

For the tests I am using Jest and taking a TDD approach.

You can write lots of tests these are just a few of the samples I wrote.

describe('Given the pssword validation function', () => {
 test('test passing requirements', () => {
  expect(passwordValidation('Aa!1uj8h')).toBe(true)
  expect(passwordValidation('1_c_A_!2')).toBe(true)
  expect(passwordValidation('A b 1 ! 2 %')).toBe(true)
  expect(passwordValidation('_13Bbhjj@}}j>_')).toBe(true)
})

test('test failing password requirements', () => {
 expect(passwordValidation(' ahhhhh')).toBe(false)
 expect(passwordValidation(' aAhhhhh')).toBe(false)
 expect(passwordValidation(' aA122hhhhh')).toBe(false)
 expect(passwordValidation(' 111111122')).toBe(false)
 expect(passwordValidation(' 111111122aA')).toBe(false)
 expect(passwordValidation(' Bba !')).toBe(false)
 })
})

Password Validation with Yup

Yup Link


export const passwordValidation = Yup.string()
  .trim()
  .required('Required')
  .matches(
    /(?=.*[A-Z])/,
    'Your password needs to have at least one capital letter',
  )
  .matches(
    /(?=.*[!@#$%^&*])/,
    'Your password needs to have at least one special character',
  )
  .matches(
    /(?=.*[a-z])/,
    'Your password needs to have at least one lower case character',
  )
  .matches(/(?=.*[0-9])/, 'Your password needs to have at least one number')
  .min(8)
  .max(200)

Creating Favourites with Local Storage and useRef() in React.

Vicky Vasilopoulou — Wed, 28 Apr 2021 12:05:21 +0000

Hello folks!

I was working on a task the other day and thought would be great to share my experience on building favouriting that is saved on localStorage when the component isClicked.

Hope you enjoy.

Ingredients:

npm package react-use-localstorage
useRef
theme-ui
TypeScript
full heart icon
empty heart icon
You can find the icons on iconmonstr -> https://iconmonstr.com/

Process

The idea is to create a Favourite.tsx re-usable component so that we can add it wherever we wanton our project.

NOTE: The npm package is replacing completely the localStorage API.

The idea is that every time I click any Person component to be added on my local storage.

Details:

The id is referred to an individual props - in my case is referred to the unique id of each person of a list of many people.
JSON.parse(storageItem) is our initialValue.
setStorageItem is a function that basically will push the current storageItem to the [].
I am using the JSON.stringify() method since the useLocalStorage is accepting strings.
useRef() works perfectly since after you re-render the component it will remember the how many items you stored on your local storage.
If is favourited(when we click the IconButton) then push that item to the storage if not then remove it.
We are using the indexOf() since we don't know each time the item we clicked in which index position is every time, and then with the splice method we remove it.
Now if is clicked and favourited then show the full heart otherwise the empty heart.

export interface FavouriteProps {
  id: string
}

export const Favourite = ({
  id,
}: FavouriteProps): JSX.Element | null => {
  const [storageItem, setStorageItem] = useLocalStorage(
    'DFX-favourites',
    JSON.stringify([]),
  )
  const storagedArray = useRef(JSON.parse(storageItem))
  const isFavourited = storagedArray.current.includes(id)

  const handleToggleFavourite = (): void => {
    if (!isFavourited) {
      storagedArray.current.push(id)
      setStorageItem(JSON.stringify(storagedArray.current))
    } else {
     const indexFavouritedId = storagedArray.current.indexOf(id)
      storagedArray.current.splice(indexFavouritedId, 1)
      setStorageItem(JSON.stringify(storagedArray.current))
    }
  }
  return (
    <IconButton
      onClick={handleToggleFavourite}
    >
      {isFavourited ? (
        'Add here your full heart icon'
      ) : (
        'Add here your empty heart icon'
      )}
    </IconButton>
  )
}

The on the code you want to pass the component:

<Favourite id={id} />

How to generate automatically components/ pages/hooks on your code with PlopJS.

Vicky Vasilopoulou — Thu, 22 Apr 2021 11:40:08 +0000

Have you ever wished a way to generate the 'about' component, the 'home' component, the 'projects' component or any component, page, hook, icon, that has the same structure without repeating yourself over and over?

I didnt know that this amazing tool existed but I am so happy to share it with you and I hope it will bring you joy as it did to me.

The following example is to generate automatically components. If you want to create hook you need to create new folders and files as explained for the component example.

Here the plopJS comes to offer.
They call it "micro-generator framework."
https://github.com/plopjs/plop.

I am using TypeScript and NextJS for this project.

Installation

$ npm install --save-dev plop

Create a plopfile.js at the root of your project

const generateComponent = require('./generate/component');
const generateIcon = require('./generate/icon');
const generatePage = require('./generate/page');

module.exports = function (plop) {
  plop.setGenerator('component', generateComponent);
  plop.setGenerator('icon', generateIcon);
  plop.setGenerator('page', generatePage);
};

On your package.json

"new": "plop",
    "new:component": "plop component",
    "new:page": "plop page",
    "new:icon": "plop icon"

Create a folder at the root of your project named generate and inside another folder called component. Inside that folder create another folder called templates and a file name index.js`` (this file is outside of templates and inside component folder.).

For index.js

This index.js is the one you see above on the picture.

module.exports = {
  description: 'Generates new React component',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: "What's the name of the Component?",
      validate: function (value) {
        let message = true
        if (!/.+/.test(value)) {
          message = console.error('Missing', 'you must define a component name')
        } else if (value.length < 3) {
          message = console.error(
            'Too Short',
            `"${value}" is not descriptive enough`,
          )
        }
        return message
      },
    },
  ],
  actions: function () {
    return [
      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
        templateFile: './generate/component/templates/component.hbs',
      },

      {
        type: 'add',
        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.docs.mdx',
        templateFile: './generate/component/templates/docs.hbs',
      },
    ]
  },
}

Then inside the templates folder create a file named `component.hbs`. You can customise as much as you want your component.

import React, { ReactNode } from 'react'
import { Box } from 'theme-ui'; export

interface {{pascalCase name}}Props { children: ReactNode }```

``

``

```js

export const {{pascalCase name}} = ({ children }: {{pascalCasename}}Props): JSX.Element => { 
 return (
<Box>
  <Box>{{name}}</Box>
</Box>
 )}

Again in the same folder you can add a file named docs.hbs

import { Story, Canvas } from '@storybook/addon-docs/blocks'
import { {{pascalCase name}} } from './{{pascalCase name}}'

{{pascalCase name}}. Give a description of what the component does

import { {{pascalCase name}} } from './components'

<{{pascalCase name}}>Some content</{{pascalCase name}}>

Now run the command and you should be able to see this:

The same process is if you want to create a page, a hook or icons.