commit to API & spotify Service starting

Api/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "api",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/express": "^4.17.16",
+    "nodemon": "^2.0.20",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4"
+  }
+}

FLAD/App.tsx

@@ -3,16 +3,62 @@ import { useState, useTransition } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import Card from './components/Card';
 
-// import { cards as cardArray } from './FakeData/data'
+import { cards as cardArray } from './FakeData/data'
 
  
 export default function App() {
+//  const [currentCard, setCurrentCard] = useState(cardArray);
+//  const aIndex = useTransition(currentCard)
+// ;
+const [cards, setCards] = useState(cardArray);
+const aIndex = useTransition();
+const onSwipe = (index: number, direction: 'left' | 'right') => {
+  if (direction === 'right') {
+    // Swiped right
+    console.log('Swiped right');
+
+  } else if (direction === 'left') {
+    console.log('Swiped left');
+  }
+  // update the state of the card or the app
+  setCards(cards.filter((_, i) => i !== index));
+};
+
+// const [currentCard, setCurrentCard] = useState(0);
 
   return (
-    <View>
 
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',  position : 'absolute', backgroundColor : '' }}>
+      {cards.map((card, index) => (
+        <View key={card.name}>
+          <Card
+            title={card.name}
+            image={card.sourceUrl}
+            onSwipe={(direction) => onSwipe(index, direction)}
+          />
+        </View>
+      ))}
     </View>
 
+
+
+    // <View style={styles.container}>
+    //   <Text>Open up App.tsx to start working on your app!</Text>
+    //   {/* <View>
+    //     <Animated.View>
+          
+    //     </Animated.View>
+    //     {cardArray.map( ({index}) => currentCard < index && step + step  && (
+    //       <Card card={card} ></Card>
+
+    //     )  )}
+        
+    //   </View> */}
+    //   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    //   <Card title="Swipe me left or right" />
+    // </View>
+    //   <StatusBar style="auto" />
+    // </View>
   );
 }
 

FLAD/components/Card.tsx

@@ -1,5 +1,6 @@
-import { View, Text, Image, Animated ,PanResponder, Dimensions } from 'react-native'
+import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet } from 'react-native'
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
+import { eventMethod } from '@ionic/core/dist/types/utils/overlays';
 
 
 const {width : wWidht} = Dimensions.get("window");
@@ -7,14 +8,21 @@ const width = wWidht *0.75;
 const height = wWidht * (465/264);
 const borderRadius = 24;
 
-
-
 interface CardProps {
     title: string;
     image: any;
     onSwipe: (direction: "left" | "right") => void;
   }
 
+//   const [loading, setLoading] = useState(true);
+//   const [cards, setCards] = useState(cardArray);
+
+// useEffect(()=>{
+//   setLoading(true);
+//   eventMethod().then(
+//     setLoading(false);
+//   )
+// })
   
   const Card: React.FC<CardProps> = ({ title, image, onSwipe }) => {
     const pan = useRef(new Animated.ValueXY()).current;
@@ -52,15 +60,21 @@ interface CardProps {
     return (
       <View>
         <Animated.View
-          style={{ transform: [{ translateX: pan.x }] }}
+          style={{ transform: [{ translateX: pan.x  }], backgroundColor : 'red'}}
           {...panResponder.panHandlers} 
         >
-          <Image source={image} style={{ width: 200, height: 200 }} />
+          <Image source={{uri : image}} style={{ width: 200, height: 200 }} />
         </Animated.View>
       </View>
     );
   };
   
+
+const nournous = StyleSheet.create({
+
+})
+
+
   export default Card;
 
 

FLAD/pages/spot.tsx

@@ -0,0 +1,73 @@
+import { View, Text, Image, Animated ,PanResponder, Dimensions } from 'react-native'
+import React, { useRef, useState, useTransition } from 'react'
+
+import Card from '../components/Card';
+
+import { cards as cardArray } from '../FakeData/data'
+
+const {width : wWidht} = Dimensions.get("window");
+const width = wWidht *0.75;
+const height = wWidht * (465/264);
+const borderRadius = 24;
+
+interface SpotProps {
+    title: string;
+    image: any;
+    onSwipe: (direction: "left" | "right") => void;
+  }
+
+  
+    const Spot: React.FC<SpotProps> = ({ title, image, onSwipe }) => {
+    const [cards, setCards] = useState(cardArray);
+    const aIndex = useTransition();
+    const onSwipe = (index: number, direction: 'left' | 'right') => {
+    if (direction === 'right') {
+        // Swiped right
+        console.log('Swiped right');
+
+    } else if (direction === 'left') {
+        console.log('Swiped left');
+    }
+    // update the state of the card or the app
+    setCards(cards.filter((_, i) => i !== index));
+    };
+
+// const [currentCard, setCurrentCard] = useState(0);
+
+  return (
+
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',  position : 'absolute', backgroundColor : '' }}>
+      {cards.map((card, index) => (
+        <View key={card.name}>
+          <Card
+            title={card.name}
+            image={card.sourceUrl}
+            onSwipe={(direction) => onSwipe(index, direction)}
+          />
+        </View>
+      ))}
+    </View>
+
+
+
+    // <View style={styles.container}>
+    //   <Text>Open up App.tsx to start working on your app!</Text>
+    //   {/* <View>
+    //     <Animated.View>
+          
+    //     </Animated.View>
+    //     {cardArray.map( ({index}) => currentCard < index && step + step  && (
+    //       <Card card={card} ></Card>
+
+    //     )  )}
+        
+    //   </View> */}
+    //   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    //   <Card title="Swipe me left or right" />
+    // </View>
+    //   <StatusBar style="auto" />
+    // </View>
+  );
+  };
+  
+  export default Spot;

FLAD/services/spotify/spotify.service.ts

@@ -0,0 +1,23 @@
+
+export class SpotifyService {
+
+private identification : ApiSpotifyIdentification;
+public request : SpotifyRequest;
+
+  constructor() {
+
+  }
+
+  	get identification{
+		
+	}
+
+	async uploadName() {
+		
+	}
+	async apiAuth(url : string) {
+		await this.identification.setCode(url);
+    	this.request = ApiSpotifyRequests(await this.identification.createToken());
+	}
+
+}