✅: open post link directly ; 📌 analytics

Author: skazi019

Pipfile

@@ -10,6 +10,7 @@ gunicorn = "*"
 notion-client = "*"
 python-dotenv = "*"
 django-cors-headers = "*"
+requests = "*"
 
 [dev-packages]
 black = "*"

Pipfile.lock

@@ -116,8 +116,9 @@ I use it everyday from planning and todos to notes and content and now, even blo
 - [X] Lazy load images
  - [X] Have added loading attribute to the img tag
 - [X] Post open, shows loading for a split second but the content still takes time to load - switched to useState instead of Suspense
-- [ ] Error when individual post url open instead of opening from home page - need to fix this so i can share articles
-- [ ] After above fix add sharing option in navbar
+- [X] Error when individual post url open instead of opening from home page - need to fix this so i can share articles
+- [X] After above fix add sharing option in navbar
+- [ ] Add analytics
 
 ### Visual
 - [X] make proper padding for all blocks

README.md

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import useArticleStore from '../store';
 import Post from './post';
 import PostLoader from './postloader';
+import { fetchAllArticles } from './utilities';
 
 
 export default function BlogPost(props) {
@@ -11,15 +12,40 @@ export default function BlogPost(props) {
 
  const [isLoading, setLoading] = useState(true);
 
- const { page, getPageFromSlug } = useArticleStore((state) => ({
+ const { articles, setArticles, page, setPage, getPageFromSlug } = useArticleStore((state) => ({
+ articles: state.articles,
+ setArticles: state.setArticles,
  page: state.page,
+ setPage: state.setPage,
  getPageFromSlug: state.getPageFromSlug,
  }));
 
+ async function fetchPage() {
+ if (articles.length < 1) {
+ console.log('Making page request')
+ await fetch(process.env.REACT_APP_BACKEND_URI + '/get-page/' + data.slug,
+ {
+ method: "GET",
+ mode: 'cors',
+ headers: {
+ 'Content-Type': 'application/json',
+ "Accept": "application/json",
+ }
+ }
+ ).then(async (response) => {
+ const res = await response.json();
+ const result = res.page_properties;
+ setPage(result)
+ setLoading(false)
+ })
+ } else {
+ getPageFromSlug(data.slug)
+ setLoading(false)
+ }
+ }
 
  useEffect(() => {
- getPageFromSlug(data.slug);
- setLoading(false);
+ fetchPage();
  }, [])
 
 
@@ -28,7 +54,7 @@ export default function BlogPost(props) {
  {
  isLoading ?
  <main>
- <section className='max-w-2xl mx-auto my-20'>
+ <section className='my-20 px-6 md:px-0 mx-auto md:w-sm lg:w-md lg:max-w-4xl'>
  <PostLoader />
  </section>
  </main>

src/Components/blogpost.jsx

@@ -3,13 +3,19 @@ import { Link } from 'react-router-dom'
 
 export default function Navbar() {
  return (
- <nav className=''>
+ <nav className='relative flex flex-row justify-between items-center'>
  <Link to="/" className='text-sm fixed top-4 left-10 flex flex-row justify-start items-center gap-2'>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
  </svg>
  <p>Back</p>
  </Link>
+
+ <button className='fixed top-4 right-10 text-sm'>
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+ <path strokeLinecap="round" strokeLinejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
+ </svg>
+ </button>
  </nav>
  )
 }

src/Components/navbar.jsx

@@ -8,7 +8,7 @@ export const containsObject = (obj, list) => {
  return false;
 }
 
-export function fetchAllArticles(setArticlesFunc) {
+export async function fetchAllArticles(setArticlesFunc) {
  fetch(process.env.REACT_APP_BACKEND_URI + '/get-database/',
  {
  method: "GET",

src/Components/utilities.jsx

@@ -5,6 +5,6 @@
 
 urlpatterns = [
  path(route="get-database/", view=getDatabase, name="get-database"),
- path(route="get-page/<str:id>", view=getPage, name="get-page"),
+ path(route="get-page/<str:slug>", view=getPage, name="get-page"),
  path(route="get-blocks/<str:id>", view=getBlocks, name="get-blocks"),
 ]

v1/__pycache__/urls.cpython-310.pyc

@@ -1,14 +1,16 @@
-from doctest import master
 import os
+import requests
 from rest_framework import status
 from rest_framework.decorators import api_view
 from rest_framework.response import Response
 from notion_client import Client
 
 
+notion = Client(auth=os.environ.get("NOTION_TOKEN"))
+
 @api_view(["GET"])
 def getDatabase(request):
- notion = Client(auth=os.environ.get("NOTION_TOKEN"))
+ global notion
  try:
  notiondatabse = notion.databases.query(
  **{
@@ -50,10 +52,20 @@ def getDatabase(request):
 
 
 @api_view(["GET"])
-def getPage(request, id):
- notion = Client(auth=os.environ.get("NOTION_TOKEN"))
+def getPage(request, slug):
+ global notion
  try:
- notionPage = notion.pages.retrieve(page_id=id)
+ allArticles = requests.get(
+ url=os.path.join(os.environ["REACT_APP_BACKEND_URI"], "get-database"),
+ headers={
+ "Content-Type": "application/json",
+ "Accept": "application/json",
+ },
+ ).json()
+ allArticles = allArticles["results"]
+ for page in allArticles:
+ if page["properties"]["slug"]["rich_text"][0]["plain_text"] == slug:
+ notionPage = notion.pages.retrieve(page_id=page["id"])
  except Exception as e:
  return Response(
  data={
@@ -100,13 +112,14 @@ def hasChildren(parentBlock: any, notion: Client):
  else:
  masterBlock["children"] = getChildBlock(notion=notion, id=masterBlock["id"])
  for index, child in enumerate(masterBlock["children"]):
- masterBlock["children"][index] = hasChildren(parentBlock=child, notion=notion)
+ masterBlock["children"][index] = hasChildren(
+ parentBlock=child, notion=notion
+ )
  return masterBlock
 
 
 @api_view(["GET"])
 def getBlocks(request, id):
- notion = Client(auth=os.environ.get("NOTION_TOKEN"))
  try:
  blocks = getChildBlock(notion=notion, id=id)
  for index, block in enumerate(blocks):