explorepage.vue

<template>
  <ion-page>
   
    
   
    <ion-content :fullscreen="true" color="secondary">
      <ion-card></ion-card>
      <ion-card></ion-card>
      <ion-title>Explorer Page</ion-title>
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Explorer Page</ion-title>
        </ion-toolbar>
      </ion-header>
<ion-searchbar color="success"></ion-searchbar>

<ion-grid  >
  <ion-row>
    <ion-col size="5.5" v-for="(image, index) in image" :key="index"  >
<ion-card color="success" >
 <ion-img :src="image" />
<ion-card-content v-for="description, index in description" :key="index" >{{description}}</ion-card-content>
</ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
	

    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { heartOutline } from 'ionicons/icons';
import ExploreContainer from '@/components/ExploreContainer.vue';
import {auth, db, storage} from '../main'
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default  {
  name: 'Tab3',
  components: {  IonToolbar, IonTitle, IonContent, IonPage  },
  setup() {
    const state = reactive({
      image: [] as string[],
      description: [] as string[]
    });

    const fetchPhotos = async () => {

      const user = auth.currentUser;

      const snap = await db
        .collection("post")
        .get();

      if (!snap.empty) {
        snap.docs.forEach((doc) => {
          const data = doc.data();
          if (data.image) {
            state.image.push(data.image);
            (data.description)
            state.description.push(data.description)
          }
        });
      }

    
    };

    fetchPhotos();
    
    return {
      ...toRefs(state)
    }
  },
}





  

</script>

<style >
  
.images {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	max-width: 100%;
	width: 606px;
}

.image {
	margin-left: 1px;
	margin-right: 1px;
}

.main-image, .user-image {
	width: 200px;
	height: 200px;
}
.card1{
  width: 50%;
}
</style>

post.vue

<template>
  <ion-page color="secondary" @submit.prevent="submitForm">
    <ion-toolbar color="secondary">
            <ion-buttons >
        <ion-back-button default-href="home"></ion-back-button>
      </ion-buttons>


        

        <ion-title>Picture Post</ion-title>
       </ion-toolbar>
     
     
     <ion-content :fullscreen="true" color="secondary">
       
    
        <ion-card color="success">
          <ion-img :src="takenImageUrl" />
          <div class="center">
          <ion-card-subtitle>{{username}}</ion-card-subtitle>
          </div>
          <ion-textarea auto-grow placeholder="Description" v-model="description"></ion-textarea>
        </ion-card>

        
        
        <div class="center">
        <ion-button size="small" type="button" fill="outline" @click="takePhoto">Upload/Take Picture
        </ion-button>
        </div>
        <div class="center">
        <ion-button fill="outline" size="small" @click="description">Post</ion-button>
        </div>
    
     </ion-content>  
  </ion-page>
</template>


<script lang="ts">
import {
  IonPage,
  IonToolbar,
  IonContent,
  IonButton,
  IonTextarea,
} from "@ionic/vue";


import { storage, auth, db } from "../main";
import { Plugins, CameraResultType, CameraSource} from "@capacitor/core";
import 'firebase/auth';
import  'firebase/firestore';
import 'firebase/storage';
import { defineComponent } from 'node_modules/vue/dist/vue';
const { Camera } = Plugins;

function uuidv4() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    const r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}


export default {
  emits:["save-memory"],
  name: "Tab1",
  components: {
   IonToolbar,
    IonContent,
    IonPage,
    IonButton,
    IonTextarea,
  }, 
 
methods:{
 
   async description(): Promise<void> {  
        const description = this.description
        },
    async takePhoto(): Promise<void> {
      const image = await Camera.getPhoto({
        resultType: CameraResultType.Base64,
        source: CameraSource.Camera,
        quality: 60
      })
      
      if (image?.base64String) {
     
        const user = auth.currentUser;

        const id = uuidv4();

        const filePath = `post/${id}.${image.format}`
         
        const storageRef = storage.ref();

        await storageRef
          .child(filePath)
          .putString(image.base64String, "base64");
  
        const url = await storageRef.child(filePath).getDownloadURL();
          const postData = {
            uid: user?.uid,
            id: id,
            image: url,
             description: this.description,
             likes: [],
            

          }
        await db
          .collection("post")
          .doc(id)
          .set(postData)
      
        

  
 

        
          
      
      }

         
    }
}    
    

}

  
  



  
 

       


</script>

<style>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>
(write description first still working on the "post" button)