Merge pull request #98 from MaxCunningham19/Massimiliano/api-fe-integ…

…ration

Massimiliano / Frontend and backend integration

.gitignore

@@ -1,2 +1,8 @@
 /node_modules
-/env
+/env
+/static
+/api/migrations
+/api/__pycache__
+/client/migrations
+/client/__pycache__
+/server/__pycache__

client/src/components/Carousel.js

@@ -18,27 +18,32 @@ export const Carousel = ({ data, validateAll }) => {
 
   const onAddParagraphClick = (e) => {
     setCarouselData([
-      ...carouselData,
-      {block_order: carouselData.length, block_content: ""}
+      ...carouselData, ""
     ])
     mapCarouselComponents()
   }
 
   const onRemoveParagraphClick = (e, id) => {
     setCarouselData(
-      carouselData.filter(item =>
-        item.block_order !== id)
+      filterParagraph(id, id)
     )
     mapCarouselComponents()
   }
 
+  const filterParagraph = (start, end) => {
+    const left = carouselData.slice(0, start)
+    const right = carouselData.slice(end+1)
+    const filtered = left.concat(right)
+    return filtered
+  }
+
   const mapCarouselComponents = () => {
-    return carouselData.map(({ block_order, block_content }) => (
+    return carouselData.map((block, index ) => (
       <TextBox 
         boxStyle="paragraph-text-box"
-        key={block_order}
-        id={block_order}
-        content={block_content}
+        key={index}
+        id={index}
+        content={block}
         placeHolder="Start typing"
         onChangeInput={onChangeInput}
         onRemoveClick={onRemoveParagraphClick}

client/src/components/Explorer.js

@@ -1,24 +1,18 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styles from './ExplorerPreview.module.css'
 import { ExplorerPreview } from './ExplorerPreview'
 // TODO: import { ExplorerList } from './ExplorerList'
 
 export const Explorer = ({
   documentsData,
-  handleOnClickDocument,
-  handleOnClickAdd
 }) => {
 
-  const [explorerData, setExplorerData] = useState(documentsData)
-
   return (
     <>
       <section className={styles['Explorer']}>
         <div className={styles['explorer-container']}>
           <ExplorerPreview 
-            explorerData={explorerData}
-            onClickPreview={handleOnClickDocument}
-            onClickAdd={handleOnClickAdd}
+            explorerData={documentsData}
           />
           {/*TODO: ExplorerPreview can then be swapped to ExplorerList*/}
         </div>

client/src/components/ExplorerPreview.js

@@ -6,20 +6,21 @@ import { PreviewIcon } from './PreviewIcon'
 import { Link } from 'react-router-dom'
 
 export const ExplorerPreview = ({
-  explorerData,
-  onClickPreview,
-  onClickAdd
+  explorerData
 }) => {
 
   const generatePreviews = () => {
-    return explorerData.map(document => (
-      <Link to="/editor" state={{ fromMyDocuments: document }}>
+    return explorerData.map((document) => (
+      <Link 
+        to="/editor" 
+        state={{ fromMyDocuments: document }} 
+        className={styles['preview-link-a']}
+      >
         <PreviewIcon
           previewStyle="preview-icon-explorer"
-          key={document.title}
+          key={document.id} 
+          id={document.id}
           title={document.title}
-          body={document.blocks[0].block_content}
-          onClickPreview={onClickPreview}
         />
       </Link>
     ))
@@ -30,16 +31,12 @@ export const ExplorerPreview = ({
       <section className={styles['ExplorerPreview']}>
         <div className={styles['explorer-container']}>
           <Link 
-            to="/editor" 
-            state={{ fromMyDocuments: {
-              title: "New document", created_at: "", updated_at: "",
-              blocks: [
-                {
-                  block_content: "",
-                  block_order: 0
-                }
-              ]
-            }}} 
+            to="/editor"
+            state={{ fromMyDocuments: { 
+              title: "New document",
+              blocks: [""] 
+            } }}
+            className={styles['preview-link-a']}  
           >
             <Button 
               buttonStyle="icon-add-component-document" 

client/src/components/ExplorerPreview.module.css

@@ -15,5 +15,9 @@
     composes: icon-add-component-document-icon from './Button.module.css';
 }
 
+.preview-link-a {
+    height: 192px;
+}
+
 
 

client/src/components/Navbar.js

@@ -7,7 +7,6 @@ import styles from './Navbar.module.css'
 
 export const Navbar = ( { fromEditor, fromMyDocuments }) => {
 
-
   return (
     <>   
       <nav className={styles['Navbar']}>

client/src/components/Navbar.module.css

@@ -31,6 +31,3 @@
         composes: icon-navbar-selected-icon from './Button.module.css';
     }
 
-a {
-    text-decoration: none;
-}

client/src/components/PreviewIcon.js

@@ -1,20 +1,36 @@
-import React from 'react'
+import React, { useLayoutEffect, useState } from 'react'
 import styles from './PreviewIcon.module.css'
+import axios from 'axios'
 
 const PREVIEW_CHAR_LIMIT = 220
 
 export const PreviewIcon = ({
     onClickPreview,
     previewStyle,
     title,
-    body
+    id
 }) => {
 
-    const adaptToPreview = (body) => {
+    const [preview, setPreview] = useState("")
+
+    useLayoutEffect(() => {
+        fetchPreviewsData()
+    }, [])
+
+    const fetchPreviewsData = () => {
+        axios
+          .get(`/api/document/${id}`)
+          .then((result) => {
+            setPreview(result.data[0].block_content)
+          })
+          .catch((error) => {})
+    }
+
+    const adaptToPreview = (preview) => {
         return (
-            (body.length) > PREVIEW_CHAR_LIMIT 
-                ? body.substring(0, PREVIEW_CHAR_LIMIT)
-                : body
+            (preview.length) > PREVIEW_CHAR_LIMIT 
+                ? preview.substring(0, PREVIEW_CHAR_LIMIT)
+                : preview
         )
     }
 
@@ -27,9 +43,9 @@ export const PreviewIcon = ({
                 <span className={styles[previewStyle + "-title"]}>
                     {title}
                 </span>
-                { body &&
+                { 
                     <div className={styles[previewStyle + "-body"]}>
-                        {adaptToPreview(body)}
+                        {adaptToPreview(preview)}
                     </div>
                 }
             </button>

client/src/data/mockAPI.json

@@ -1,6 +1,7 @@
 {
     "documents": [
         {
+            "id": 3,
             "title": "Irish Constitution",
             "created_at": "",
             "updated_at": "",
@@ -24,6 +25,7 @@
             ]
         },
         {
+            "id": 4,
             "title": "Declaration of Independence",
             "created_at": "",
             "updated_at": "",

client/src/data/mockAPIpost.json

@@ -0,0 +1,23 @@
+{
+    "documents": [
+        {
+            "title": "Irish Constitution",
+            "blocks": [
+                "In the Name of the Most Holy Trinity, from Whom is all authority and to Whom, as our final end, all actions both of men and States must be referred, We, the people of Éire Humbly acknowledging all our obligations to our Divine Lord, Jesus Christ, Who sustained our fathers through centuries of trial, Gratefully remembering their heroic and unremitting struggle to regain the rightful independence of our Nation, And seeking to promote the common good, with due observance of Prudence, Justice and Charity, so that the dignity and freedom of the individual may be assured, true social order attained, the unity of our country restored, and concord established with other nations, Do hereby adopt, enact, and give to ourselves this Constitution.",
+                "The Irish nation hereby affirms its inalienable, indefeasible, and sovereign right to choose its own form of Government, to determine its relations with other nations, and to develop its life, political, economic and cultural, in accordance with its own genius and traditions.",
+                "It is the entitlement and birthright of every person born in the island of Ireland, which includes its islands and seas, to be part of the Irish Nation. That is also the entitlement of all persons otherwise qualified in accordance with law to be citizens of Ireland. Furthermore, the Irish nation cherishes its special affinity with people of Irish ancestry living abroad who share its cultural identity and heritage. It is the firm will of the Irish nation, in harmony and friendship, to unite all the people who share the territory of the island of Ireland, in all the diversity of their identities and traditions, recognising that a united Ireland shall be brought about only by peaceful means with the consent of a majority of the people, democratically expressed, in both jurisdictions in the island. Until then, the laws enacted by the Parliament established by this Constitution shall have the like area and extent of application as the laws enacted by the Parliament that existed immediately before the coming into operation of this Constitution. Institutions with executive powers and functions that are shared between those jurisdictions may be established by their respective responsible authorities for stated purposes and may exercise powers and functions in respect of all or any part of the island.",
+                "All natural resources, including the air and all forms of potential energy, within the jurisdiction of the Parliament and Government established by this Constitution and all royalties and franchises within that jurisdiction belong to the State subject to all estates and interests therein for the time being lawfully vested in any person or body. All land and all mines, minerals and waters which belonged to Saorstát Éireann immediately before the coming into operation of this Constitution belong to the State to the same extent as they then belonged to Saorstát Éireann. Provision may be made by law for the management of the property which belongs to the State by virtue of this Article and for the control of the alienation, whether temporary or permanent, of that property. Provision may also be made by law for the management of land, mines, minerals and waters acquired by the State after the coming into operation of this Constitution and for the control of the alienation, whether temporary or permanent, of the land, mines, minerals and waters so acquired."
+            ]
+        },
+        {
+            "title": "Declaration of Independence",
+            "blocks": [
+                "When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.",
+                "We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.--Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States. To prove this, let Facts be submitted to a candid world.",
+                "In every stage of these Oppressions We have Petitioned for Redress in the most humble terms: Our repeated Petitions have been answered only by repeated injury. A Prince whose character is thus marked by every act which may define a Tyrant, is unfit to be the ruler of a free people.",
+                "Nor have We been wanting in attentions to our Brittish brethren. We have warned them from time to time of attempts by their legislature to extend an unwarrantable jurisdiction over us. We have reminded them of the circumstances of our emigration and settlement here. We have appealed to their native justice and magnanimity, and we have conjured them by the ties of our common kindred to disavow these usurpations, which, would inevitably interrupt our connections and correspondence. They too have been deaf to the voice of justice and of consanguinity. We must, therefore, acquiesce in the necessity, which denounces our Separation, and hold them, as we hold the rest of mankind, Enemies in War, in Peace Friends.",
+                "We, therefore, the Representatives of the united States of America, in General Congress, Assembled, appealing to the Supreme Judge of the world for the rectitude of our intentions, do, in the Name, and by Authority of the good People of these Colonies, solemnly publish and declare, That these United Colonies are, and of Right ought to be Free and Independent States; that they are Absolved from all Allegiance to the British Crown, and that all political connection between them and the State of Great Britain, is and ought to be totally dissolved; and that as Free and Independent States, they have full Power to levy War, conclude Peace, contract Alliances, establish Commerce, and to do all other Acts and Things which Independent States may of right do. And for the support of this Declaration, with a firm reliance on the protection of divine Providence, we mutually pledge to each other our Lives, our Fortunes and our sacred Honor."
+            ]
+        }
+    ]
+}

client/src/index.module.css

@@ -20,3 +20,6 @@ body {
     overflow: hidden;
 }
 
+a {
+    text-decoration: none;
+}

client/src/pages/EditorPage.js

@@ -5,23 +5,45 @@ import Navbar from '../components/Navbar';
 import Header from '../components/Header';
 import Editor from '../components/Editor';
 import styles from './EditorPage.module.css';
-import mockAPIData from '../data/mockAPI.json';
+import axios from 'axios'
 
 export function EditorPage() {
 
     const [validateAll, setValidateAll] = useState(false)
     const location = useLocation()
-    const [documentsData, setDocumentsData] = useState(mockAPIData.documents)
-    const [currentDocument, setCurrentDocument] = useState(documentsData[0])
+    const [currentDocument, setCurrentDocument] = useState({   
+      title: "New document",
+      blocks: [""]
+    })
     const didMount = useDidMount()
 
     useEffect(() => {
       if( location.state !== null) {
         const { fromMyDocuments } = location.state
-        setCurrentDocument(fromMyDocuments)
+        fetchDocumentBlocks(fromMyDocuments)
       }
     },[location.state])
 
+    const fetchDocumentBlocks = (document) => {
+      axios
+        .get(`/api/document/${document.id}`)
+        .then((result) => {
+          setCurrentDocument(prevDocument => ({
+            ...prevDocument, title: document.title, blocks: parseBlocks(result.data)
+          }))
+        })
+        .catch((error) => { setCurrentDocument(prevDocument => ({
+          ...prevDocument, title: document.title, blocks: document.blocks
+        }))})
+    }
+
+    const parseBlocks = (result) => {
+      const parsedBlocks = []
+      result.map(block => {
+        parsedBlocks.push(block.block_content)
+      })
+      return parsedBlocks
+    }
 
     const handleOnValidateAll = () => {
       setValidateAll(true)