Add basic Board component

src/App.js

@@ -1,58 +1,13 @@
-import React from 'react';
+import React from "react";
-import logo from './logo.svg';
+import { Board } from "./features/Board/Board";
-import { Counter } from './features/counter/Counter';
+import "./App.css";
-import './App.css';
+
-
+function App() {
-function App() {
+  return (
-  return (
+    <div className="App">
-    <div className="App">
+      <Board />
-      <header className="App-header">
+    </div>
-        <img src={logo} className="App-logo" alt="logo" />
+  );
-        <Counter />
+}
-        <p>
+
-          Edit <code>src/App.js</code> and save to reload.
+export default App;
-        </p>
-        <span>
-          <span>Learn </span>
-          <a
-            className="App-link"
-            href="https://reactjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux-toolkit.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          ,<span> and </span>
-          <a
-            className="App-link"
-            href="https://react-redux.js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-        </span>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/app/store.js

@@ -1,8 +1,10 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore } from "@reduxjs/toolkit";
-import counterReducer from '../features/counter/counterSlice';
+import counterReducer from "../features/counter/counterSlice";
-
+import boardReducer from "../features/Board/boardSlice";
-export default configureStore({
+
-  reducer: {
+export default configureStore({
-    counter: counterReducer,
+  reducer: {
-  },
+    counter: counterReducer,
-});
+    board: boardReducer
+  }
+});

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;

src/utils/generateID.js

@@ -0,0 +1,6 @@
+// Quick and dirty ID generation.
+let lastID = 0;
+
+export default function generateID() {
+  return lastID++;
+}