DEV Community: Ruth

Routes in Angular

Ruth — Mon, 06 Jan 2025 14:30:35 +0000

Eliminate Runtime Errors with Type-safe Routes in Angular

DK ・ Jan 5

#angular #typescript #javascript #frontend

[Boost]

Ruth — Sun, 05 Jan 2025 20:32:26 +0000

Eliminate Runtime Errors with Type-safe Routes in Angular

DK ・ Jan 5

#angular #typescript #javascript #frontend

How to add dynamic routing to your react single page application

Ruth — Wed, 26 Oct 2022 11:28:09 +0000

This article aims to explain how to create routes dynamically and make dynamic Api calls, depending on the selected route.

For this demonstration, we will use the example of an online-shop web prototype.

First, create your react app and install react-router-dom
Next, in our </App> component (or wherever you decideto locate your routes ) create the route path as a dynamic route. A dynamic route has this shape : :routeName.

function App() {
  return (
    <>
      <Navigation />
      <Routes>
        <Route path="category/:categoryName" element={<Categories />} />
      </Routes>
    </>
  );
}

Create the navigation links in component <Navigation/>, each of them will have a unique path (different product categories)

The API used for this demonstration is fakestore.api. FakeStore allows us to fetch by category. When the data is ready, we store the catogories in our state.

const [categories, setCategories] = useState<string[]>([]);

useEffect(() => {
  const fetchProductCategories = () => {
    fetch("https://fakestoreapi.com/products/categories")
      .then((res) => res.json())
      .then((json) => setCategories(json));
  };
  fetchProductCategories();
}, []);

To display the categories in our JSX template we can either display them statically or map through our categories array. If so, for each category, we will add a link with our category name.

const Navigation = () => (
  <Nav>
    {categories.map((cat) => (
      <Nav.Link as={Link} to={`category/${encodeURIComponent(cat)}`}> // route with encoded URI string
        {cat.toUpperCase()}
      </Nav.Link>
    ))}
  </Nav>
);

Keep in mind that if your string has spaces or special characters, you will need to use the method encodeURIComponent(), which will turn a string such as "men's clothing" into a URI:

https://localhost:3000/category/men's%20clothing

After we're done with defining the paths of each of our links, the component that will render the content (Category.tsx) has to receive the parameter from the router (in this example :categoryName). This parameter will be different every time, depending on which path we click on our navigation.

export const Category = () => {
  const { categoryName } = useParams(); // we receive the dynamic route value from routes

  useEffect(() => {
    const fetchproducts = () => {
      setIsLoading(true);
      fetch(`https://fakestoreapi.com/products/category/${categoryName}`) // we use the parameter to fetch the products of the chosen category in <Navigation/>
        .then((res) => res.json())
        .then((json) => {
          setProducts(json);
          setIsLoading(false);
        });
    };
    fetchproducts();
  }, [categoryName]);


  return ... // return component jsx
};

We will use this parameter in the API call url to dinamically fetch our categories. If the categoryName exists, the products of that category will be rendered; else, nothing will be returned.

In a nutshell:

A location/route is defined .../category/electronics.
The router receives the element /category/:categoryName where :categoryName is, for example, "electronics".
Through useParams() we get a parameter with that reference and use it in our <Category/> component to fetch the specific products for that route.

Hopefully you can appreciate this better with the assistance of the diagram below:

Create a collapsible Floating Action Button with React

Ruth — Thu, 20 Oct 2022 20:18:32 +0000

What is a Floating Action Button

"A floating action button (FAB) represents the primary action(s) of a screen."

It usually has a fixed position on the screen, no matter how much the scrolling; this makes it easier for the user to access and use it. These kind of buttons are intended for very frequent or relevant actions within an app.

A collapsible action button as the name suggests shrinks to a minimal size while the user is scrolling the page. Pictures speak a thousand words so here is a gif:

1. Create a scrollable container

First of all, we need to create a scrollable page with some placeholder content.

const placeholders = new Array(99).fill(0).map((_, i) =>
  <p key={i} style={{ width: `${Math.random() * 75}%` }} />
);

function App() {
  return (
    <div>
      <h1>Collapsible Floating Action Button</h1>
      {placeholders}
      <button>Action</button>
      <b>
    </div>
  );
}

For this we render an array of 99 empty paragraphs with a constant height and assign a random width to each paragraph:

p {
    height: 30px;
    background-color: silver;
}

In a real project we would utilize a specific class name (e.g. .placeholder) rather than selecting a paragraph by the corresponding tag name p but for this tutorial we just do it the lazy way and avoid any additional attributes in our jsx code.

div {
    height: 100vh;
    overflow: scroll;
}

The div element we created in our App component serves as the container for the scrollable content. We want to make sure that only the content is scrollable and not the container itself. This is done by setting the height attribute to the height of the viewport and the overflow attribute to scroll. You will see later, that this is crucial for intercepting scroll events effectively.

2. Create the floating action button

The key to this floating button, that is always in the same position at the page, is to make its position fixed positionL: fixed; Then, it only remains to decide where in your application it is going to be positioned (in our case at the bottom right).

button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

3. How to collapse the button on scroll

Onscroll is an mouse event that happens every time the page is scrolled.
To handle that event, we have to write a function that sets the state we wish for, in this specific case is collapsing the floating button while scrolling is happening, and returning to its original shape when the event stops.

It is important to identify in which component is the event happening. In this case, the scrolling happens in the div container (remember how we limit the height property and set overflow: scroll to make it scrollable?).

In my event handler we want to be able to identify and catch both the scrolling and the lack of scrolling and set our state accordingly.
This way, while the event is taking place, we set isScrolling to true.

function App() {
  const [isScrolling, setIsScrolling] = useState<boolean>(false);

  const handleScroll: React.UIEventHandler<HTMLDivElement> = (_) => {
    setIsScrolling(true);
  };

  return (
    <div onScroll={handleScroll}>
      <h1>Collapsible Floating Action Button</h1>
      ...
    </div>
  );
}

Now we also need to set the state to false once the event is no longer happening. Unfortunately, there is no event that notifies about the completion of a scrolling event. But there is a juicy workaround that is based on setting a timeout with setTimeout():

const handleScroll: React.UIEventHandler<HTMLDivElement> = (_) => {
  setIsScrolling(true);
  setTimeout(() => setIsScrolling(false), 500);
};

But the tricky part comes here. For every time we scroll, there is a new scroll event firing (and there will be a lot of these). That means that we would be setting multiple timeouts every time we scroll.

Therefore, we need to use clearTimeout() to reset the previous timeout if a new scroll event is fired in under our specific time (500 ms). This way we make sure we clear the previous timeout and a new one is starting on very scroll.

Another thing to take into account is that setTimeout() returns a timeoutId. Thats what we are going to take as a reference when calling clearTimeout().

let timeoutId;
const handleScroll = (e: any) => {
  setIsScrolling(true);
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => setIsScrolling(false), 500);
};

Experienced react developers probably notice the error in the previous code fragment. The problem with saving the timeoutId in a variable arises in situations such as actions that trigger rerenders.

If this were the case, this would mean that the timeout would not be cleared because its reference would have been lost (since the variable timeoutId is redeclared on each rerender)

The solution to that is to use the hook useRef() that "allows you to persist values between renders", "and it can be used to store a mutable value that does not cause a re-render when updated". source: w3schools

const timeoutId = useRef<NodeJS.Timeout>();

const handleScroll = (e: any) => {
  setIsScrolling(true);
  clearTimeout(timeoutId.current);
  timeoutId.current = setTimeout(() => setIsScrolling(false), 500);
};

4. Adding a style transition to the floating button

Now, for a nice and smooth visual experience, we added a subtle transition to the button so that it changes depending on the scrolling state

function App() {
  ...
  return (
    <div onScroll={handleScroll}>
      ...
      <button className={isScrolling ? "isScrolling" : ""}>
        <strong>A</strong><span>ction</span>
      </button>
    </div>
  );
}

button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: border-radius 0.2s ease-in;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 30px;
  height: 30px;
  text-align: left;
}

button.isScrolling {
  border-radius: 50%;
}

button span {
  width: 40px;
  transition: width 0.2s ease-in;
  overflow: hidden;
}

button.isScrolling span {
  width: 0px;
}

Additional note: This article was co-authored by Denis Kruschinski