From 429242428299edc9cc3bd8d55e05c0ec3980c38d Mon Sep 17 00:00:00 2001 From: David Martinelli Date: Sun, 18 Feb 2024 01:25:11 +0000 Subject: [PATCH] update components folders and add fetch real data from github --- src/components/Loading.tsx | 3 + src/pages/Blog/Blog.tsx | 49 +++++++++++++ src/pages/Blog/components/ProfileResume.tsx | 63 ++++++++++------- src/pages/Blog/index.ts | 3 + src/pages/Blog/index.tsx | 77 --------------------- src/pages/Post/Post.tsx | 7 ++ src/pages/Post/index.ts | 1 + 7 files changed, 102 insertions(+), 101 deletions(-) create mode 100644 src/components/Loading.tsx create mode 100644 src/pages/Blog/Blog.tsx create mode 100644 src/pages/Blog/index.ts delete mode 100644 src/pages/Blog/index.tsx create mode 100644 src/pages/Post/Post.tsx create mode 100644 src/pages/Post/index.ts diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 0000000..503150c --- /dev/null +++ b/src/components/Loading.tsx @@ -0,0 +1,3 @@ +export function Loading() { + return
Loading...
; +} diff --git a/src/pages/Blog/Blog.tsx b/src/pages/Blog/Blog.tsx new file mode 100644 index 0000000..61dc08c --- /dev/null +++ b/src/pages/Blog/Blog.tsx @@ -0,0 +1,49 @@ +import { Input } from '@components/forms/Input'; +import { BlogHeader } from './components/BlogHeader'; +import { ProfileResume } from './components/ProfileResume'; +import { Scrollbars } from 'rc-scrollbars'; +import { useQuery } from 'react-query'; +import Markdown from 'react-markdown'; +import { service } from '@services/axiosConfig'; +import { Issue, Item } from '../../models/issue.interface'; +import { formatDistanceToNow } from 'date-fns'; + +export function Blog() { + const { data } = useQuery('posts', async () => { + const res = (await service.get('/search/issues?q=repo:davidrock/github-blog')).data; + + console.log(res); + return res; + }); + + return ( +
+ + +
+ +
+
+

Posts

+ {data?.total_count} posts +
+ +
+ {data?.items.map((p: Item) => ( +
+
+

{p.title}

+ {formatDistanceToNow(p.updated_at, { addSuffix: true })} +
+
+ {p.body} +
+
+ ))} +
+
+
+ +
+ ); +} diff --git a/src/pages/Blog/components/ProfileResume.tsx b/src/pages/Blog/components/ProfileResume.tsx index 0db78bc..c1aaa42 100644 --- a/src/pages/Blog/components/ProfileResume.tsx +++ b/src/pages/Blog/components/ProfileResume.tsx @@ -1,36 +1,51 @@ +import { service } from '@services/axiosConfig'; +import { useQuery } from 'react-query'; import { FaGithub } from 'react-icons/fa6'; import { FaBuilding } from 'react-icons/fa6'; import { FaUserGroup } from 'react-icons/fa6'; import { FaArrowUpRightFromSquare } from 'react-icons/fa6'; +import { Profile } from '@models'; +import { Loading } from '@components/Loading'; export function ProfileResume() { + const { data, isFetched } = useQuery( + 'profile', + async () => { + return (await service.get('/users/davidrock')).data; + }, + { refetchInterval: false }, + ); + return (
- -
-

David Rock

-

- Tristique volutpat pulvinar vel massa, pellentesque egestas. Eu viverra massa quam dignissim aenean malesuada - suscipit. Nunc, volutpat pulvinar vel mass. -

-
-
- davidrock -
-
- Booking.com -
-
- 32 seguidores + {isFetched ? ( + <> + +
+

{data?.name}

+

{data?.bio}

+
+
+ {data?.login} +
+
+ {data?.company} +
+
+ {data?.followers} +
+
+
-
- -
+ + ) : ( + + )}
); } diff --git a/src/pages/Blog/index.ts b/src/pages/Blog/index.ts new file mode 100644 index 0000000..ba088f0 --- /dev/null +++ b/src/pages/Blog/index.ts @@ -0,0 +1,3 @@ +export * from './Blog'; +export * from './components/BlogHeader'; +export * from './components/ProfileResume'; diff --git a/src/pages/Blog/index.tsx b/src/pages/Blog/index.tsx deleted file mode 100644 index aa3f5f3..0000000 --- a/src/pages/Blog/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Input } from '@components/forms/Input'; -import { BlogHeader } from './components/BlogHeader'; -import { ProfileResume } from './components/ProfileResume'; -import { Scrollbars } from 'rc-scrollbars'; - -export function Blog() { - return ( -
- - -
- -
-
-

Posts

- 6 posts -
- -
-
-
-

Javascaript data types and data structures

- 1 day ago -
-

- Programming languages all have built-in data structures, but these often differ from one language to - another. This article attempts to list the built-in data structures available in JavaScript and what - properties they have. These can be used to build other data structures. Wherever possible, comparisons - with other languages are drawn. Dynamic typing JavaScript is a loosely typed and dynamic language. - Variables in JavaScript are not directly associated with any particular value type, and any variable - can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = - 'bar'; // foo is now a string foo = true; // foo is now a boolean -

-
-
-
-

Javascaript data types and data structures

- 1 day ago -
-

- Programming languages all have built-in data structures, but these often differ from one language to - another. This article attempts to list the built-in data structures available in JavaScript and what - properties they have. These can be used to build other data structures. Wherever possible, comparisons - with other languages are drawn. Dynamic typing JavaScript is a loosely typed and dynamic language. - Variables in JavaScript are not directly associated with any particular value type, and any variable - can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = - 'bar'; // foo is now a string foo = true; // foo is now a boolean - Programming languages all have built-in data structures, but these often differ from one language to - another. This article attempts to list the built-in data structures available in JavaScript and what - properties they have. These can be used to build other data structures. Wherever possible, comparisons - with other languages are drawn. Dynamic typing JavaScript is a loosely typed and dynamic language. - Variables in JavaScript are not directly associated with any particular value type, and any variable - can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = - 'bar'; // foo is now a string foo = true; // foo is now a boolean - Programming languages all have built-in data structures, but these often differ from one language to - another. This article attempts to list the built-in data structures available in JavaScript and what - properties they have. These can be used to build other data structures. Wherever possible, comparisons - with other languages are drawn. Dynamic typing JavaScript is a loosely typed and dynamic language. - Variables in JavaScript are not directly associated with any particular value type, and any variable - can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = - 'bar'; // foo is now a string foo = true; // foo is now a boolean - Programming languages all have built-in data structures, but these often differ from one language to - another. This article attempts to list the built-in data structures available in JavaScript and what - properties they have. These can be used to build other data structures. Wherever possible, comparisons - with other languages are drawn. Dynamic typing JavaScript is a loosely typed and dynamic language. - Variables in JavaScript are not directly associated with any particular value type, and any variable - can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = - 'bar'; // foo is now a string foo = true; // foo is now a boolean -

-
-
-
-
- -
- ); -} diff --git a/src/pages/Post/Post.tsx b/src/pages/Post/Post.tsx new file mode 100644 index 0000000..9b10492 --- /dev/null +++ b/src/pages/Post/Post.tsx @@ -0,0 +1,7 @@ +export function Post() { + return ( + <> +

Post

+ + ); +} diff --git a/src/pages/Post/index.ts b/src/pages/Post/index.ts new file mode 100644 index 0000000..dc0dc89 --- /dev/null +++ b/src/pages/Post/index.ts @@ -0,0 +1 @@ +export * from '.';