Merge pull request #22 from TryShape/issue-12-creator-info

feat: Now showing the creator name, photo and the formatted creation …

Author: atapas

components/core/App.js

@@ -28,13 +28,22 @@ const App = (props) => {
       // User is not logged In
       shapes = await harperFetch({
         operation: "sql",
-        sql: "SELECT * from tryshape.shapes as s where s.private = false",
+        sql: `SELECT * 
+          FROM tryshape.shapes s 
+          INNER JOIN tryshape.users u 
+          ON s.createdBy=u.email 
+          WHERE s.private=false`,
       });
     } else {
       // User is logged in. Let's fetch the private shape and pther public shapes.
       shapes = await harperFetch({
         operation: "sql",
-        sql: `SELECT * from tryshape.shapes WHERE createdBy = '${user.email}' OR private = false`,
+        sql: `SELECT *
+          FROM tryshape.shapes s
+          INNER JOIN tryshape.users u 
+          ON s.createdBy=u.email 
+          WHERE s.private=false 
+          OR createdBy = '${user.email}'`,
       });
     }
 

components/utils/ShapeList.js

@@ -25,6 +25,9 @@ import { ExportShape } from '..';
 // misc unitless
 import { getShapeFileName, getShapeId } from '../../utils/misc';
 
+// date-fns
+import { formatRelative } from "date-fns";
+
 // Shape Listing Styled-Componentns
 const ShapeCards = styled.div`
     display: flex;
@@ -178,7 +181,11 @@ const ShapeList = ({ setOpen, user, data }) => {
               />
 
               <div>
-                <span>Created By {shape.createdBy} at {shape['__createdtime__']}</span>
+                <span>
+                  Created By 
+                  <img src={shape.photoURL} alt={shape.name1} height='30px' width='30px' />
+                  {shape.name1} at {formatRelative(shape['__createdtime__'], new Date())}
+                </span>
               </div>
 
               <ShapeCardSwitch>

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "bootstrap": "4.6.0",
+    "date-fns": "^2.22.1",
     "downloadjs": "^1.4.7",
     "firebase": "^8.6.7",
     "html-to-image": "^1.6.2",

yarn.lock

@@ -1058,6 +1058,11 @@ data-uri-to-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+date-fns@^2.22.1:
+  version "2.22.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4"
+  integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==
+
 debug@2:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"