chore: check route validity and added content

Author: AmanuelCh

src/App.tsx

@@ -1,10 +1,10 @@
-import { useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { useLocalStorage } from '@uidotdev/usehooks';
 import CategoryList from './components/CategoryList';
 import TopicList from './components/TopicList';
 import MarkdownViewer from './components/MarkdownViewer';
 import Navbar from './components/Navbar';
+import Error from './components/Error';
 
 const App = () => {
   const [isDark, setIsDark] = useLocalStorage('isDark', false);
@@ -41,6 +41,14 @@ const App = () => {
             path='/:category/:topic'
             element={<MarkdownViewer />}
           />
+          <Route
+            path='/error'
+            element={<Error />}
+          />
+          <Route
+            path='*'
+            element={<Error />}
+          />
         </Routes>
       </Router>
     </div>

src/components/Error.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+
+const Error = () => {
+  return (
+    <div className='flex items-center justify-center h-[90vh] text-white'>
+      The requested page doesn't exist. Try searching for topics or navigate
+      back to{' '}
+      <Link
+        className='ml-1 underline text-blue-400'
+        to='/'
+      >
+        home
+      </Link>
+    </div>
+  );
+};
+
+export default Error;

src/components/MarkdownViewer.tsx

@@ -2,26 +2,32 @@ import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import remarkGfm from 'remark-gfm';
 import CustomLink from './Link';
 import GitHubButton from './ui/github-button';
 import Breadcrumb from './ui/breadcrumb';
 import BackToTop from './ui/back-to-top';
+import checkRoute from '../utils/checkRoute';
 
 const MarkdownViewer = () => {
   const { category, topic } = useParams();
   const [markdown, setMarkdown] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [isVisible, setIsVisible] = useState(false);
 
+  const navigate = useNavigate();
+
+  checkRoute();
+
   useEffect(() => {
     const fetchMarkdown = async () => {
       try {
         const module = await import(`../data/${category}/${topic}.md`);
         setMarkdown(module.default);
       } catch (error) {
         console.error('Error fetching markdown:', error);
+        navigate('/error');
       }
     };
 

src/components/TopicList.tsx

@@ -1,9 +1,13 @@
 import { Link, useParams } from 'react-router-dom';
 import { topics } from '../utils/lists';
 import Breadcrumb from './ui/breadcrumb';
+import checkRoute from '../utils/checkRoute';
 
 const TopicList = () => {
   const { category } = useParams<{ category: string }>();
+
+  checkRoute();
+
   const topicList =
     topics[category?.replaceAll('-', '_') as keyof typeof topics] || [];
 
@@ -14,7 +18,7 @@ const TopicList = () => {
         <Breadcrumb category={category} />
       </div>
 
-      <h1 className='my-6 z-50'>{category?.replaceAll('-', ' ')}</h1>
+      <h1 className='my-10 z-50'>{category?.replaceAll('-', ' ')}</h1>
       <ul className='grid md:grid-cols-3 gap-6 list-none'>
         {topicList.map((topic) => (
           <li

src/data/channels/channels-in-go.md

@@ -0,0 +1,41 @@
+# Channels
+
+Channels are a typed, thread-safe queue. Channels allow different goroutines to communicate with each other.
+
+## Create a channel
+
+Like maps and slices, channels must be created *before* use. They also use the same `make` keyword:
+
+```go
+ch := make(chan int)
+```
+
+## Send data to a channel
+
+```go
+ch <- 69
+```
+
+The `<-` operator is called the *channel operator*. Data flows in the direction of the arrow. This operation will *block* until another goroutine is ready to receive the value.
+
+## Receive data from a channel
+
+```go
+v := <-ch
+```
+
+This reads and removes a value from the channel and saves it into the variable `v`. This operation will *block* until there is a value in the channel to be read.
+
+## Blocking and deadlocks
+
+A [deadlock](https://yourbasic.org/golang/detect-deadlock/#:~:text=yourbasic.org%2Fgolang,look%20at%20this%20simple%20example.) is when a group of goroutines are all blocking so none of them can continue. This is a common bug that you need to watch out for in concurrent programming.
+
+> Empty structs are often used as `tokens` in Go programs. In this context, a token is a [unary](https://en.wikipedia.org/wiki/Unary_operation) value. In other words, we don't care *what* is passed through the channel. We care *when* and *if* it is passed.
+
+We can block and wait until *something* is sent on a channel using the following syntax
+
+```go
+<-ch
+```
+
+This will block until it pops a single item off the channel, then continue, discarding the item.

src/data/channels/channels-review.md

@@ -0,0 +1,33 @@
+# Channels Review
+
+Here are a few extra things you should understand about channels from [Dave Cheney's awesome article](https://dave.cheney.net/2014/03/19/channel-axioms).
+
+### A send to a nil channel blocks forever
+
+```go
+var c chan string // c is nil
+c <- "let's get started" // blocks
+```
+
+### A receive from a nil channel blocks forever
+
+```go
+var c chan string // c is nil
+fmt.Println(<-c) // blocks
+```
+
+### A send to a closed channel panics
+
+```go
+var c = make(chan int, 100)
+close(c)
+c <- 1 // panic: send on closed channel
+```
+
+### A receive from a closed channel returns the zero value immediately
+
+```go
+var c = make(chan int, 100)
+close(c)
+fmt.Println(<-c) // 0
+```

src/data/channels/closing-channels.md

@@ -0,0 +1,43 @@
+# Closing channels in Go
+
+Channels can be explicitly closed by a *sender*:
+
+```go
+ch := make(chan int)
+
+// do some stuff with the channel
+
+close(ch)
+```
+
+## Checking if a channel is closed
+
+Similar to the `ok` value when accessing data in a `map`, receivers can check the `ok` value when receiving from a channel to test if a channel was closed.
+
+```go
+v, ok := <-ch
+```
+
+ok is `false` if the channel is empty and closed.
+
+## Don't send on a closed channel
+
+Sending on a closed channel will cause a panic. A panic on the main goroutine will cause the entire program to crash, and a panic in any other goroutine will cause *that goroutine* to crash.
+
+Closing isn't necessary. There's nothing wrong with leaving channels open, they'll still be garbage collected if they're unused. You should close channels to indicate explicitly to a receiver that nothing else is going to come across.
+
+## Buffered Channels
+
+Channels can *optionally* be buffered.
+
+### Creating a channel with a buffer
+
+You can provide a buffer length as the second argument to `make()` to create a buffered channel:
+
+```go
+ch := make(chan int, 100)
+```
+
+Sending on a buffered channel only blocks when the buffer is *full*.
+
+Receiving blocks only when the buffer is *empty*.

src/data/channels/concurrency.md

@@ -0,0 +1,23 @@
+# Concurrency
+
+## What is concurrency?
+
+Concurrency is the ability to perform multiple tasks at the same time. Typically, our code is executed one line at a time, one after the other. This is called *sequential execution* or *synchronous execution*.
+
+![concurrency](https://i.imgur.com/1pQKFgw.png)
+
+If the computer we're running our code on has multiple cores, we can even execute multiple tasks at *exactly* the same time. If we're running on a single core, a single code executes code at *almost* the same time by switching between tasks very quickly. Either way, the code we write looks the same in Go and takes advantage of whatever resources are available.
+
+## How does concurrency work in Go?
+
+Go was designed to be concurrent, which is a trait *fairly* unique to Go. It excels at performing many tasks simultaneously safely using a simple syntax.
+
+There isn't a popular programming language in existence where spawning concurrent execution is quite as elegant, at least in my opinion.
+
+Concurrency is as simple as using the `go` keyword when calling a function:
+
+```go
+go doSomething()
+```
+
+In the example above, `doSomething()` will be executed concurrently with the rest of the code in the function. The `go` keyword is used to spawn a new *[goroutine](https://gobyexample.com/goroutines)*.

src/data/channels/select-default-case.md

@@ -0,0 +1,46 @@
+# Select Default Case
+
+The `default` case in a `select` statement executes *immediately* if no other channel has a value ready. A `default` case stops the `select` statement from blocking.
+
+```go
+select {
+  case v := <-ch:
+    // use v
+  default:
+    // receiving from ch would block
+    // so do something else
+}
+```
+
+## Tickers
+
+- [time.Tick()](https://golang.org/pkg/time/#Tick) - is a standard library function that returns a channel that sends a value on a given interval.
+- [time.After()](https://golang.org/pkg/time/#After) - sends a value once after the duration has passed.
+- [time.Sleep()](https://golang.org/pkg/time/#Sleep) - blocks the current goroutine for the specified amount of time.
+
+## Read-only Channels
+
+A channel can be marked as read-only by casting it from a `chan` to a `<-chan` type. For example:
+
+```go
+func main(){
+  ch := make(chan int)
+  readCh(ch)
+}
+
+func readCh(ch <-chan int) {
+  // ch can only be read from
+  // in this function
+}
+```
+
+## Write-only Channels
+
+The same goes for write-only channels, but the arrow's position moves.
+
+```go
+func writeCh(ch chan<- int) {
+  // ch can only be written to
+  // in this function
+}
+```

src/data/channels/select-statement.md

@@ -0,0 +1,28 @@
+# Select
+
+Sometimes we have a single goroutine listening to multiple channels and want to process data in the order it comes through each channel.
+
+A `select` statement is used to listen to multiple channels at the same time. It is similar to a `switch` statement but for channels.
+
+```go
+select {
+  case i, ok := <- chInts:
+    fmt.Println(i)
+  case s, ok := <- chStrings:
+    fmt.Println(s)
+}
+```
+
+The first channel with a value ready to be received will fire and its body will execute. If multiple channels are ready at the same time one is chosen randomly. The `ok` variable in the example above refers to whether or not the channel has been closed by the sender yet.
+
+## Range
+
+Similar to slices and maps, channels can be ranged over.
+
+```go
+for item := range ch {
+    // item is the next value received from the channel
+}
+```
+
+This example will receive values over the channel (blocking at each iteration if nothing new is there) and will exit only when the channel is closed.

src/utils/checkRoute.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { categories } from './lists';
+import { useNavigate, useParams } from 'react-router-dom';
+
+function checkRoute() {
+  const { category } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (category) {
+      const isCategoryExist = categories.some(
+        (prevCategory) =>
+          prevCategory.link.slice(1).toLowerCase() === category?.toLowerCase()
+      );
+
+      if (!isCategoryExist) {
+        console.log('Category does not exist:', category);
+        navigate('/error');
+      }
+
+      return;
+    }
+  }, [category, navigate]);
+}
+
+export default checkRoute;

src/utils/lists.ts

@@ -172,4 +172,13 @@ export const topics = {
     'pointer-receivers',
     'wrapping-up',
   ],
+  channels: [
+    'concurrency',
+    'channels-in-go',
+    'closing-channels',
+    'select-statement',
+    'select-default-case',
+    'channels-review',
+    'wrapping-up',
+  ],
 };

tsconfig.app.json

@@ -4,7 +4,7 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,