Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Twitter clone uygulaması yapıyorum ve kafam karıştı componente veri yollamada.
şimdi benim index.vue diye ana sayfa template var

<template>
    <div class="relative flex flex-col items-center justify-start 2xl:w-7/12 xl:w-7/12 lg:w-7/12 sm:w-7/12 min-h-screen 2xl:ml-[280px] xl:ml-[280px] lg:ml-[80px] sm:ml-[80px]">
        <TwitNav/>
        <WhatsHappening/>
        <TwitPost :tweets="$page.props.tweets" />
    </div>
    <aside class="2xl:w-5/12 xl:w-5/12 lg:w-5/12 sm:w-5/12 min-h-screen border-l-[0.5px] border-useGray relative flex flex-col justify-start gap-2 items-center px-5">
        <TwitSearch />
        <TrendsForYou />
        <WhoToFollow />
    </aside>
</template>
Route::get('/', [TweetsController::class, 'index']);
public function index(Request $request) {
        $tweets = Tweet::with('user')->inRandomOrder()->paginate();

        if($request->wantsJson()){
            return $tweets;
        };

        return Inertia::render('index', [
            'tweets' => $tweets
        ]);
    }

TwitPost

const props = defineProps({
        tweets: Object,
    })

TwitPost alıyorum fakat bu anasayfada tüm verileri göstermek kullanıcıya tıklayıp attığı tvitleri görmek istediğinizde users.vue yolluyorum

Route::get('/{user:username}', [TweetsController::class, 'users']);
 public function users(User $user) {
        return Inertia::render('users', [
            'user' => $user,
            'tweets' => $user->tweets()->with('user')->latest()->paginate()
        ]);
    }

fakat users.vue da da

<TwitPost />

var bende nasıl yapsam bilemedim index de olan ve anasayfaya verileri veren controlleri şu şekilde mi

public function index(Request $request) {
        $tweets = Tweet::with('user')->inRandomOrder()->paginate();

        if($request->wantsJson()){
            return $tweets;
        };

        return Inertia::render('index', [
            'user' => $user,
            'tweets' => $tweets
        ]);
    }

yapsam

ve her TwitPost a

    <TwitPost :user="$page.props.user" :tweets="$page.props.tweets" />

bu şekilde mi alsam bilemedim.

    mgsmus hocam baktım fakat benim örneğime uygun değil ki o örnek. Orada verilen örnek basit şekilde verilmiş örnek

      aghabalaguluzade Örnekte $page.props.tweets kullanmıyor çünkü props kullandığınız için template içinde tweets isimli bir değişken otomatik oluşuyor. Yani $page.props.tweets yerine tweets yazmanız yeterli.

      Diğer konuda ise nerede takıldığınızı anlamadım. Route::get('/{user:username}', [TweetsController::class, 'users']); ile zaten yapmışsınız istediğinizi.

        mgsmus takılma demeyelimde benim TwitPost componentim hem index (anasayfa) hemde users var ve ben indexe

        Route::get('/', [TweetsController::class, 'index']);
        public function index(Request $request) {
                $tweets = Tweet::with('user')->inRandomOrder()->paginate();
        
                if($request->wantsJson()){
                    return $tweets;
                };
        
                return Inertia::render('index', [
                    'tweets' => $tweets
                ]);
            }

        <TwitPost :tweets="$page.props.tweets" />

        bu şekilde yolluyorum

        fakat userse

        Route::get('/{user:username}', [TweetsController::class, 'users']);
         public function users(User $user) {
                return Inertia::render('users', [
                    'user' => $user,
                    'tweets' => $user->tweets()->with('user')->latest()->paginate()
                ]);
            }

        böyle yolluyorum ve sorum yapıyı değiştirmem mi gerek çünkü indexde yalnıca tweetsleri yolluyorum.

        <TwitPost :tweets="$page.props.tweets" />

        Fakat usersteki TwitPosta 2 tane prop yollamam gerek.

        <TwitPost :tweets="$page.props.tweets" :user="user" />

        Fakat 1 tane componentim var ve o komponentde de zaten ben indexdeki verileri yolluyorum. Users.vue dan 2 sini yollarsam karışmaz mı ?

          mgsmus nasıl olacak o hocam birinde

                  $tweets = Tweet::with('user')->inRandomOrder()->paginate();

          birinde

                      'tweets' => $user->tweets()->with('user')->latest()->paginate()

          Bu arada template şöyle

          <template>
              <div v-for="tweet in tweets.data" :key="tweet.id" class="flex w-full h-auto cursor-pointer hover:bg-lowWhite ">
                  <div class="p-3">
                      <img :src="tweet.user.profile_photo_path" class="w-[45px] rounded-full" :alt="tweet.user.name" />
                  </div>
                  <div class="w-full">
                      <div class="text-sm px-2 flex  items-center justify-start gap-2 text-normalWhite mt-2">
                          <h3 class="font-bold hover:underline"><a :href="userPageUrl(tweet.user.username)">{{ tweet.user.name }}</a></h3>
                          <span class="text-lowsWhite font-light flex-grow"><a :href="userPageUrl(tweet.user.username)">@{{ tweet.user.username }}</a> · {{ formatDateString(tweet.created_at) }}</span>
                          <span>
                          <svg viewBox="0 0 24 24"
                               class="w-[30px] cursor-pointer rounded-full p-2 fill-lowsWhite  hover:fill-tickBlue  hover:bg-hoverBlue z-100 transition duration-200"
                               aria-hidden="true">
                              <g>
                                  <path d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"></path>
                              </g>
                          </svg>
                      </span>
                      </div>
                      <div class="text-sm text-normalWhite">
                          {{ tweet.content }}
                      </div>
                      <div class="pr-3 mt-2">
                          <img src="/images/laravel.png" class="object-cover border-[1px] border-lowsWhite rounded-lg"
                               alt="post image">
                      </div>
                      <ul class="flex items-center w-full justify-start gap-10 py-3">
                          <li class="flex items-center gap-1 text-sm text-lowsWhite transition duration-200 group fill-lowsWhite hover:fill-tickBlue hover:text-tickBlue cursor-pointer">
                              <span class="p-2 rounded-full group-hover:bg-hoverBlue transition duration-200">
                                  <svg viewBox="0 0 24 24" class=" w-[20px]" aria-hidden="true">
                                  <g>
                                      <path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path>
                                  </g>
                                  </svg>
                              </span>
                              0
                          </li>
                          <li class="flex items-center gap-1 group text-sm text-lowsWhite transition duration-200 fill-lowsWhite hover:fill-useGreen hover:text-useGreen cursor-pointer">
                              <span class="p-2 rounded-full group-hover:bg-hoverGreen transition duration-200">
                                  <svg viewBox="0 0 24 24" class=" w-[20px]" aria-hidden="true">
                                      <g>
                                          <path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path>
                                      </g>
                                  </svg>
                              </span>
                              17
                          </li>
                          <li class="flex items-center gap-1 group text-sm text-lowsWhite transition duration-200 fill-lowsWhite hover:fill-myPink hover:text-myPink cursor-pointer">
                              <span class="p-2 rounded-full group-hover:bg-hoverPink transition duration-200">
                                  <svg viewBox="0 0 24 24" class=" w-[20px]" aria-hidden="true">
                                      <g>
                                          <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path>
                                      </g>
                                  </svg>
                              </span>
                              666
                          </li>
                          <li class="flex items-center group gap-1 text-sm text-lowsWhite transition duration-200 fill-lowsWhite hover:fill-tickBlue hover:text-tickBlue cursor-pointer">
                              <span class="p-2 rounded-full group-hover:bg-hoverBlue transition duration-200">
                                   <svg viewBox="0 0 24 24" class=" w-[20px]" aria-hidden="true">
                                      <g>
                                          <path d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"></path>
                                      </g>
                                  </svg>
                              </span>
                              18.0k
                          </li>
                          <li class="flex items-center group gap-1 text-sm text-lowsWhite transition duration-200 fill-lowsWhite hover:fill-tickBlue hover:text-tickBlue cursor-pointer">
                              <span class="p-2 rounded-full group-hover:bg-hoverBlue transition duration-200">
                                  <svg viewBox="0 0 24 24" class=" w-[20px]" aria-hidden="true">
                                      <g>
                                          <path d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"></path>
                                      </g>
                                  </svg>
                              </span>
                          </li>
                      </ul>
                  </div>
              </div>
              <div v-if="tweets.next_page_url" ref="scrollIndicator" class="text-center text-gray-400 my-4">
                  Yüklənir...
              </div>
          </template>

          Acaba <TwitPost /> aynı olsa bile ayrı ayrı kodlar şeklinde mi yazsam

            mgsmus değil bence en iyisi kodu componentden çıkarıp kullanmak. Yukarıda template verdim ama görmediniz galiba ben düzenlediğimde siz cevap vermiştiniz. Teşekkür ederim hocam.

              aghabalaguluzade Birinde rastgele tweetleri alıyorsunuz, diğerinde ise bir kullanıcıya ait olan son tweetleri alıyorsunuz. Hepsinde dönen veri aynı, hepsinde id, content vs var. Bu dönen veri değişmiyorsa aynı component'i kullanmanızda bir sakınca yok ama derseniz ki ben dönen veri aynı olsa da bu ayrıma göre component içinde bir sürü işlem yapıyorum, her yer ağzına kadar v-if'lerle doldu kodum çok karıştı, o zaman ayırmanız için bir sebebiniz olmuş olur. Bu çok önemli bir şey değil, isterseniz aynı component'i kopyalayıp farklı isimde kaydedip iki farkı endpoint için de kullanabilirsiniz, sadece bir değişiklik olduğunda ikisine de bakmanız gerekecek.

                mgsmus evet öyle hocam fakat benim kafamda oturtamadığım şey şu

                public function index(Request $request) {
                        $tweets = Tweet::with('user')->inRandomOrder()->paginate();
                
                        if($request->wantsJson()){
                            return $tweets;
                        };
                
                        return Inertia::render('index', [
                            'tweets' => $tweets
                        ]);
                    }

                ben böyle alıyorum ve

                  <div v-for="tweet in tweets.data" :key="tweet.id"

                templatede şöyle sıralıyorum userste ise

                public function users(User $user) {
                        return Inertia::render('users', [
                            'user' => $user,
                            'tweets' => $user->tweets()->with('user')->latest()->paginate()
                        ]);
                    }

                yapı böyle ben bunu nasıl yakalayabilirim ki template de orada artık diger veriler sıralı. Ve o sıralı olanlar tweetlere göre userleri yakalıyor. Digerinde ise userlerin profile bilgilerini ve tweetlerini ve tek useri. Yani bence veri yapısı farklı.

                  aghabalaguluzade İkisinde de göstermek için aşağıdakini yapmıyor musunuz?:

                  <div v-for="tweet in tweets.data" :key="tweet.id">
                  
                  </div>

                  Bunu yapıyorsanız, içeride de özel bir işlem yapmıyorsanız değişen bir şey yok ki. Veri yapısı değişmiyor sonuçta.

                    mgsmus hm evet öyleymiş utanarak özür diliyorum ilkinde hata veriyordu garip. Sizide yordum hocam affedersiniz 🙁