From 59db25d3b13eb42683fe73e213a05e591178ff72 Mon Sep 17 00:00:00 2001 From: Graphictoria Date: Wed, 25 May 2022 21:35:29 -0400 Subject: [PATCH] Feed js now loads from the API. Still have to finish posting. --- .../Http/Controllers/Api/FeedController.php | 11 +- web/app/Models/Shout.php | 10 + web/config/cors.php | 6 +- web/resources/js/components/Feed.js | 205 ++++++++++-------- 4 files changed, 140 insertions(+), 92 deletions(-) diff --git a/web/app/Http/Controllers/Api/FeedController.php b/web/app/Http/Controllers/Api/FeedController.php index 37c9215..e44cc86 100644 --- a/web/app/Http/Controllers/Api/FeedController.php +++ b/web/app/Http/Controllers/Api/FeedController.php @@ -6,6 +6,7 @@ use App\Http\Controllers\Controller; use App\Models\Friend; use App\Models\Shout; use App\Models\User; +use Carbon\Carbon; use Illuminate\Http\Request; use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\DB; @@ -59,11 +60,19 @@ class FeedController extends Controller /* */ + $postDate = $post['updated_at']; + if(Carbon::now()->greaterThan($postDate->copy()->addDays(2))) + $postDate = $postDate->isoFormat('LLLL'); + else + $postDate = $postDate->calendar(); + + /* */ + array_push($posts['data'], [ 'postId' => $post['id'], 'poster' => $poster, 'content' => $post['content'], - 'time' => $post['updated_at'] + 'time' => $postDate ]); } diff --git a/web/app/Models/Shout.php b/web/app/Models/Shout.php index 66e06b5..5312e3a 100644 --- a/web/app/Models/Shout.php +++ b/web/app/Models/Shout.php @@ -8,4 +8,14 @@ use Illuminate\Database\Eloquent\Model; class Shout extends Model { use HasFactory; + + /** + * The attributes that should be cast. + * + * @var array + */ + protected $casts = [ + 'created_at' => 'datetime', + 'updated_at' => 'datetime', + ]; } diff --git a/web/config/cors.php b/web/config/cors.php index 8a39e6d..8bb9f8c 100644 --- a/web/config/cors.php +++ b/web/config/cors.php @@ -15,11 +15,11 @@ return [ | */ - 'paths' => ['api/*', 'sanctum/csrf-cookie'], + 'paths' => ['*', 'sanctum/csrf-cookie'], 'allowed_methods' => ['*'], - 'allowed_origins' => ['*'], + 'allowed_origins' => ['*.gtoria.net','*.gtoria.local'], 'allowed_origins_patterns' => [], @@ -29,6 +29,6 @@ return [ 'max_age' => 0, - 'supports_credentials' => false, + 'supports_credentials' => true, ]; diff --git a/web/resources/js/components/Feed.js b/web/resources/js/components/Feed.js index 7fa78d6..c6b7747 100644 --- a/web/resources/js/components/Feed.js +++ b/web/resources/js/components/Feed.js @@ -1,103 +1,132 @@ // © XlXi 2021 // Graphictoria 5 -import { useState, useRef, useEffect } from 'react'; +import { Component } from 'react'; + +import axios from 'axios'; import Twemoji from 'react-twemoji'; import { buildGenericApiUrl } from '../util/HTTP.js'; import Loader from './Loader'; -let posts = [ - { - postId: 0, - poster: { - type: "User", - name: "XlXi", - icon: "fa-solid fa-gavel", - thumbnail: "https://www.gtoria.local/images/testing/headshot.png" - }, - content: "gah 🥚in dammmmmm", - time: "Now" - }, - { - postId: 1, - poster: { - id: 1, - type: "Group", - name: "Graphictoria", - thumbnail: "https://www.gtoria.local/images/logo.png" - }, - content: "test 2 😊", - time: "Now" - } -]; +axios.defaults.withCredentials = true; -const Feed = () => { - const inputRef = useRef(); - const submitRef = useRef(); - const feedRef = useRef(); - const [feedLoaded, setFeedLoaded] = useState(true); - const [mouseHover, setMouseHover] = useState(-1); - - useEffect(() => { +class Feed extends Component { + constructor(props) { + super(props); + this.state = { + feedLoaded: false, + loadingCursor: false, + feedPosts: [], + mouseHover: -1 + }; - }); + this.loadMore = this.loadMore.bind(this); + } - return ( - <> -

My Feed

-
-
- - -
-
- { - feedLoaded ? - ( - posts.length > 0 ? -
- { - posts.map(({ postId, poster, time, content }, index) => - <> -
setMouseHover(index) } onMouseLeave={ () => setMouseHover(-1) }> -
- - { poster.type == 'User' ? - : - - } - -
-
-
- { poster.name }{ poster.icon ? <>  : null } - { mouseHover == index ? Report : null } -

{ time }

-
- -

{ content }

- -
-
- { posts.length != (index+1) ?
: null } - - ) - } -
- : -
-

No posts were found. You could be the first!

-
- ) - : -
- -
+ componentWillMount() { + window.addEventListener('scroll', this.loadMore); + } + + componentWillUnmount() { + window.removeEventListener('scroll', this.loadMore); + } + + componentDidMount() { + axios.get(buildGenericApiUrl('api', 'feed/v1/list-json')) + .then(res => { + const posts = res.data; + + this.nextCursor = posts.next_cursor; + this.setState({ feedPosts: posts.data, feedLoaded: true }); + }); + } + + // XlXi: https://stackoverflow.com/questions/57778950/how-to-load-more-search-results-when-scrolling-down-the-page-in-react-js + loadMore() { + // XlXi: Taking the height of the footer into account. + if (window.innerHeight + document.documentElement.scrollTop >= document.scrollingElement.scrollHeight-200) { + if (!!(this.nextCursor) && !this.state.loadingCursor) { + this.setState({ loadingCursor: true }); + + axios.get(buildGenericApiUrl('api', `feed/v1/list-json?cursor=${this.nextCursor}`)) + .then(res => { + const posts = res.data; + + this.nextCursor = posts.next_cursor; + this.setState({ feedPosts: this.state.feedPosts.concat(posts.data), loadingCursor: false }); + }); } - - ); -}; + } + } + + render() { + return ( + <> +

My Feed

+
+
+ + +
+
+ { + this.state.feedLoaded ? + ( + this.state.feedPosts.length > 0 ? + <> +
+ { + this.state.feedPosts.map(({ postId, poster, time, content }, index) => + <> +
this.setState({ mouseHover: index }) } onMouseLeave={ () => this.setState({ mouseHover: -1 }) }> +
+ + { poster.type == 'User' ? + : + + } + +
+
+
+ { poster.name }{ poster.icon ? <>  : null } + { this.state.mouseHover == index ? Report : null } +

{ time }

+
+ +

{ content }

+ +
+
+ { this.state.feedPosts.length != (index+1) ?
: null } + + ) + } +
+ { + this.state.loadingCursor ? +
+ +
+ : + null + } + + : +
+

No posts were found. You could be the first!

+
+ ) + : +
+ +
+ } + + ); + } +} export default Feed; \ No newline at end of file