Forem: Jeff Edmondson

Database Soft Deletes: How and Why with Custom Prisma Client queries

Jeff Edmondson — Fri, 29 Sep 2023 16:16:32 +0000

Hard deletes and soft deletes are two different approaches to deleting data from a database, each with its own pros and cons. In this article, we will explore soft deletes, their advantages and disadvantages, how to implement them using Prisma ORM, and write some custom Prisma client queries to handle all the hard work for us.

What are Soft Deletes?

Soft deletes are a technique that allows you to mark a record as deleted without actually removing it from the database. Instead, a property is set on the record indicating that it has been deleted. Typically, this flag is named something like is_deleted or deleted_at. This field can then be used to filter out deleted records from queries.

Advantages and Disadvantages of Soft Deletes

One of the main advantages of soft deletes is that they provide an audit trail of deleted records. This can be useful for compliance purposes or for tracking changes to the database over time. Additional metadata information can be stored about the deletion such as the date & time it was deleted (deleted_at) as well as the user who preformed the deletion (deleted_by). You can also utilize soft deletes for trash bin functionality or quickly and easily be able to "undo" or recovery deleted records.

However, soft deletes can also have some disadvantages. One of the main disadvantages of using soft deletes is having to query for is_deleted every time you want to pull back active records. If you forget to do this, you could be showing deleted records to the user. This can add some additional complexity to all of your queries. (We will address this later in the article by utilizing the Prisma ORM and writing some custom Prisma Client Queries). Since we are not actually deleting records from the database, the database can become bloated with deleted records. This, in turn, can lead to decreased performance when querying the table.

Additionally, soft deletes can cause issues with unique constraints if the same unique fields are used for both deleted and active records. Take, for example, that you have added an is_deleted field to a users table and have a unique constraint on the email column. Now, if a user wants to delete their account, the is_deleted field would be set to true. If the user wants to re-create an account with the same email, a unique constraint error would be thrown. There are a couple of workarounds for this, such as restoring the original record, using partial indexes, or virtual columns (depending on your database). This will be out of scope for this article, but there are many great resources on the internet for this: https://halimsamy.com/sql-soft-deleting-and-unique-constraint

Comparison with Hard Deletes

Hard deletes, on the other hand, involve permanently removing a record from the database. This approach can be faster and more efficient than soft deletes, but it also means that the data is lost forever. This is the default approach for many applications.

How to Implement Soft Deletes with Custom Prisma Client Queries

Let's consider the following prisma.schema file. A user can have many blog posts.

model User {
    id Int @id @default(autoincrement())
    email String @unique
    name String?
    password String
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt

    blogs Blog[]
}



model Blog {
    id Int @id @default(autoincrement())
    title String
    description String
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt

    author User? @relation(fields: [authorId], references: [id])
    authorId Int?

    // Soft Delete Metadata fields
    deletedAt DateTime?
    deletedBy Int?
}

Goal

We want to allow users to archive their own blog posts via a soft delete instead of a hard delete. This way, if the user accidentally deletes the wrong blog post, it can be restored. We also want to keep an audit of what user deleted what blog. Let's start by doing this the manual wa

const user = await prisma.user.create({
    data: {
        name:"Jeff",
        email:"jeff@dharmasoftware.com",
        password:"DO_NOT_STORE_IN_PLAIN_TEXT",
        blogs: {
            create: {
                title:"My first blog post",
                description:"This is my first blog post",
            },
        },  
    },
    include: {
        blogs: true,
    },

});

console.log(user);

const deletedBlog = await prisma.blog.update({
    where: {
        id:1,
    },
    data: {
        deletedAt: new Date(),
        deletedBy: 2
    },
});


const allBlogs = await prisma.blog.findMany({
    where: {
        deletedAt: null,
    },  
});

In this approach, we are doing an update instead of a delete. We updated the deletedAt property to indicate that this record should be considered as deleted, as well as save the userId of who deleted the blog. Now every time that we get all blog posts, we need to be sure that we are only returning blog posts that don't have a deletedAt time. This approach does the job but can lead to some issues. One of the main issues is that you have to manually remember to return only the blogs that don't have a deletedAt time. It is very easy to forget this and then accidentally leak some information that you don't want to. We can clean this up by writing our first custom Prisma client query.

Create custom Prisma Client Query

Listen, I'm dumb, and there is a 100% chance that at some point in the development of my application, I will forget to add where: { deletedAt: null } and leak some data that I don't want to. This is where extending the Prisma Client and writing custom queries can help us. In the past, you could use Prisma Middleware; however, that has been deprecated in favor of creating custom Prisma client queries. Writing a custom Prisma client query gives you the ability to modify an incoming query or modify its result. This is an extremely powerful feature that allows you to simplify a lot of your Prisma queries and is the perfect tool for our soft delete use case. Let's see how we can create a custom Prisma query for soft deletes.

const prisma = new PrismaClient().$extends({
    model: {
        blog: {
            async softDelete(id: number, userId: number) {
                await prisma.blog.update({
                    where: {
                        id,
                    },
                    data: {
                        deletedAt: new Date(),  
                        deletedBy: userId,
                    },
                });
            },
        },
    },
    query: {
        blog: {
            async findMany({ model, operation, args, query }) {
                args.where = { deletedAt: null, ...args.where };

                return query(args);
            },
            async findFirst({ model, operation, args, query }) {
                args.where = { deletedAt: null, ...args.where };

                return query(args);

                },
            },
        },
});

When we first initialize our Prisma client we can extend its functionality with custom code. Here we are creating a softDelete function on our blog model. You can also create global functions as well. In this softDelete function, we are doing the exact same thing that we were doing in the manual process: updating deletedAt and deletedBy instead of deleting the record. We then modify the existing findMany and findFirst Prisma functions to add the deletedAt: null argument. This means that we don't have to manually specify it every time we call findMany or findFirst.

This means we can simplify our code to the following:

const otherUserId = 2;

await prisma.blog.softDelete(1, otherUserId);

const allBlogs = await prisma.blog.findMany({});

console.log(allBlogs);

That's all folks

If you have any issues or questions feel free to reach out to me on twitter @jeff_codes. Please also consider subscribing to the newsletter to get all my future blog posts on web development right way. Thanks for reading!

The prisma full documentation can be found here: https://www.prisma.io/docs/concepts/components/prisma-client/client-extensions/query

Protected Routes in React with Custom Hook & Context API

Jeff Edmondson — Fri, 22 Oct 2021 17:03:30 +0000

TLDR

Custom Protected Route Component + Custom Hook + React Context API = Protected Route ❤️

Github Repo: https://github.com/edmondso006/react-protected-routes

Oftentimes we want to restrict what the user can see depending on if they are currently logged in or not. It is a better user experience to hide a Profile Page with no data then displaying it to a user who is not authenticated. While most of the logic to restrict a user's permissions should be done on the server side we still need a way to hide pages on the frontend. This tutorial assumes that you already have the appropriate server side code implemented.

Hiding Authenticated Pages / Resources Behind Protected Routes in React

Protected routes to the rescue!

Protected routes or private routes are routes that are only accessible when a user is authorized (logged in, has the appropriate account permissions, etc) to visit them.

Setting up React with Routing

We will be using react-router-dom to create routes that will render different "pages" (react creates single page apps so each page is really just a component that is rendered). Make sure to install it in your project.

npm i react-router-dom

For the sake of this tutorial we will have 3 different pages:

Home - Public Page (Do not have to be authenticated to view it)
Profile - Protected Page (Have to be authenticated to view it)
About - Public Page (Do not have to be authenticated to view it)

We need to add the BrowserRouter component to the main entry file of our application.

// index.tsx or index.js
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
   <React.StrictMode>
      <BrowserRouter>
            <App />
      </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
);

Let's also create a Navbar component so that we can go to the other pages:

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
   return (
      <div>
         <Link to={"/"}>Home (Public)</Link>
         <Link to={"/about"}> About (Public) </Link>
         <Link to={"/profile"}>Profile (Protected)</Link>
      </div>
   );
}

export default Navbar;

After that we need to setup our routes in our App.tsx file

// App.tsx or App.js
import React from "react";
import "./App.css";
import { Switch, Route } from "react-router-dom";

import Navbar from "./components/Navbar";
import Home from "./Pages/Home";
import Profile from "./Pages/Profile";
import About from "./Pages/About";

function App() {

   return (
      <div className="App">
                 <Navbar />

         <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
            <Route path="/profile" exact component={Profile} />
         </Switch>
      </div>
   );
}

export default App;

If we run our app now we can see that the navigation is working! Now we just need to know whether or not the user is authenticated.

Creating a Custom Auth Hook With the React Context API

In order to keep track of whether or not the user is authenticated we can create a custom hook in conjunction with the React context API. This will allow us to know if the user is authenticated no matter where are in the application.

Let's create a new file called useAuth.tsx and add the following code:

// /src/hooks/useAuth.tsx
import React, { useState, createContext, useContext, useEffect } from "react";

// Create the context 
const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {

     // Using the useState hook to keep track of the value authed (if a 
   // user is logged in)
   const [authed, setAuthed] = useState<boolean>(false);

   const login = async (): Promise<void> => {
      const result = await fakeAsyncLogin();

      if (result) {
         console.log("user has logged in");

         setAuthed(true);
      }
   };

   const logout = async (): Promise<void> => {
      const result = await fakeAsyncLogout();

      if (result) {
         console.log("The User has logged out");
         setAuthed(false);
      }
   };

   /// Mock Async Login API call.
   // TODO: Replace with your actual login API Call code
   const fakeAsyncLogin = async (): Promise<string> => {
      return new Promise((resolve, reject) => {
         setTimeout(() => {
            resolve("Logged In");
         }, 300);
      });
   };

   // Mock Async Logout API call.
   // TODO: Replace with your actual logout API Call code
   const fakeAsyncLogout = async (): Promise<string> => {
      return new Promise((resolve, reject) => {
         setTimeout(() => {
            resolve("The user has successfully logged on the server");
         }, 300);
      });
   };

   return (
            // Using the provider so that ANY component in our application can 
            // use the values that we are sending.
      <AuthContext.Provider value={{ authed, setAuthed, login, logout }}>
         {children}
      </AuthContext.Provider>
   );
};

// Finally creating the custom hook 
export const useAuth = () => useContext(AuthContext);

Now we need to make sure that we add this new AuthProvider component to our root entry point file just like we did with the BrowserRoute component. This is how all of our child components in the tree are able to see the values that we previously specified.

// index.tsx or index.js
import { BrowserRouter } from "react-router-dom";

import { AuthProvider } from "./hooks/useAuth";

ReactDOM.render(
   <React.StrictMode>
      <BrowserRouter>
         <AuthProvider>
            <App />
         </AuthProvider>
      </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
);

Let's take this new hook out for a spin. I have created a very basic Login & Logout component. They are as follows:

// Login.tsx
import React from "react";
import { useAuth } from "../hooks/useAuth";

function Login() {
   // Destructing our hook to get the `login` function 
   const { login } = useAuth();

   return (
      <div>
         <button onClick={login}>Login</button>
      </div>
   );
}

export default Login;

// Logout.tsx
import React from "react";
import { useAuth } from "../hooks/useAuth";

function Logout() {
   // Destructing our hook to get the `logout` function 
   const { logout } = useAuth();

   return <button onClick={logout}>Logout</button>;
}

export default Logout;

When we click on the Login button we will be doing a fake login API call and setting the state of authed to true and the inverse for the logout button. Pretty neat huh?

Now we need to create a protected route component that will consume our fancy new hook.

Creating a Protected Route Component

Unfortunately react-router-dom does not provide us with a <ProtectedRoute> component. But that won't stop us from creating our own. This component will basically check the authed value from the useAuth hook. If the user is authenticated then we will render the protected page, if the user is not authenticated then we will redirect back to a public page.

// ProtectedRoute.tsx 
import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useAuth } from "./../hooks/useAuth";

// We are taking in the component that should be rendered if the user is authed
// We are also passing the rest of the props to the <Route /> component such as
// exact & the path
const ProtectedRoute = ({ component: Component, ...rest }) => {
     // Getting the value from our cool custom hook
   const { authed } = useAuth();

   return (
      <Route
         {...rest}
         render={(props) => {
                        // If the user is authed render the component
            if (authed) {
               return <Component {...rest} {...props} />;
            } else {
                             // If they are not then we need to redirect to a public page
               return (
                  <Redirect
                     to={{
                        pathname: "/",
                        state: {
                           from: props.location,
                        },
                     }}
                  />
               );
            }
         }}
      />
   );
};

export default ProtectedRoute;

Now we can use this protected route and replace the regular route components for protected pages!

// App.tsx
import Login from "./components/Login";
import Logout from "./components/Logout";
import Navbar from "./components/Navbar";
import Home from "./Pages/Home";
import Profile from "./Pages/Profile";
import ProtectedRoute from "./components/ProtectedRoute";
import { useAuth } from "./hooks/useAuth";
import About from "./Pages/About";

function App() {
   const { authed } = useAuth();

   return (
      <div className="App">
         <Navbar />
         {authed ? <Logout /> : <Login />}

         <div style={{ margin: "20px" }}>
            <span>Auth Status: {authed ? "Logged In" : "Not Logged In"}</span>
         </div>

         <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
            <ProtectedRoute path="/profile" exact component={Profile} />
         </Switch>
      </div>
   );
}

As you can see from the above gif it is working as expected. However there is a bug. When the user refresh the page while on a protected route they are redirected back to the / page. How can we fix this?...

Refresh Bug - Persisting the Authentication State

The reason that this bug is happening is because we are losing authed value when the user refreshes the page. Because this value is defaulted to false in the useAuth hook the redirect logic is happening and sending the user back to the / page. There are a couple of ways that we could resolve this.

Cookie

If your server is sending a cookie to the client after authentication you could use that cookie to verify that the user is logged in. However, if you are using the http only option on your cookie this will not be possible as the code won't be able to interact with the cookie. But don't fear there are two other ways that this could still be accomplished.

Session Storage

We could save a value into session storage so that we can keep this value on page refresh. However, a savvy user could go into the dev tools and change this value. This could pose a problem depending on your implementation. Here is how you would implement this in the useAuth hook.

//useAuth.tsx
...
export const AuthProvider = ({ children }) => {
   // Get the value from session sotrage. 
   const sessionStorageValue = JSON.parse(sessionStorage.getItem("loggedIn"));
     // Use this value as the defalt value for the state 
   const [authed, setAuthed] = useState<boolean>(sessionStorageValue);

     const login = async (): Promise<void> => {
      const result = await fakeAsyncLogin();

      if (result) {
         console.log("user has logged in");

         setAuthed(true);
         sessionStorage.setItem("loggedIn", "true");
      }
   };

   const logout = async (): Promise<void> => {
      const result = await fakeAsyncLogout();

      if (result) {
         console.log("The User has logged out");
         setAuthed(false);
         sessionStorage.setItem("loggedIn", "false");
      }
   };
  ...

Authentication Endpoint Check

If session storage won't work for your implementation then you could do an API call to your server to an authentication endpoint that verifies if the current user is logged in. This is the most secure solution however it comes at the cost of having to do another API call. Here is how you would implement this solution.

// useAuth.tsx
...
export const AuthProvider = ({ children }) => {
   const [authed, setAuthed] = useState<boolean>(false);
     // Store new value to indicate the call has not finished. Default to true
   const [loading, setLoading] = useState<boolean>(true);

   // Runs once when the component first mounts
   useEffect(() => {
         fakeAsyncLoginCheck().then((activeUser) => {
            if (activeUser) {
               console.log("fake async login check called");
               setAuthed(true);
               setLoading(false);
            } else {
                             setAuthed(false);
               setLoading(false);
            }
         });
      }
   }, []);

     // Mock call to an authentication endpoint 
   const fakeAsyncLogin = async (): Promise<string> => {
      return new Promise((resolve, reject) => {
         setTimeout(() => {
            resolve("Logged In");
         }, 300);
      });
   };

return (
      // Expose the new `loading` value so we can consume it in `App.tsx`
      <AuthContext.Provider
         value={{ authed, setAuthed, login, logout, loading }}
      >
         {children}
      </AuthContext.Provider>
   );
...

We also need to make changes to the App.tsx file. We will need to use the new loading value and only render the routes if it is false. This fixes the issue where the user would get redirected back to the home page because the authed value has not been updated yet. Because we aren't rendering the <ProtectedRoute> component until after loading is done we can be sure that the authed value is accurate.

// App.tsx
function App() {
   const { authed, loading } = useAuth();

   return (
      <div className="App">
         <Navbar />
         {authed ? <Logout /> : <Login />}

         {loading ? (
            <div> Loading... </div>
         ) : (
            <>
               <div style={{ margin: "20px" }}>
                  <span>
                     Auth Status: {authed ? "Logged In" : "Not Logged In"}
                  </span>
               </div>

               <Switch>
                  <Route path="/" exact component={Home} />
                  <Route path="/about" exact component={About} />
                  <ProtectedRoute path="/profile" exact component={Profile} />
               </Switch>
            </>
         )}
      </div>
   );
}

References

React Router Dom - https://reactrouter.com/web/guides/quick-start

React Custom Hooks - https://reactjs.org/docs/hooks-custom.html

React Context API - https://reactjs.org/docs/context.html

That's all folks

If you have any issues or questions feel free to reach out to me on twitter @jeff_codes. Thanks for reading!

Github Repo: https://github.com/edmondso006/react-protected-routes

This article was originally published at: https://www.jeffedmondson.dev/blog/react-protected-routes/. Head over there to see more articles like it

How To Open a Great Pull Request

Jeff Edmondson — Mon, 11 Oct 2021 22:40:57 +0000

🥅 Your Goal

When opening a Pull Request (PR) your goal is to get your code merged into the main branch so that it can be released & a part of the code base. However, before your code can be merged it first must be reviewed. The pull request is where this review will take place. In order to get your code reviewed & approved as fast as possible, you want to create a great Pull Request. This Pull Request should make the code reviewers' life as easy as possible. If the code reviewer has to leave the pull request to get more information, then it is not a good pull request. All relevant information should be included in the Pull Request. There is nothing worse than a huge number of file changes and an empty PR description form. There are a bunch of different Pull Request templates that you can find on the internet that are great, but regardless of which template you end up using, make sure the following information is included.

🧐 What

You want to make sure that you adequately describe the requirements that your change is implementing or fixing. Having the code reviewer have to guess what your change is doing is never a good idea. If you have a ticket number for your change make sure to link it.

🤓 Why

Now that the reviewer knows what your code is trying to accomplish it is time to give some context as to why you are doing things the way that you are doing them. You don't, and shouldn't, explain every single line of code. No reviewer is going to read an entire dissertation about making a page more mobile responsive. However, it is good to explain things from a high level. It is also good to explain why you chose to do things a certain way. Try to think of the possible questions that your reviewers might have before they ask it. This will save time in the long run. If you are referencing any outside material make sure to link it.

✅ Validation

As a developer I have trust issues. I've seen release branches get broken too many times. So to ease your reviewers' doubts make sure to include validation that your code is doing what it is supposed to be doing. Validation can be a variety of different things. If you are working on a frontend change make sure to include screenshots or videos. GitHub now allows you to add videos to your PR. Also ensure that your screenshots or videos take into consideration various screen sizes such as mobile and desktop. Working on creating a new / editing REST endpoint? Add a curl and its response to the PR.

🌴 Keep your GIT History Clean

Save yourself time & energy and always ensure that your git history is up to date with the main branch. Merge conflicts are the worst and best to be avoided all together. However, sometimes they cannot be avoided. In that case you need to be proactive about resolving them instead of having someone tell you to resolve them. This just increases the time that it takes to get your code merged into the main branch.

You also want to make sure that you are writing good & descriptive commit messages. "Fixed the bug" & "Should work now" aren't gonna cut it. This holds especially true if you are not doing a Squash & Merge and instead creating a merge commit for each commit when merging to the main branch.

💬 Communicate

Your code is not you. I am going to repeat that because it is so important: YOUR CODE IS NOT YOU. You should not take offense when reviewers request changes. You should try and take this as a learning moment, be grateful that you are able to learn a new or better way of doing something. Communicate openly with reviewers. You should answer any question that they may have while providing them with links & examples to make their life as easy as possible.

React Native Emoji Slider

Jeff Edmondson — Thu, 02 Sep 2021 22:27:31 +0000

✅ The Goal

🏗 The Process

Install the following NPM package as the slider component is no longer actively maintained by the react native team 😢

yarn add @react-native-community/slider

Let's add the Slider component!

<View style={styles.container}>
        <Slider
    />    
</View>

With no props the component doesn't look right... It's just a dot on the screen.

Lets fix that by adding the style prop to give it some width and height

<View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
      />        
</View>

Now we are talking! So we want to the rating the user to be able slide the slider to various points and to change the emoji that is shown to them. For the sake of this mini tutorial lets choose 5 different emojis. So we will want set the minimumValue to 1 and the maximumValue to 5. We will also want to set the step prop to be 1 meaning that the each time we move the slider it will "step" up one point.

<View style={styles.container}>
        <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
    />  
</View>

Next we will want to set up the onValueChange prop that takes in a function that gets called each time the value of the slider changes. For this let's use the React useState hook that allows us to keep a state in our functional component. For more info on React Hooks check out the documentation.

export default function App() {

  const [rating, setRating] = React.useState(3);

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
    </View>
  );
}

That should be it for the slider. We are able to slide it and save the value that is returned to our components state. This is how we are going to change the emoji that is shown to to the user. Lets set that up now. It will just be a simple <Text> component and change the font size to make it larger.

export default function App() {

  const [rating, setRating] = React.useState(3); // 3 is the default value

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
      <Text style={{ fontSize: 50 }}>
        😐
      </Text>
    </View>
  );
}

So in order for this emoji to change we will want to have a function get called every time the component is rendered, which just so happens each time the slider component calls the setRating hook.

const getRatingEmoji = () => {
    if (rating === 1){ return '😡' }

    if (rating === 2) { return '😫' } 

    if (rating === 3) { return '😶' } 

    if (rating === 4)  { return '🙂' } 

    if (rating === 5) { return '😁' } 
  }

This function is very simple and simply just checks if the rating is equal to a certain number and if it is return the appropriate emoji that corresponds with that number. The last thing that we need to do is to call this function with the <Text> component.

export default function App() {

  const [rating, setRating] = React.useState(3);

  const getRatingEmoji = () => {
    if (rating === 1){ return '😡' }

    if (rating === 2) { return '😫' } 

    if (rating === 3) { return '😶' } 

    if (rating === 4)  { return '🙂' } 

    if (rating === 5) { return '😁' } 
  }

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
      <Text style={{ fontSize: 50 }}>
        {getRatingEmoji()}
      </Text>
    </View>
  );
}

💥 Final Result

Check of the full working code here: Repo

Follow me on Twitter for more!

How I built and Published My First React Native App (Daily Discomfort)

Jeff Edmondson — Sun, 15 Aug 2021 22:35:06 +0000

🏃🏻‍♂️TLDR

React Native + Redux + NodeJs + MongoDB Atlas + Heroku = Daily Discomfort

🤨 What is it?

Daily Discomfort is an app that allows users to swipe on different prompts that are designed to get them out of their comfort zones. After the user swipes right on a prompt their mission is to go out into the real word to complete the challenge. Once completed, or failed, the user comes back to the app to journal about their experiences trying to complete the prompt. It can be found on the Apple AppStore & Google Play Store.

☕️ Motivation

The whole reason that I created this app is because I recognize I am terrified to get out of my own comfort zone. I wanted something that would force me each and every day to try something new and to experience things that I might have not had the chance to otherwise. After realizing that there didn't seem to be anything on the market that met my requirements I did what any nerd would do, I opened my laptop and started planning.

🤔 Requirements / Features

Allow users to select the prompts that they wanted to try out.
Allow users to journal about their experiences after they have completed or attempted the prompt.
Allow users to submit prompts that once reviewed, will display for other users.
Allow users to see a notification to remember to complete the prompt and journal about their experiences afterwards.

🏗 Project Architecture

The overall architecture for this project is extremely simple. My react native application is talking to a NodeJS api through two different REST endpoints. One is to retrieve a certain amount of approved prompt from the database, and the other to submit a prompt for consideration. I won't be going in to too much detail about the backend I may create another article for that purpose.

📱 Technology

To Expo Or To Not Expo, That Is the Question

Bare Workflow - This workflows requires you to use Android Studio & xCode. You will have to build and deploy your app by yourself. However you get Full Control of your entire project.
Expo

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. - Expo

Expo allows you to very quickly get started with react native. You won't ever have to open up Xcode or Android Studio. Expo will also take care of building, and signing the App Bundles & IPA files that you submit to Google Play and the Apple AppStore. However, there is the trade off is not being able to use native modules or native code in your app. The cool thing with expo is that if you realize you need to write some native code or use some native module that there is not an expo package for, you can simply eject from expo. Ejecting will allow you to then write or use any native code that you might need.

I ended up deciding to use Expo because I wanted to try and build this as fast as possible.

I also used Typescript instead of Javascript for this project. I haven't worked with Typescript before and I thought it was the perfect time to get started with it. Now that the project is launched, I can say that I am a huge fan. I don't know if I will be able to go back to normal Javascript now.

NPM Packages

react-navigation
- Utilized this package to create different screens & a bottom navigation bar
redux
- For a global data store
redux-persist
- Allows me to save my global data store onto the users devices
react-native-deck-swiper
- Tinder like swiping component. I did face some struggles with this and had to make some changes to its source code, namely having the cards refresh after an API call was made. Unfortunately it does not seem that this project is being actively maintained.
expo-notification
- Allows me to send scheduled local notifications on the users devices.

React Native App Structure

daily-discomfort/
├─ actions/                     // all redux actions that are dispatched
├─ assets/                      // all images
├─ components/                  // all components 
│  ├─ common/
│  ├─ homescreen/
│  ├─ submitscreen/
│  ├─ historyscreen/
├─ constants/ 
│  ├─ colors.ts                // typescript object that contains all color hex codes
│  ├─ types.ts                 // redux types 
├─ navigation/
│  ├─ bottomtabbarnavigator.tsx    // bottom tab bar for navigation 
├─ networking/
│  ├─ apiRepository.ts         // methods to interact with server
├─ notifications/
│  ├─ notificationManager.ts   // Handles local notification logic
├─ reducers/                   // basic redux reducer
├─ screens/
│  ├─ history.tsx 
│  ├─ home.tsx
│  ├─ submit.tsx 
├─ store/                     // Basic redux store
├─ utils/                     // static helper functions
├─ App.tsx                    // main entry point
├─ app.json                   // expo configuration file
├─ package.json
├─ config.ts                  // config values 
├─ types.ts                   // typescript types

🧑🏻‍💻 Implementation of Features

Allow users to select the prompts that they wanted to try out.
- I wanted the users to make a selection on what prompt they wanted to try out instead of just giving them one. This makes the app more engaging while also taking into account the restrictions that a certain user might have with completing the challenge. The second point is also why I incorporated categories. Swiping appears to be the cool and fun thing today so it made sense for that to be the mechanism that allows users to select a prompt. I was able to use the NPM package react-native-deck-swiper to implement this rather quickly.

Allow users to journal about their experiences after they have completed the prompt.
1. This allows users to look back on their previous experiences and be able to grow. While this feature was simple and didn't require a lot of work to implement, the value is immense. I simply saved an array of previous challenges into redux which then persists onto the device with redux-persist
Allow users to submit prompts that once reviewed, will display for other users.
1. This was an extremely important feature for this app. I wanted it to be a community driven app that allows the community to help each other. To implement this feature I created a new route in the in API that would accept POST requests with the data for the new prompt. However, these prompts won't be automatically added into the prompts that the user is currently seeing. I have to go into the DB and approve this newly submitted prompts. This helps to ensure that only quality prompts are being shown to the user.
Allow users to see a notification to remind them to complete the prompt and journal about their experiences afterwards.
1. This was a breeze to setup with Expo's great documentation. You first have to check to make sure that the user has granted your app access to show notifications. Once you do have access you can simply fire off a local notification whenever you want. For my use case, I used scheduled notifications that allowed you to schedule a notification for a future date. I used this to remind users to complete the challenge that they have selected for that day.

    export const scheduleNotification = async (title: string, body: string) => {
        Notifications.scheduleNotificationAsync({
            content: {
                title: title,
                body: body
            },
            trigger: {
                seconds: NOTIFICATION_REMINDER_SECONDS, 
                repeats: false
            }
        })
    };

🚀 Shipping the Final Product

Backend

MongoDB Atlas for the database
Heroku for running the server. Deploying to heroku is extremely simple. You can integrate with your Github repository and automatically deploy once a PR is merged into your main branch.

React Native App

The thing that I love about Expo the most is how it handles the whole build process for you. You don't have to worry about signing your app as well, Expo takes care of that for you. It only takes two commands to build for both Android and iOS:

expo build:android
expo build:ios

After running these commands the Expo build servers take care of the rest of the work for you and will give you a link where you can download the App Bundle or the IPA file. Once you have these you are able to put them up on both the Google Play store and the Apple App store 🎉

Thanks for reading, I can be found on twitter here https://twitter.com/jeff_codes and my personal site is
https://www.jeffedmondson.dev/

React Native Custom BottomBar Navigation with BottomSheet

Jeff Edmondson — Mon, 07 Jun 2021 22:30:37 +0000

Goal

Create a custom bottom bar with react navigation and a bottom sheet action button.
If you are using expo the code will be the same. The installation of the libraries may be different.

Libraries Used:

Bottom Sheet (Version 2): https://gorhom.github.io/react-native-bottom-sheet/
Portal: https://github.com/gorhom/react-native-portal
React Native Navigation: https://reactnavigation.org/

Install the libraries

React Native Navigation

yarn add @react-navigation/native
# Dependencies 
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/bottom-tabs
yarn add @react-navigation/stack
yarn add react-native-safe-area-contex
yarn add react-native-screens
cd ios
pod install

‼️ Import react-native-gesture-handler a the top of the app.tsx file ‼️

import 'react-native-gesture-handler';

BottomSheet (Your can use whatever bottom sheet library you want. They should all work the same). Make sure to install all dependencies as well!

yarn add @gorhom/bottom-sheet@^2
# Dependencies (Should already be installed from React Native Naviagation Library) 
yarn add react-native-reanimated@^1 react-native-gesture-handler
cd ios
pod install
# There are more steps required for android to set up React Native Gesture Handler (Updating MainActivity.java)
# https://docs.swmansion.com/react-native-gesture-handler/docs/#installation

React Native Portal

yarn add @gorhom/portal

React Native IonIcons (Optional)

yarn add react-native-ionicons@^4.x

Project Structure

navigation directory - This will hold all of our code that has to do with anything navigation.
screens directory - Holds all of the screens that our application will use.
components directory - Holds shared components that can be re-used a crossed different screens & components.

Setting Up the Navigation

First things first, let's create an index.tsx file. This will be the entry point of the navigation code.
We first need to setup a NavigationContainer that will be wrapped around our RootNavigator component.
createStackNavigator() - allows you to transition between screens. Screens are added and removed from the stack similar to as it is done on a normal web browser.
After we create our Stack we then define the screens that we want to be within the stack. For our purposes we want root & NotFound. This components are stacks themselves. Our root component will be our BottomTabNavigator (bottom tab bar)

navigation/index.tsx

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';

import { RootStackParamList } from '../types';
import BottomTabNavigator from './BottomTabNavigator';
import NotFoundScreen from '../screens/NotFoundScreen';

export default function Navigation() {
   return (
     <NavigationContainer>
       <RootNavigator />
     </NavigationContainer>
   );
}

const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="Root" component={BottomTabNavigator} />
       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
     </Stack.Navigator>
   );
}

Bottom Tab Navigator

First we need to create the bottomTabNavigator: createBottomTabNavigator. This is the skeleton of the bottom bar. It allows us to navigate to different routes that we will define.

Once we have an instance of createBottomTabNavigator we can render the component

Full list of tabBarOptions https://reactnavigation.org/docs/bottom-tab-navigator

 <BottomTab.Navigator
      initialRouteName="Home"   // What tab do we want to default to
      tabBarOptions={{          // This gives us the ability to add addtional
        showLabel: false,       // options when we create the bottom tab
        style: {.               // most importantly the style component
          position: 'absolute',
          bottom: 25, 
          left: 20,
          right: 20,
          backgroundColor: '#ffffff',
          borderRadius: 15,
          ...style.shadow,
          paddingBottom: 5
        }
      }}      
      >
      ...
    </BottomTab.Navigator>

Now that we have the tab bar we will want to fill it up with some screens. In order to do that we can add the screens within the Bottom.Navigator component. For the sake of this blog post we will just have 2 screens. Home & About.
Each screen needs to have a name and a component . These components themselves are going to be stackNavigators. This will allow us to navigate to different pages within the currently selected tab.
We can also set specific options for each screen. Here we are calling a method in order to render an IonIcon

<BottomTab.Screen
     name="Home"
   component={HomeScreenNavigator}
   options={{
      tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
   }}
 />

<BottomTab.Screen
   name="About"
   component={ReminderScreenNavigator}
   options={{
      tabBarIcon: ({ color }) => <TabBarIcon name="alarm" color={color} />,
   }}
 />

const HomeScreenStack = createStackNavigator<HomeScreenParamList>();
function HomeScreenNavigator() {
  return (
    <HomeScreenStack.Navigator>
      <HomeScreenStack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: true }}
      />
    </HomeScreenStack.Navigator>
  );
}

const AboutScreenStack = createStackNavigator<AboutScreenParamList>();
function ReminderScreenNavigator() {
  return (
    <AboutScreenStack.Navigator>
      <AboutScreenStack.Screen
        name="About"
        component={AboutScreen}
        options={{ headerTitle: 'About' }}
      />
    </AboutScreenStack.Navigator>
  );
}

Wrapping Up Boilerplate Navigation Code

Once we have all of the above, it is time to wrap our entry component.
Within App.tsx we want to import our Navigation component that we defined earlier.
We also want to wrap Navigation within SafeAreaProvider
Your App.tsx file should look like the following


import 'react-native-gesture-handler';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Navigation from './navigation';

const App = () => {
   return (
     <SafeAreaProvider>
              <Navigation />
     </SafeAreaProvider>
   );
 };

 export default App;

We should then be left with the following.

Everything we have done up to this point is standard react native navigation code. The real challenge comes when we want to add a custom button in the BottomTab to open a bottom sheet.

Setting up the Bottom Sheet

In order to add another "tab" or "button" to our BottomTab navigator we must declare a new entry within it.
As we learned earlier each BottomTab.Screen entry is required to have a component. In our case we can create a null component since we want to open a bottom sheet component instead of navigating to a different page.

const AddScreenComponent = () => {
  return null;
}

And then finally we need to add this to our BottomTab navigator. Instead of rendering a tabBarIcon we are going to use the tabBarButton option and then a function to render a custom BottomSheet component (AddBottomSheet) that we will define shortly.

...
<BottomTab.Screen
      name="Add"
    component={AddScreenComponent}
    options={{
       tabBarButton: () => <AddBottomSheet />,
    }}
/>
...

And that's it for the BottomTabBar.tsx component!

Full `BottomTabBar.tsx` code

navigation/BottomTabBar.tsx

import Icon from 'react-native-ionicons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet } from 'react-native';
import * as React from 'react';
import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';
import AddBottomSheet from '../components/AddBottomSheet';
import { 
  BottomTabParamList, 
  HomeScreenParamList, 
  AboutScreenParamList
} from '../types';

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  return (
    <BottomTab.Navigator
      initialRouteName="Home"
      tabBarOptions={{ 
        showLabel: false,
        style: {
          position: 'absolute',
          bottom: 25, 
          left: 20,
          right: 20,
          backgroundColor: '#ffffff',
          borderRadius: 15,
          ...style.shadow,
          paddingBottom: 5
        }
      }}      
      >
      <BottomTab.Screen
        name="Home"
        component={HomeScreenNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
        }}
      />
      <BottomTab.Screen
        name="Add"
        component={AddScreenComponent}
        options={{
          tabBarButton: () => <AddBottomSheet />,
        }}
      /> 
      <BottomTab.Screen
        name="About"
        component={ReminderScreenNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="alarm" color={color} />,
        }}
      />
    </BottomTab.Navigator>
  );
}

function TabBarIcon(props: { name: React.ComponentProps<typeof Icon>['name']; color: string }) {
  return <Icon size={30} style={{ marginBottom: -3 }} {...props} />;
}

const HomeScreenStack = createStackNavigator<HomeScreenParamList>();
function HomeScreenNavigator() {
  return (
    <HomeScreenStack.Navigator>
      <HomeScreenStack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: true }}
      />
    </HomeScreenStack.Navigator>
  );
}

const AboutScreenStack = createStackNavigator<AboutScreenParamList>();
function ReminderScreenNavigator() {
  return (
    <AboutScreenStack.Navigator>
      <AboutScreenStack.Screen
        name="About"
        component={AboutScreen}
        options={{ headerTitle: 'About' }}
      />
    </AboutScreenStack.Navigator>
  );
}

const AddScreenComponent = () => {
  return null;
}

const style = StyleSheet.create({
  shadow: {
    shadowColor: '#7F5DF0',
    shadowOffset: {
      width: 0, 
      height: 10
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 5,
  }
});

Creating the BottomSheet Component `AddBottomSheet.tsx`

This component will be displayed on the bottom bar so therefore we want it to look like a button when the BottomSheet is not presented.

<TouchableWithoutFeedback onPress={onAddButtonPress}>
    <Icon size={65} name='add-circle' color={'#00a16e'} />          
</TouchableWithoutFeedback>

const onAddButtonPress = () => {
    console.log('button pressed');
}

Now it is time to add the BottomSheet code.

import BottomSheet from '@gorhom/bottom-sheet';
import * as React from 'react';
import { StyleSheet, View, Text, TouchableWithoutFeedback, } from 'react-native';
import Icon from 'react-native-ionicons';
import { Portal, PortalHost } from '@gorhom/portal';

const AddBottomSheet = () => {
    // Creates a reference to the DOM element that we can interact with
    const bottomSheetRef = React.useRef<BottomSheet>(null);

    // Setting the points to which we want the bottom sheet to be set to
    // Using '-30' here so that it is not seen when it is not presented
    const snapPoints = React.useMemo(() => [-30, '75%'], []);

    // Callback function that gets called when the bottom sheet changes
    const handleSheetChanges = React.useCallback((index: number) => {
        console.log('handleSheetChanges', index);
    }, []);

    // Expands the bottom sheet when our button is pressed
    const onAddButtonPress = () => {
        bottomSheetRef?.current?.expand();
    }

   return ( 
    <>
         <TouchableWithoutFeedback onPress={onAddButtonPress}>
             <Icon size={65} name='add-circle' color={'#00a16e'} />          
         </TouchableWithoutFeedback>
                    <BottomSheet
                        ref={bottomSheetRef}
                        index={-1} // Hide the bottom sheet when we first load our component 
                        snapPoints={snapPoints}
                        onChange={handleSheetChanges}
                    >
                    <View style={styles.contentContainer}>
                        <Text style={styles.bottomSheetTitle}>Add Customer</Text>
                    </View>
                </BottomSheet>
      </>
   )
}

export default AddBottomSheet;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
        backgroundColor: 'grey',
     },
     contentContainer: {
        flex: 1,
        paddingLeft: 50
     },
     bottomSheetTitle: {
         fontSize: 24,
         fontWeight: '500'
     }
});

When we run our project now we get some unintentional behavior. When we click our button the bottom sheet does appear, however it is limited to the context of the bottom bar. This is obviously not what we want.

React Native Portal

We can utilize react-native-portal to fix this issue
Portals exist within normal react. Portals are a way to render children into a DOM node exist outside of the parent component.
In our case we want our BottomSheet (Child Component) to be rendered outside of the BottomTabBar (Parent Component)
In order to accomplish this we first need to set up a PortalProvider within our App.tsx file. This tells our BottomSheet that we want it rendered at this level, outside of our navigation code.

import 'react-native-gesture-handler';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import Navigation from './navigation';
import { PortalProvider } from '@gorhom/portal';

 const App = () => {

   return (
     <SafeAreaProvider>
          <PortalProvider>
              <Navigation />
          </PortalProvider>
     </SafeAreaProvider>
   );
 };

 export default App;

Once we have done that we need to wrap our BottomSheet component inside of the Portal component and set a PortalHost

...
import { Portal, PortalHost } from '@gorhom/portal';
...
const AddBottomSheet = () => {

    ...
   return ( 
    <>
        ...
            <Portal>
                <BottomSheet
                    ref={bottomSheetRef}
                    index={-1}
                    snapPoints={snapPoints}
                    onChange={handleSheetChanges}
                    >
                    <View style={styles.contentContainer}>
                        <Text style={styles.bottomSheetTitle}>Add Customer</Text>
                    </View>
                </BottomSheet>
            </Portal>

            <PortalHost name="custom_host" /> // Name to be used as an id
      </>
   )
}

...

After that everything should be working correctly. Our BottomSheet is now being rendered outside of the BottomTabBar

Conclusion

Well there you go. A customizable way to create a BottomTabBar with a BottomSheet and React Native Navigation
If you have any question please leave them in the comments, or feel free to reach out to me on twitter @jeffeddev
Link to the full working Github Repo: https://github.com/edmondso006/React-Native-Custom-BottomBar-With-BottomSheet

Friendly Reminder: Failing A Coding Interview Doesn't Make You A Bad Developer

Jeff Edmondson — Sun, 04 Apr 2021 22:50:16 +0000

There is so much more to being a developer than just being able to solve data structure and algorithm problems. Keep your head up. You got this!

Best Lesser Known Mac Apps for Developers

Jeff Edmondson — Fri, 02 Apr 2021 19:53:05 +0000

Magnet - $7.99 (100% worth it)

As developers we normally have a ton of open windows: your terminal, code editor, web browser with 8343 tabs, Spotify, Slack, etc. Magnet is the missing window manager for mac os that allows you to use keep your workspace organized. If you are coming from Windows this is a must. You can easily arrange windows by dragging to various points on the screen or by mastering the keyboard shortcuts. This is by far the most important app on my mac.

CopyClip - Free

CopyClip is a clipboard manager that lives in your menu bar. It allows you to see your copy and paste history so that you don't have to keep going back to StackOverFlow to copy and paste that one piece of code. This is a huge time saver for me.

iTerm2 - Free

iTerm is a feature rich terminal replacement app. It looks amazing and gives you the ability to have multiple terminal tabs within the same window. Another fantastic feature is the ability to search natively within the terminal. Coupled with OhMyZsh, I think it is the best looking terminal app.

npkill - Free

If you work with NPM at all you know how large some node_modules folders can get. npkill will search though your file system and display all of you node_modules folders along with their sizes. It then allows you to easily select any that you want to delete. This can help you save GBs of space on your hard drive.

Notion - Free

Notion might not be a "lesser known" app, but I am truly surprised more people haven't heard of it before. Notion is such a powerful tool with so many different features it would take me forever to explain them all. I personally use Notion to keep all of my notes, reading list, and side project issue tracking.

Notable - Free

If Notion is a little too feature rich Notable is a great simple markdown editor. It is great for quick notes.

DevCleaner for xCode - Free

If you are using xCode at all and are running low on space on your mac this is a must. It will scan your computer for cached xCode files and lets you easily delete them. This app has saved me 15gb of data.

Synergy - Trial / $29.00

Technically this isn't mac only but still it is a great tool that not many people know about. Synergy allows to share a single mouse and keyboard with different computers. I personally have bee using this with my work for home setup. I can use my mouse & keyboard plugged into my windows machine and seamlessly move over to my mac without having to use a physically KVM. Even though this might have a high price tag, I couldn't recommend it enough.

Swift 5 - Location Search with Auto Complete Location Suggestions📍🗺️

Jeff Edmondson — Thu, 25 Jun 2020 00:26:33 +0000

GitHub Repo

Setting up the storyboard

Let's start with the storyboard & add in the components that we are going to need to make this work.

First add a TableView & Search Bar onto you view controller. Arrange them to make it look decent.
Time to hook these components up to the code. Open the assistant editor and while holding the control key on your keyboard drag them into the code. We are going to want to hook both of these components up as outlets.

@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var searchResultsTable: UITableView!

Setting up the view controller

Now comes the fun part - actually coding this thing together! 🤓 Don't worry apple has made this surprisingly easy to do.

1. Set up the table view

The first thing we are going to want to do is set up the table view. If you have set up a table view before this should be very familiar. We are going to conform to two different protocols: UITableViewDataSource & UITableViewDelegate . UITableViewDataSources defines the data that we are going to display and UITableViewDelegate defines what happens when we click on a cell in the table view. For our simple example we are just going to print the name and the coordinates of the selected location.

UITableViewDataSource

// Setting up extensions for the table view
extension ViewController: UITableViewDataSource {
// This method declares the number of sections that we want in our table.
func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

// This method declares how many rows are the in the table
// We want this to be the number of current search results that the
// searchCompleter has generated for us
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return searchResults.count
}

// This method declares the cells that are table is going to show at a particular index
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // Get the specific searchResult at the particular index
   let searchResult = searchResults[indexPath.row]

   //Create  a new UITableViewCell object
   let cell = UITableViewCell(style: .subtitle, reuseIdentifier: nil)

   //Set the content of the cell to our searchResult data
   cell.textLabel?.text = searchResult.title
   cell.detailTextLabel?.text = searchResult.subtitle

    return cell
  }
}

UITableViewDelegate

extension ViewController: UITableViewDelegate {
// This method declares the behavior of what is to happen when the row is selected
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
   tableView.deselectRow(at: indexPath, animated: true)

   let result = searchResults[indexPath.row]
   let searchRequest = MKLocalSearch.Request(completion: result)

   let search = MKLocalSearch(request: searchRequest)
        search.start { (response, error) in
            guard let coordinate = response?.mapItems[0].placemark.coordinate else {
                return
            }

       guard let name = response?.mapItems[0].name else {
             return
       }

       let lat = coordinate.latitude
       let lon = coordinate.longitude

       print(lat)
       print(lon)
       print(name)

     }
  }
}

And finally we are going to want to tell our ViewController to use these for both the data source & delegate. This can be done in the viewDidLoad() method.

override func viewDidLoad() {
    super.viewDidLoad()
    searchResultsTable?.delegate = self
    searchResultsTable?.dataSource = self
}

Great our table view is ready to go! 🎉

2. Setting Up the Search Completer

The first thing that we are going to want to do is to import MapKit which is used by MKLocalSearchCompleter. You can do this by simply importing it in the top of the file.

import UIKit
import MapKit

Next, we are going to want to create an instance of the MKLocalSearchCompleter and also create an empty array of type MKLocalSearchCompletion which will act as our searchResults.

// Create a search completer object
var searchCompleter = MKLocalSearchCompleter()

// These are the results that are returned from the searchCompleter & what we are displaying
// on the searchResultsTable
var searchResults = [MKLocalSearchCompletion]()

After that it is time to conform to more protocols, this time the MKLocalSearchCompleterDelegate & UISearchBarDelegate protocols.

UISearchBarDelegate

// This method declares that whenever the text in the searchbar is change to also update
// the query that the searchCompleter will search based off of
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    searchCompleter.queryFragment = searchText
}

MKLocalSearchCompleterDelegate

// This method declares gets called whenever the searchCompleter has new search results
// If you wanted to do any filter of the locations that are displayed on the the table view
// this would be the place to do it.
func completerDidUpdateResults(_ completer: MKLocalSearchCompleter) {
    // Setting our searchResults variable to the results that the searchCompleter returned
    searchResults = completer.results

    // Reload the tableview with our new searchResults
    searchResultsTable.reloadData()
}

// This method is called when there was an error with the searchCompleter
func completer(_ completer: MKLocalSearchCompleter, didFailWithError error: Error) {
    // Error
}

And then update the viewDidLoad method to set the delegates

override func viewDidLoad() {
    super.viewDidLoad()

    //Set up the delegates & the dataSources of both the searchbar & searchResultsTableView
    searchCompleter.delegate = self
    searchBar?.delegate = self
    searchResultsTable?.delegate = self
    searchResultsTable?.dataSource = self
}

That should be it! If you are having any problems please look at the GitHub repo which will have the full working code.

Removing Sensitive Data From Git History

Jeff Edmondson — Sun, 21 Jun 2020 15:15:08 +0000

If you pushed sensitive data to a public repository assume that it has been comprised & change it!
I would like to think that we have all be there: accidentally pushing a secret (access token, password, connection string, etc) to your remote git server and immediately proceed to start to freak out. Or maybe its just me 🤷🏽. Anyhow, luckily for you I have indeed done it before and found a great tool to re-write history! BFG is a tool that allows you to scrub your git repositories clean and remove all sensitive data that you might have accidentally committed and luckily is extremely simple to use and extremely fast 🚀. Go ahead and download the jar file & make sure that you have java installed on your machine in order to run it.

Removing Sensitive Data (Data has feelings too)

Remove the secrets from your files & commit into your master branch. The reason we have to do this is because the HEAD commit is considered a protected commit and the BFG tool will not touch it.

git commit -m "Oops"

Get a fresh clone of your repository. You will want to use the --mirror flag here since we are only want the git history & not all of the actual files in your repository.

git clone --mirror your_repo_url

Save a copy of this new clone just in case anything bad happens.
Create a new .txt file and add the sensitive information that would want to remove. Each entry should be on a separate line. BFG will search throughout your entire git history for any occurrences of these keys.

superawesomeapikey1
password123

Run the command to replace the all occurrences of you secrets with ***REMOVED*** .

java -jar bfg.jar --replace-text secrets.txt  your_repo.git

— Note: There are many other commands that you can run instead of replacing the text. Check out their documentation for all of the commands.

Change your directory to your git repo and run the following command to strip out all of the "dirty" data.

cd your_repo
git reflog expire --expire=now --all && git gc --prune=now --aggressive

This command is actually two commands concatenated together by the && operator. This appears to be a bit more complicated but lets try to break it down:

git reflog expire --expire=now --all

First, reflog here is short for "Reference Logs". Reference logs just keep track of when you git history (branches, commits) where last updated in your git repository. expire --expire=now in this command is tell git to prune all older git reflog entries. Finally we are adding the tag --all to tell git that we want this operation ran on all references.

git gc --prune=now --aggressive

Secondly, we run the git gc command. This command is essentially cleaning up your repository. --prune=now tells git to remove all references to any orphaned or unreachable git objects. --aggresssive is telling git to sacrifice speed in order to clean everything as well as it can.

Once everything looks good in your local repository it is time to push it back up to your remote repository with a simple:

git push

Now all of the secrets that you specified in the secrets.txt file will be replaced with ***REMOVED***

and you will have a squeaky clean git history! 🎉 One important thing to note here is if you are working on a team with other people you are going to want to make sure that they do a new git clone . Thanks for reading! And make sure to give BFG some love and give them a star on their repo on GitHub!

Working With A Large Codebase

Jeff Edmondson — Sat, 01 Feb 2020 21:00:56 +0000

Introduction

So you landed your first dev job and now you are starting at a massive codebase and feel completely overwhelmed. Don't worry everyone has been there before. Do not try to understand what every line of code is doing in a large codebase. You will waste time and be completely overwhelmed by it. Believe me I have been there. Understanding how the entire codebase works will come with time, and utilizing the tips below should help expedite that process. For now focus on the task at hand and only try to understand the code that your task is related to.

Know What the Application Does

One of the biggest pieces of advice that I could give is know as much as you can about what that the application does. If you are able to know everything that the application does then the code should become much easier to read. Variable names, database tables and columns will all make more sense. Take the place of the user who uses the application and try and go through every main use case and jot down some notes.

Architecture & Design

Having some idea of what architecture the codebase is following will help immensely. Some of the current most popular are Model View Controller (MVC) and Layered. If you are not sure what these architectures are I would highly recommending doing some research on them. A code base will usually only have one type of architecture but could employ multiple different design patterns. Design patterns are a reusable solution to reoccurring problems in software. Some of the most frequent design that are used today are: Singleton, Factory, Observer, Inverse of Control (IOC technically a a principle but still very common). Ask you coworkers what architecture the application is following and what design patterns it is using and then go and research them. Drawing out UML and Logic flow diagrams can help aide you in this step.

Know What 3rd Party Libraries Are Being Used

Almost all applications will be utilizing some third party libraries. Libraries help make a developers life easier by reducing the amount of code and work to accomplish certain tasks. Having an understanding of what libraries the application is using is key. Take a look at all the libraries the application is using and do some research on them. What is the purpose of the library? How is it being leveraged in this particular codebase?

Master the language

This should go without saying but make sure you are well versed in the language that the codebase is. Practice makes perfect.

Read Documentation (If Available)

The crown jewel for understanding a large codebase is documentation. However, we do not live in a perfect world therefore GOOD documentation is not often available. If you have it USE IT.

Practice

One of the best ways to learn how to deal with a large codebase is contribute to open source! There are so many projects that need help. Find a project that you are interested and find an issue to work on.

These are just my tips. Leave yours in the comments!

React Native Local iOS and Android Notifications

Jeff Edmondson — Thu, 14 Nov 2019 01:15:55 +0000

Introduction

My requirements were simple I needed to incorporate Local notifications that I could schedule to to appear at a later time for both iOS and Android. I also needed these notifications to still display even if the app was closed. After some research I found that react-native-push-notification was my best bet. However, I found that this was a bit tricky to get up and running, but at long last I was successful. My struggle is your lucky day.

Full App Repo: https://github.com/edmondso006/ReactNativeLocalNotifications

Installation

We are actually going to have to install two packages because the react-native-push-notification package utilizes push-notifications-ios in order to send iOS notifications. These packages also support Push Notifications but that is out of scope of this tutorial.

    npm install --save react-native-push-notification
    npm install --save @react-native-community/push-notification-ios

Since we are going to be using native features on the device we need to Manually Link these packages. To do that run the following commands. Linking allows you to use the native features of the device!

    react-native link react-native-push-notification
    react-native link @react-native-community/push-notification-ios

iOS Setup

Since we install a native module it is a good idea to run pod install in the iOS directory. This will give you access to the module we install through npm in xCode

    cd ios
    pod install

Since we want to use both local and scheduled notifications we need to add some Objective-C code in the AppDelegate.m file of the application. For this you are going to want to navigate to the iOS directory in your app folder and open the .xcworkspace file. ( Notifications/ios/Notifications.xcworkspace ). Then open the AppDelegate.m .

First import the module that we installed through npm.

    #import <RNCPushNotificationIOS.h>

Then add the following code into the body.

    // Required to register for notifications
    - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
    {
      [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
    }
    // Required for the register event.
    - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
    {
      [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
    }
    // Required for the notification event. You must call the completion handler after handling the remote notification.
    - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
    fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
    {
      [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
    }
    // Required for the registrationError event.
    - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
    {
      [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
    }
    // Required for the localNotification event.
    - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
    {
      [RNCPushNotificationIOS didReceiveLocalNotification:notification];
    }

Now is a good time to try and build the project in xCode. If you did everything correctly you should have a successful build. If not make sure that you ran pod install in the iOS directory of your application. Thats it for the iOS Setup!

Android Setup

Since we are going to want to use local scheduled notifications we are going to need to add some code to the android/app/src/main/AndroidManifest.xml file. Outside of the <application> tag but within the <manifest> tag add the following code:

    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <permission
       android:name="${applicationId}.permission.C2D_MESSAGE"
       android:protectionLevel="signature" />
    <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

Then add the following code within the <application> tag:

    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
                android:value="YOUR NOTIFICATION CHANNEL NAME"/>
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
                android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
    <!-- Change the resource name to your App's accent color - or any other color you want -->
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                android:resource="@android:color/white"/>

    <!-- < Only if you're using GCM or localNotificationSchedule() > -->
    <receiver   android:name="com.google.android.gms.gcm.GcmReceiver"
                android:exported="true"
                android:permission="com.google.android.c2dm.permission.SEND" >
            <intent-filter>
            <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            <category android:name="${applicationId}" />
            </intent-filter>
    </receiver>

    <!-- < Only if you're using GCM or localNotificationSchedule() > -->
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                 <action android:name="android.intent.action.BOOT_COMPLETED" />
            </intent-filter>
    </receiver>
    <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>

    <!-- < Only if you're using GCM or localNotificationSchedule() > -->
    <service
             android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
             android:exported="false" >
            <intent-filter>
             <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        </intent-filter>
    </service>
     <!-- </ Only if you're using GCM or localNotificationSchedule() > -->

    <service
        android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
        android:exported="false" >
        <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>

And finally, create the file `android/app/src/res/values/colors.xml` and add the following:

    <resources>
        <color name="white">#FFF</color>
    </resources>

That's it for the Android Setup!

Putting it all together!

In order to keep things simple and clean let's create a file call NotificationService.js . This file is where all of our Notification code will go. Add the following to that file:

    import PushNotification from 'react-native-push-notification';

    export default class NotificationService {
        //onNotificaitn is a function passed in that is to be called when a
        //notification is to be emitted.
      constructor(onNotification) {
        this.configure(onNotification);
        this.lastId = 0;
      }

      configure(onNotification) {
        PushNotification.configure({
          onNotification: onNotification,

          // IOS ONLY (optional): default: all - Permissions to register.
          permissions: {
            alert: true,
            badge: true,
            sound: true
          },

          popInitialNotification: true,
        });
      }

        //Appears right away 
      localNotification() {
        this.lastId++;
        PushNotification.localNotification({
          title: "Local Notification", 
          message: "My Notification Message", 
          playSound: false, 
          soundName: 'default', 
          actions: '["Yes", "No"]'
        });
      }

        //Appears after a specified time. App does not have to be open.
      scheduleNotification() {
        this.lastId++;
        PushNotification.localNotificationSchedule({
          date: new Date(Date.now() + (30 * 1000)), //30 seconds
          title: "Scheduled Notification", 
          message: "My Notification Message",
          playSound: true, 
          soundName: 'default', 
        });
      }

      checkPermission(cbk) {
        return PushNotification.checkPermissions(cbk);
      }

      cancelNotif() {
        PushNotification.cancelLocalNotifications({id: ''+this.lastId});
      }

      cancelAll() {
        PushNotification.cancelAllLocalNotifications();
      }
    }

Note: This is the absolute basics. Consult the Github repos for more information

Add the following to your app.js

    import React, { Component } from 'react';

    import {
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Text,
      StatusBar,
      Button,
      Alert
    } from 'react-native';

    import {
      Header,
      Colors,
    } from 'react-native/Libraries/NewAppScreen';


    import NotificationService from './NotificationService';

    class App extends Component {

      constructor(props) {
        super(props);
            //creating a new instance of the NotificationService 
            //& passing in the function we want called when the notification happens
        this.notification = new NotificationService(this.onNotification);
      }

        //Gets called when the notification comes in
      onNotification = (notif) => {
        Alert.alert(notif.title, notif.message);
      }

        //Permissions to use notifications
      handlePerm(perms) {
        Alert.alert("Permissions", JSON.stringify(perms));
      }

      render(){
        return (
          <>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
              <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={styles.scrollView}>
                <Header />
                {global.HermesInternal == null ? null : (
                  <View style={styles.engine}>
                    <Text style={styles.footer}>Engine: Hermes</Text>
                  </View>
                )}
                <View style={styles.body}>
                  <Button title={"Local Notification"} onPress={() => { this.notification.localNotification() }} />
                  <Button title={"Scheduled (30s) Notification"} onPress={() => { this.notification.scheduleNotification() }} />
                </View>
              </ScrollView>
            </SafeAreaView>
          </>
        );
      }
    }

    const styles = StyleSheet.create({
      scrollView: {
        backgroundColor: Colors.lighter,
      },
      engine: {
        position: 'absolute',
        right: 0,
      },
      body: {
        backgroundColor: Colors.white,
      },
      sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
      },
      sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
        color: Colors.black,
      },
      sectionDescription: {
        marginTop: 8,
        fontSize: 18,
        fontWeight: '400',
        color: Colors.dark,
      },
      highlight: {
        fontWeight: '700',
      },
      footer: {
        color: Colors.dark,
        fontSize: 12,
        fontWeight: '600',
        padding: 4,
        paddingRight: 12,
        textAlign: 'right',
      },
    });

    export default App;

Wrap up

If everything was successful you should be able to schedule local notifications! Here the the repo for the project: https://github.com/edmondso006/ReactNativeLocalNotifications. If you have any questions please feel free to reach out and ask.

Sources

https://github.com/zo0r/react-native-push-notification

https://github.com/react-native-community/react-native-push-notification-ios

Forem: Jeff Edmondson

Database Soft Deletes: How and Why with Custom Prisma Client queries

What are Soft Deletes?

Advantages and Disadvantages of Soft Deletes

Comparison with Hard Deletes

How to Implement Soft Deletes with Custom Prisma Client Queries

Goal

Create custom Prisma Client Query

That's all folks

Protected Routes in React with Custom Hook & Context API

TLDR

Hiding Authenticated Pages / Resources Behind Protected Routes in React

Setting up React with Routing

Creating a Custom Auth Hook With the React Context API

Creating a Protected Route Component

Refresh Bug - Persisting the Authentication State

Cookie

Session Storage

Authentication Endpoint Check

References

That's all folks

How To Open a Great Pull Request

🥅 Your Goal

🧐 What

🤓 Why

✅ Validation

🌴 Keep your GIT History Clean

💬 Communicate

React Native Emoji Slider

✅ The Goal

🏗 The Process

💥 Final Result

How I built and Published My First React Native App (Daily Discomfort)

🏃🏻‍♂️TLDR

🤨 What is it?

☕️ Motivation

🤔 Requirements / Features

🏗 Project Architecture

📱 Technology

To Expo Or To Not Expo, That Is the Question

NPM Packages

React Native App Structure

🧑🏻‍💻 Implementation of Features

🚀 Shipping the Final Product

Backend

React Native App

React Native Custom BottomBar Navigation with BottomSheet

Goal

Libraries Used:

Install the libraries

Project Structure

Setting Up the Navigation

Bottom Tab Navigator

Wrapping Up Boilerplate Navigation Code

Setting up the Bottom Sheet

Full BottomTabBar.tsx code

Creating the BottomSheet Component AddBottomSheet.tsx

React Native Portal

Conclusion

Friendly Reminder: Failing A Coding Interview Doesn't Make You A Bad Developer

Best Lesser Known Mac Apps for Developers

Magnet - $7.99 (100% worth it)

CopyClip - Free

iTerm2 - Free

npkill - Free

Notion - Free

Notable - Free

DevCleaner for xCode - Free

Synergy - Trial / $29.00

Swift 5 - Location Search with Auto Complete Location Suggestions📍🗺️

Setting up the storyboard

Setting up the view controller

1. Set up the table view

2. Setting Up the Search Completer

Removing Sensitive Data From Git History

Removing Sensitive Data (Data has feelings too)

Working With A Large Codebase

Introduction

Know What the Application Does

Architecture & Design

Full `BottomTabBar.tsx` code

Creating the BottomSheet Component `AddBottomSheet.tsx`