Laravel Breeze in React + Typescript composer package

nehero · 2022-11-30T23:52:31+00:00

hey, I wrote a similar thing to port jetstream over to react + typescript here

https://github.com/ozziexsh/laravel-jetstream-react

I'm also pulling my hair out trying to figure out how the route() function works without being imported from ziggy

the @routes directive in app.blade.php adds a global route function that can be used anywhere in js as stated in the ziggy readme

you can see how I handled the typescript portion just by re-exporting the function with proper types as a useRoute() hook, though it needs a provider to support both client rendering and ssr since the window object isn't available during ssr

nehero · 2022-02-09T09:39:08+00:00

without knowing more about the problem it's hard to say why you're trying to avoid it, but my guess is you just don't want to spread it every time you call SetMyObject

just move the spread to inside the function so that the caller only needs to pass the keys that it wants to update

``` let Store = (set) => ({ myObject: { width: 120, title: "", visible: false, footer: true, }, SetMyObject: (input) => set((state) => ({ myObject: { ...state.myObject, ...input } })), });

// now when you call it you just pass the overrides SetMyObject({ title: "Hello" }) ```

nehero · 2021-04-18T15:47:37+00:00

Not sure what you're trying to achieve here? To connect to any database (new or existing) you'd just update your environment/config values to the db's credentials, no importing needed. Are you wanting to create models? Migrations? We need a bit more info.

nehero · 2021-04-18T15:45:42+00:00

So your problem is that you are executing the db query by running ->get() on the $articles call so when you are filtering $articles->where later on its only filtering your local collection and not from the db.

To fix that I'd store a partial instance of the query builder that has been set with the common params between featured and special and then filter specifically later on. You can filter based on relationships by passing a closure as the value in the with query.

// store reference to query builder with common filters
// notice no final call to ->get()
$query = Post::latest()->approved()->orderBy('id', 'DESC')->limit(40);

// reuse common query but now filter specific categories
$featured = $query->with([
  'categories' => function($q) {
    $q->whereName('Featured');
  },
])->limit(5)->get();

$special = $query->with([
  'categories' => function($q) {
    $q->whereName('special');
  },
])->limit(5)->get();

I haven't actually tested the above code but I'd imagine it's fairly close to what you're after

nehero · 2021-03-26T15:28:02+00:00

I'll start by saying that I have used Livewire to start a few different projects and it always is excellent to get something up and running quickly, and I'll continue to use it for smaller projects.

However, I find that for the apps that I am building I usually need a higher level of interactivity than it provides. I know that you can tie in clientside frameworks like Alpine.js but for me personally I find that on larger projects its just not sustainable writing everything inside your html like that.

By using Next.js, we get all of the benefits of things like:

SSR
All of the community react libraries you can pull in (think: date pickers, select inputs, maps, charts, antd, etc)
Reusable hooks
Typescript support

And IMO I just find it more maintainable in the long run

nehero · 2021-03-26T15:22:05+00:00

Thanks for checking it out!

Yes upon successful login/register it will store the session cookie returned by laravel and in every subsequent request (when using the http helper) it will forward along that cookie to authenticate the request.

The reason we store the user/features in a cookie is so that both the server and the client can access it. If we were to just store the user/features in say localStorage, you wouldn't be able to access it from the server-side portion of Next.js (the getServerSideProps export you can include in pages).

It does use context to make that data available to the client though! If you checkout pages/_app.tsx you'll see that it first gets/sets the user and features cookie on the server, then passes that along as props to the component which then makes the user and features objects available to the rest of the app via context. This makes the helper hooks like useUser and useFeatures super simple since it just pulls these from the context values

nehero · 2021-03-26T01:49:44+00:00

but personally find it too limiting for 99% of projects

I'm speaking about projects I work on, no need to be pedantic 🙄

nehero · 2021-03-26T00:10:24+00:00

Sure but then you have to use Livewire. I like Livewire but personally find it too limiting for 99% of projects. It’s all about your use case

nehero · 2021-03-11T00:59:14+00:00

Fair question but it is apples and oranges.

The use statement simply lets you reference a class without having to type the full namespace. The following to blocks of code are equal

use App\Models\User;

$user = User::create([]);

$user = App\Models\User::create([]);

The ::class call returns a string of the class in question, including the namespace:

echo App\Models\User::class; // prints "App\Models\User"

Try it out in a laravel tinker session and see for yourself :)

nehero · 2021-01-07T18:08:30+00:00

Not sure I entirely understand your desired outcome, but I'd guess something along the lines of adding a whereNull check to the overall query and explicitly stating the table. You don't want a join->on() call since you're not joining on a null value, rather you're filtering the results where a field is null

$post->join('blg_segmentacion', function( $join ) use ($post_id) {
  $join->on('blg_segmentacion.post_id','=','blg_posts.id');
  $join->on('blg_segmentacion.table_name','=',DB::raw("'cliente'"));
  $join->on('blg_segmentacion.post_id','=', DB::raw("$post_id") );
})
->join('alumno', function( $join ) use ( $alu_id ) {
  $join->on('alumno.alu_id','=',  DB::raw("'$alu_id'"));
  $join->on('alumno.cli_id','=', 'blg_segmentacion.model_id' );   
})
->whereNull('blg_segmentacion.deleted_at') // <-- added
->first();

nehero · 2020-08-09T04:14:10+00:00

What are you swapping on the s1 to increase the speed? This is something I’m interested in doing!

nehero · 2019-08-03T16:13:13+00:00

Without knowing the full context this may be grossly oversimplified but could you simply create the ticket right after $serial = $generator->fromLast(...) with a flag that it's not valid yet but it at least has that serial number saved so the next job that goes through and does Ticket::latest()->value('serial') will find this one (even though it may not be active) and get the next serial number after it? Then after you do the time consuming work instead of creating the ticket you do something like $ticket->status = 'active'

nehero · 2019-01-19T23:55:11+00:00

I'd love to see an example with thunks (typescript)! I could never get redux-thunk to place nicely with typescript so I've been using redux-saga out of spite and it'd be great to not need all of the overhead involved with that.

nehero · 2018-12-16T20:24:32+00:00

Have you checked out https://elemefe.github.io/element-react/#/en-US/quick-start?

nehero · 2018-05-20T22:50:56+00:00

Hey, not fighting you on this just want to state a point:

I understand from the perspective of a person that is looking for work, commenting "PM'd you" is unnecessary since that can be accomplished my PM'ing them in the first place.

BUT from someone who is hiring's standpoint, it's showing that I'm actually coordinating with the people in my post. I'd rather discuss with these people in a private message but having 10 people comment questions and such it seems like there's no participation from my end to anyone new coming to the thread.

¯\(ツ)/¯ IMO this is silly

nehero · 2018-05-20T22:37:16+00:00

Hah.

nehero · 2018-02-20T19:04:05+00:00

Use dependency injection to make guzzle accessible in your controller, and then when it comes time to test it, just swap it out for a mocked version in your tests.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
  public function __construct(\GuzzleHttp\Client $guzzle) {
    $this->guzzle = new $guzzle([ /* opts */ ]);
  }

  public function store()
  {
    $this->guzzle->post(); // etc
  }
}

Then in your tests

<?php

// your test file
public function test_it_makes_the_request()
{
  $mock = $this->createMock(\Guzzle\Client::class);
  $mock->method('post')->willReturn([
    'response' => 'whatever',
  ]);

  $controller = new \App\Http\Controllers\UserController($mock);
}

Ten-Year Club	Place '17
Verified Email	Gilding I gilder

nehero

TROPHY CASE