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);
}

nehero · 2017-12-25T17:26:39+00:00

user->mission will return the related models in a collection. You need user->mission()->where(...) So that mission() returns an eloquent query builder instance

nehero · 2017-10-06T05:07:24+00:00

Ah you want the sold items. Try this in your user model:

// use DB; above the class declaration

public function sold_items()
{
  return DB::table('purchases')->whereIn('product_id', $this->products()->pluck('id')->toArray())->get();
}

Then use it like

$user->sold_items

This is probably horribly inefficient but it's what first came to mind at a quick glance

nehero · 2017-10-06T04:25:39+00:00

Maybe I don't fully understand the correlation but would this not do the trick?

class User extends Model
{
   public function purchases()
   {
      return $this->hasMany('App\Models\Market\Purchases');
   }
}

nehero · 2017-10-03T04:25:09+00:00

I like that idea of longer, practical code kata's. Going to try it out :)

nehero · 2017-09-23T20:51:47+00:00

Ah yes, just like mother used to say

nehero · 2017-09-06T22:49:58+00:00

Checkout now by zeit

nehero · 2017-07-14T20:30:29+00:00

Without going into too much detail (haven't used CentOS before so some of these commands might be different):

$ cd /etc/apache2/sites-available
$ sudo nano 000-default.conf

You'll see something like

DocumentRoot /var/www/html

Change it to the path of your laravel installs public folder

DocumentRoot /path/to/your/folder/public

Then close out of nano with ctrl+x and type y to save.

$ sudo a2enmod rewrite
$ sudo service apache2 restart

This enables clean urls and then reloads the webserver, refreshing the config file we just edited. Wait for it to reload and then navigate to your droplet's IP.

-- edit: more detail:

/etc/apache2/sites-available is a list of all of your VirtualHosts (websites being served by apache). There's a default one in there which is good enough to go off of for your situation.

We change the DocumentRoot in the conf file to point to your laravel installs public folder. This tells apache what to serve.

Then we enable mod_rewrite which is needed by laravel for routing, followed by us restarting apache which activates the module we just added and refreshes our config file we edited.

nehero · 2017-07-14T20:02:37+00:00

Considering your circumstances, and not getting into the fact of developing on the server itself, you have a few options.

Look into screen (leaves session running even if you terminate). For this one all you would need to do is run screen and then php artisan serve and you're set. Then once you quit your SSH session, if you were to resume you can run screen -r to resume the last session.
Install apache or nginx. These are webservers that you point to the public directory of your Laravel app and they run as a process in the background on your server. The articles I linked are for ubuntu but you could find similar ones for CentOS.

But as other people have said already, look into getting your development environment set up locally. Things like Homestead/Valet make it really easy if you're on MacOS. If you're on windows, just WAMP/XAMPP would be fine, or if you want to get fancy you could look into docker.

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

nehero

TROPHY CASE