Add basic Board component

src/features/Board/Board.js

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { createList, selectBoard } from "./boardSlice";
+
+import styles from "./Board.module.css";
+
+export function Board() {
+  const boardData = useSelector(selectBoard);
+  const dispatch = useDispatch();
+
+  return (
+    <div>
+      <div className={styles.boardName}>{boardData.name}</div>
+      <div className={styles.listsContainer}>
+        {boardData.lists.map(listData => (
+          <div key={listData.id} className={styles.listContainer}>
+            <div className={styles.listName}>{listData.name}</div>
+            <div className={styles.cardsContainer}>
+              {listData.cards.map(cardData => (
+                <div key={cardData.id} className={styles.cardContainer}>
+                  {cardData.text}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/features/Board/boardSlice.js

@@ -0,0 +1,62 @@
+import { createSlice } from "@reduxjs/toolkit";
+import generateID from "../../utils/generateID";
+
+export const slice = createSlice({
+  name: "board",
+  initialState: {
+    // TODO: hardcoded for now, change when renaming facility is available
+    name: "Kubric UI",
+    lists: [
+      // Elements look like -
+      // {
+      //   id: '<random>1',
+      //   name: "List 1",
+      //   cards: [
+      //     {
+      //       id: '<random>2',
+      //       text: "card 1"
+      //     },
+      //   ]
+      // }
+
+      {
+        id: `List #${generateID()}`,
+        name: "Backlog",
+        cards: [
+          {
+            id: `Card #${generateID()}`,
+            text:
+              "UI: Modify display listing of ads to like the vimeo videos sections"
+          },
+          {
+            id: `Card #${generateID()}`,
+            text: "Creative insights view"
+          }
+        ]
+      }
+    ]
+  },
+  reducers: {
+    // NOTE: Modifying state directly here is FINE and intended.
+    // Because this uses redux tolkit, which uses immer internally
+    // https://redux.js.org/redux-toolkit/overview#whats-included
+    createList: (state, action) => {
+      const { name } = action.payload;
+
+      state.lists.push({
+        id: `List #${generateID()}`,
+        name,
+        cards: []
+      });
+    }
+  }
+});
+
+export const { createList } = slice.actions;
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state) => state.counter.value)`
+export const selectBoard = state => state.board;
+
+export default slice.reducer;