feat: init coursechapter + elements interface

front/components/auth/HeaderProfileBox.tsx

@@ -2,53 +2,57 @@ import React from "react";
 import styled from "styled-components";
 import Link from "next/link";
 import { AuthContext } from "../security/AuthProvider";
+import { getBackendUrl } from "../../services/config";
 
 export const HeaderProfileBox = () => {
   const auth: any = React.useContext(AuthContext);
-
+  
   return (
     <ProfileArea>
-      {" "}
-      <span>
-        HeaderProfileBox <br />  isLogged : {String(auth.isAuthenticated)}  <br /> user : {String(auth.userInfo.username)}
-      </span>{" "}
-      <UnidentifiedArea>
-        <ul>
-          <li>
-            <Link href="/login">
-              <a>Login</a>
-            </Link>
-          </li>
-          <li>
-            <Link href="/signup">
-              <a>Sign up</a>
-            </Link>
-          </li>
-        </ul>
-      </UnidentifiedArea>
+      {!auth.isAuthenticated && (
+        <UnidentifiedArea>
+          <ul>
+            <li>
+              <Link href="/login">
+                <a>Login</a>
+              </Link>
+            </li>
+            <li>
+              <Link href="/signup">
+                <a>Sign up</a>
+              </Link>
+            </li>
+          </ul>
+        </UnidentifiedArea>
+      )}
+      {auth.isAuthenticated && <AccountArea>
+        <div>{auth.userInfo.username}</div>
+        <div><img src={`${getBackendUrl()}content/uploads/img/${auth.userInfo.avatar_url}`} alt="" /></div>
+        </AccountArea>}
     </ProfileArea>
   );
 };
 
+const AccountArea = styled.div`
+  padding-right: 20px;
+  display: flex;
+  place-items: center;
+
+  div{
+    margin-right: 10px;
+  }
+  img{
+    width: 29px;
+    border-radius: 19px;
+  }
+`;
+
 const ProfileArea = styled.div`
   display: flex;
   place-items: stretch;
   place-items: center;
 
-  span {
-    position: relative;
-    display: block;
-    top: 32px;
-    right: -20px;
-    padding: 6px;
-    font-size: 12px;
-    margin: 3px;
-    // blur 
-    background-color: #19191960;
-    border-radius: 5px;
-    color: white;
-    width: auto;
-  }
+
 `;
 
 const UnidentifiedArea = styled.div`

front/components/drags/chapter.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import styled from "styled-components";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import Element, { ElementWrapper } from "./element";
+
+
+const ChapterWrapper = styled.div`
+  margin-bottom: 5px;
+  padding: 11px;
+  background-color: #00000010;
+  width: 310px;
+  display: block;
+  border-radius: 9px;
+  border: 1px solid rgba(255, 255, 255, 0.19);
+  box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
+  transition: all 0.2s ease;
+`;
+
+function Chapter(props: any) {
+  return (
+    <Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
+      {(provided, snapshot) => (
+        <ChapterWrapper {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef} isDragging={snapshot.isDragging} key={props.info.list.chapter.id}>
+          <h3>{props.info.list.chapter.title}</h3>
+          <Droppable droppableId={props.info.list.chapter.id} type="element">
+            {(provided) => (
+              <ElementsList {...provided.droppableProps} ref={provided.innerRef}>
+                {props.info.list.elements.map((element: any, index: any) => (
+                  <Element key={element.id} element={element} index={index}></Element>
+                ))}
+                {provided.placeholder}
+              </ElementsList>
+            )}
+          </Droppable>
+        </ChapterWrapper>
+      )}
+    </Draggable>
+  );
+}
+
+const ElementsList = styled.div`
+  padding: 10px;
+`;
+
+
+
+export default Chapter;

front/components/drags/data.ts

@@ -0,0 +1,16 @@
+export const initialData = {
+  elements: {
+    "element-1": { id: "element-1", content: "First element" },
+    "element-2": { id: "element-2", content: "Second element" },
+    "element-3": { id: "element-3", content: "Third element" },
+    "element-4": { id: "element-4", content: "Fourth element" },
+    "element-5": { id: "element-5", content: "Fifth element" },
+  },
+  chapters: {
+    "chapter-1": { id: "chapter-1", title: "Chapter 1", elementIds: ["element-1", "element-2", "element-3", ] },
+    "chapter-2": { id: "chapter-2", title: "Chapter 2", elementIds: ["element-4"] },
+    "chapter-3": { id: "chapter-3", title: "Chapter 3", elementIds: ["element-5"] },
+
+  },
+  chapterOrder: ["chapter-1", "chapter-2", "chapter-3"],
+};

front/components/drags/element.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {  Draggable } from "react-beautiful-dnd";
+import styled from "styled-components";
+
+function Element(props: any) {
+  return (
+    <Draggable draggableId={props.element.id} index={props.index}>
+      {(provided) => (
+        <ElementWrapper {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+          {props.element.content}
+        </ElementWrapper>
+      )}
+    </Draggable>
+  );
+}
+
+export const ElementWrapper = styled.div`
+  padding: 10px;
+  padding-left: 17px;
+  list-style: none;
+  /* padding-left: 2px; */
+  background-color: #8c949c33;
+  border-radius: 28px;
+  margin: 15px;
+
+  &:hover {
+    background-color: #8c949c7b;
+  }
+  
+`;
+export default Element;

front/components/security/AuthProvider.tsx

@@ -34,11 +34,15 @@ const AuthProvider = (props: any) => {
     }
   }
 
-   // TODO(mvp) : fix performance issues > no need to check auth on every render
+  
+
   useEffect(() => {
-    if (!auth.isAuthenticated) {
+    if (auth.isLoading) {
       checkAuth();
     }
+    return () => {
+      auth.isLoading = false;
+    }
   }, []);
 
   return <AuthContext.Provider value={auth}>{props.children}</AuthContext.Provider>;