create interfaces, get and render initial data from slices

.eslintrc.json

@@ -11,8 +11,8 @@
     "rules": {
       "react/jsx-uses-vars": "error",
       "react/jsx-uses-react": "error",
-      "semi": ["error", "never"],
-      "space-in-parens": ["error", "always", { "exceptions": [ "{}" ] }],
+      //"semi": ["error", "never"],
+     // "space-in-parens": ["error", "always", { "exceptions": [ "{}" ] }],
       "@typescript-eslint/member-delimiter-style": ["error", {
         "multiline": {
           "delimiter": "none",

package.json

@@ -19,12 +19,14 @@
     "@types/react-dom": "^18.0.9",
     "@types/redux-logger": "^3.0.9",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "buffer": "^5.7.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-typescript": "^0.14.0",
     "parcel": "^2.8.0",
     "prettier": "^2.8.0",
+    "process": "^0.11.10",
     "redux-devtools-extension": "^2.13.9"
   },
   "dependencies": {

src/EntryPoint.tsx

@@ -1,10 +1,24 @@
 import React from 'react'
+import { useAppSelector } from './redux/selectors'
+import CommentComponent from './components/CommentComponent'
+import User from './components/User'
 
-type Props = {}
 
-const EntryPoint = ( props: Props ) => {
+const EntryPoint: React.FC = () => {
+  const comments = useAppSelector(state => state.data?.comments) 
+
+  console.log( comments)
+
   return (
-    <div>Entry</div>
+    <>
+     {comments?.map((comment) => {
+      return  (
+      <CommentComponent key={comment.id}>
+        <User user={comment.user}/>
+      </CommentComponent>
+      )
+     })}
+    </>
   )
 }
 

src/components/CommentComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface CommentComponentProps {
+  readonly children: React.ReactNode
+}
+
+
+const CommentComponent = (props: CommentComponentProps) => {
+  return (
+    <>
+      {props.children}
+    </>
+  )
+}
+
+export default CommentComponent

src/components/User.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { User } from '../redux/slices/commentsSlice'
+
+interface UserProps {
+    readonly user: User
+}
+
+const User = (props: UserProps) => {
+  return (
+    <div>{props.user.username}</div>
+  )
+}
+
+export default User

src/redux/selectors.ts

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from "react-redux";
+
+import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch } from "../store";
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/redux/slices/commentsSlice.tsx

@@ -0,0 +1,55 @@
+
+import { createSlice } from "@reduxjs/toolkit";
+
+import initialCommentsRaw from '../../data.json'
+
+const initialComments: Data = initialCommentsRaw
+
+
+interface Image {
+    png: string
+    webp: string
+}
+
+export interface User {
+    image: Image
+    username: string
+}
+
+type Replies = Omit<Comment, 'replies'> & { replyingTo: string }
+
+export interface Data {
+    currentUser: User
+    comments: Comment[]
+}
+
+export interface Comment {
+    id: number
+    content: string
+    createdAt: string
+    score: number
+    user: User
+    replies: Replies[]
+}
+
+interface CommentState {
+    loading: boolean
+    error: null | string
+    data: null | Data
+}
+
+const initialState = {
+    loading: false,
+    error: null,
+    data: initialComments
+} as CommentState
+
+const commentsSlice = createSlice({
+    name: 'comments',
+    initialState: initialState,
+    reducers: {
+
+    },
+})
+
+export default commentsSlice.reducer

src/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit'
 import thunk from 'redux-thunk'
-import {logger} from 'redux-logger'
+import { logger } from 'redux-logger'
+
+import commentsSlice from './redux/slices/commentsSlice'
 
 export const store = configureStore({
-  reducer: { },
+  reducer: commentsSlice,
   middleware: [thunk, logger],
 })
 

tsconfig.json

@@ -27,15 +27,15 @@
     /* Modules */
     "module": "commonjs",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */