Merge pull request #155 from manuelc2209/feat/context-forum

Context Forum

package.json

@@ -13,6 +13,8 @@
         "axios": "^1.1.3",
         "babel-loader": "8.2.5",
         "color": "4.2.0",
+        "dayjs": "^1.11.7",
+        "nanoid": "^4.0.1",
         "react": "18.2.0",
         "react-router-dom": "6.8.1",
         "react-scripts": "5.0.1",
@@ -61,13 +63,10 @@
     "devDependencies": {
         "@babel/core": "^7.19.3",
         "@babel/plugin-proposal-export-default-from": "^7.16.7",
+        "@babel/plugin-syntax-typescript": "7.18.6",
         "@babel/plugin-transform-runtime": "^7.19.6",
         "@babel/plugin-transform-typescript": "^7.16.8",
-        "@babel/plugin-syntax-typescript": "7.18.6",
         "@reduxjs/toolkit": "^1.8.6",
-        "@types/jest": "29.2.0",
-        "@types/node": "18.8.5",
-        "@types/react": "18.0.21",
         "@shopify/eslint-plugin": "42.0.1",
         "@storybook/addon-actions": "^6.4.18",
         "@storybook/addon-essentials": "^6.4.18",
@@ -80,8 +79,11 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/react-dom": "^18.0.6",
         "@types/color": "^3.0.3",
+        "@types/jest": "29.2.0",
+        "@types/node": "18.8.5",
+        "@types/react": "18.0.21",
+        "@types/react-dom": "^18.0.6",
         "@types/react-test-renderer": "^17.0.1",
         "@types/styled-components": "5.1.26",
         "@typescript-eslint/eslint-plugin": "^5.0.0",

src/App.test.tsx

@@ -11,6 +11,10 @@ const AppComponent = (
     </HashRouter>
 );
 
+jest.mock('nanoid', () => {
+    return { nanoid: () => '' };
+});
+
 const mockedUsedNavigate = jest.fn();
 
 jest.mock('react-router-dom', () => ({

src/App.tsx

@@ -5,7 +5,8 @@ import { Route, Routes, useNavigate } from 'react-router-dom';
 import { StyledColumn, StyledContainer, StyledContent, StyledHeader, StyledOverlay } from './AppStyles';
 import data from './data/index.json';
 import { Button, Portefolio } from './components';
-import { ProjectsUI, ForumUI, ForumBody } from './pages';
+import { ProjectsUI, ForumOutlet, Threads } from './pages';
+import { ForumContextWrapper } from './pages/forum/context/forumContext';
 
 export const App: React.FC = () => {
     const navigate = useNavigate();
@@ -54,8 +55,15 @@ export const App: React.FC = () => {
         <Routes>
             <Route path="/" element={App} />
             <Route path="/projects" element={<ProjectsUI buttonProperties={buttonProps} />} />
-            <Route path="/forum" element={<ForumUI />}>
-                <Route path="/forum" element={<ForumBody />} />
+            <Route path="/forum" element={<ForumOutlet />}>
+                <Route
+                    path="/forum"
+                    element={
+                        <ForumContextWrapper>
+                            <Threads />
+                        </ForumContextWrapper>
+                    }
+                />
                 <Route path="/forum/login" element={<div>login wip</div>} />
                 <Route path="/forum/register" element={<div>register wip</div>} />
             </Route>

src/pages/forum/components/index.tsx

@@ -1,2 +1,3 @@
 export * from './banner';
 export * from './header';
+export * from './thread';

src/pages/forum/components/thread/index.tsx

@@ -1,8 +1,12 @@
+import dayjs from 'dayjs';
 import React from 'react';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { StyledContainer, StyledEnd, StyledMiddle, StyledStart } from './styles';
 import { ThreadProps } from './types';
 
+dayjs.extend(relativeTime);
+
 export const Thread: React.FC<ThreadProps> = ({ avatar, title, subtitle, sideSection }: ThreadProps) => {
     return (
         <StyledContainer>
@@ -14,7 +18,7 @@ export const Thread: React.FC<ThreadProps> = ({ avatar, title, subtitle, sideSec
             <StyledEnd>
                 <div>{sideSection.replies}</div>
                 <div>{sideSection.views}</div>
-                <div>{new Date(sideSection.postTimeTracker).toLocaleDateString()}</div>
+                <div>{dayjs(sideSection.postTimeTracker).fromNow()}</div>
             </StyledEnd>
         </StyledContainer>
     );

src/pages/forum/components/thread/styles.tsx

@@ -1,7 +1,27 @@
 import styled from 'styled-components';
 
-export const StyledContainer = styled.div``;
+export const StyledContainer = styled.div`
+    display: flex;
+    gap: 32px;
+    padding: 16px;
+    flex: 1;
+    box-sizing: border-box;
+    background-color: #f7f7f7;
+    border: 1px solid #dddddd;
+    justify-content: space-between;
+    min-height: 100px;
+`;
 
-export const StyledStart = styled.div``;
-export const StyledMiddle = styled.div``;
-export const StyledEnd = styled.div``;
+export const StyledStart = styled.div`
+    flex-direction: column;
+`;
+
+export const StyledMiddle = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+`;
+
+export const StyledEnd = styled.div`
+    flex-direction: column;
+`;

src/pages/forum/context/forumContext.tsx

@@ -15,13 +15,12 @@ export const ForumContextWrapper: React.FC<ForumContextWrapperProps> = ({ childr
 
     const value = useMemo(
         () => ({
-            children,
             isLoggedIn,
             threads,
             setIsLoggedIn,
             setThreads
         }),
-        [children, isLoggedIn, threads, setThreads, setIsLoggedIn]
+        [isLoggedIn, threads, setThreads, setIsLoggedIn]
     );
 
     return <ForumContext.Provider value={value}>{children}</ForumContext.Provider>;

src/pages/forum/index.tsx

@@ -1,2 +1,2 @@
-export * from './pages';
-export { ForumBody } from './layout';
+export * from './pages/Outlet';
+export { Threads } from './pages/Threads';

src/pages/forum/layout/View/index.tsx → src/pages/forum/layout/Container/index.tsx

@@ -4,7 +4,7 @@ import { Header } from '../../components';
 
 import { StyledLayoutWrapper, StyledBody } from './styles';
 
-export const Layout = () => {
+export const Container = () => {
     return (
         <StyledLayoutWrapper>
             <Header />

src/pages/forum/layout/ThreadsView/index.tsx

@@ -0,0 +1,30 @@
+import { nanoid } from 'nanoid';
+import React, { useContext } from 'react';
+
+import { Thread } from '../../components';
+import { ForumContext } from '../../context/forumContext';
+
+import { StyledContainer, StyledSideSection, StyledThreadContainer } from './styles';
+
+export const ThreadsView = () => {
+    const { threads } = useContext(ForumContext);
+
+    return (
+        <StyledContainer>
+            <StyledThreadContainer>
+                {threads?.map((thread) => (
+                    <Thread
+                        key={nanoid()}
+                        avatar={thread.avatar}
+                        sideSection={thread.sideSection}
+                        title={thread.title}
+                        subtitle={thread.subtitle}
+                    />
+                ))}
+            </StyledThreadContainer>
+            <StyledSideSection>
+                <div>sample</div>
+            </StyledSideSection>
+        </StyledContainer>
+    );
+};

src/pages/forum/layout/ThreadsView/styles.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const StyledContainer = styled.div`
+    display: flex;
+    flex: 1;
+    padding: 1rem 10rem;
+    overflow-y: auto;
+    gap: 16px;
+`;
+
+export const StyledThreadContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 16px;
+`;
+
+export const StyledSideSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    padding: 16px;
+    gap: 16px;
+    background-color: #f7f7f7;
+    border: 1px solid #dddddd;
+`;

src/pages/forum/layout/index.tsx

@@ -1 +1,2 @@
-export * from './ForumBody';
+export * from './ThreadsView';
+export { Container } from './Container';

src/pages/forum/pages/Outlet/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { Container } from '../../layout';
+
+export const ForumOutlet = () => {
+    return <Container />;
+};

src/pages/forum/pages/Threads/index.tsx

@@ -0,0 +1,16 @@
+import React, { useContext, useEffect } from 'react';
+
+import { ForumContext, ForumContextWrapper } from '../../context/forumContext';
+import { ThreadsView } from '../../layout';
+import { mockedThreads } from '../../shared/mockData';
+
+export const Threads = () => {
+    const { setThreads } = useContext(ForumContext);
+
+    useEffect(() => {
+        setThreads(mockedThreads);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return <ThreadsView />;
+};