📃 - screen just for lists

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "StreamAble",
     "slug": "StreamAble",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "scheme": "streamable",
     "plugins": [
       [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "streamable-app",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "scripts": {
     "start": "expo start",

src/components/Card/index.js

@@ -17,7 +17,7 @@ const Card = (props) => {
   const title_romaji = title?.romaji;
 
   const handlePress = (event) => {
-    navigation.navigate("Info", { id: props.id });
+    navigation.navigate("Info", { id: props?.media?.id || props?.id });
   };
 
   return (

src/components/NavigationBar/NavBar.styles.js

@@ -14,7 +14,7 @@ export const NavBarContainer = styled.View`
 
 export const NavBarWrapper = styled.View`
   background: ${({ theme }) => theme.base.offDarkBg};
-  width: 180px;
+  width: 230px;
   height: 100%;
   border-radius: 20px;
   overflow: hidden;

src/components/NavigationBar/index.js

@@ -18,16 +18,22 @@ const NavBar = ({ currentRoute }) => {
   return (
     <NavBarContainer>
       <NavBarWrapper>
+        <NavBarIconItem onPress={() => handleStackChange("Home")}>
+          <NavBarIcon
+            name="home"
+            isFocused={currentRoute === "Home" ? true : false}
+          />
+        </NavBarIconItem>
         <NavBarIconItem onPress={() => handleStackChange("Search")}>
           <NavBarIcon
             name="search"
             isFocused={currentRoute === "Search" ? true : false}
           />
         </NavBarIconItem>
-        <NavBarIconItem onPress={() => handleStackChange("Home")}>
+        <NavBarIconItem onPress={() => handleStackChange("Lists")}>
           <NavBarIcon
-            name="home"
-            isFocused={currentRoute === "Home" ? true : false}
+            name="list-ul"
+            isFocused={currentRoute === "Lists" ? true : false}
           />
         </NavBarIconItem>
         <NavBarIconItem onPress={() => handleStackChange("Settings")}>

src/containers/Completed/index.js

@@ -0,0 +1,71 @@
+import { ScrollView } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Card } from "../../components";
+import { Container, Title } from "../Container.styles";
+import { useAccessToken } from "../../contexts";
+import {
+  useGetAnimeListQuery,
+  useGetViewerQuery,
+} from "../../utils/graphql/generated";
+import { MediaListStatusWithLabel } from "../../utils/constants";
+import { sortBy } from "lodash";
+import { utils } from "../../utils";
+import { useFocusEffect } from "@react-navigation/native";
+
+const Completed = () => {
+  const [status, setStatus] = useState(MediaListStatusWithLabel[4].value);
+
+  const { accessToken, setAccessToken } = useAccessToken();
+
+  const { loading: loadingViewer, data: viewerData } = useGetViewerQuery({
+    skip: !accessToken,
+  });
+
+  const {
+    loading: loadingAnimeList,
+    data: animeListData,
+    refetch,
+  } = useGetAnimeListQuery({
+    skip: !viewerData?.Viewer?.id || !accessToken,
+    variables: {
+      userId: viewerData?.Viewer?.id,
+      status,
+    },
+    // TODO: figure out how to maintain the list position while also updating the cache
+    fetchPolicy: "no-cache",
+    notifyOnNetworkStatusChange: false,
+  });
+
+  const list = useMemo(
+    () =>
+      sortBy(
+        (
+          (animeListData?.MediaListCollection?.lists &&
+            animeListData?.MediaListCollection?.lists[0]?.entries) ??
+          []
+        ).filter(utils.notEmpty),
+        (m) => m.media?.title?.english
+      ),
+    [animeListData]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!loadingAnimeList) refetch();
+    }, [])
+  );
+
+  if (!list.length) return null;
+  return (
+    <Container>
+      <Title>Completed</Title>
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+        {list.map((item, i) => (
+          <Card key={`completed-${item.id}`} {...item} index={i} />
+        ))}
+      </ScrollView>
+    </Container>
+  );
+};
+
+export default Completed;

src/containers/ContinueWatching/index.js

@@ -89,6 +89,12 @@ const ContinueWatching = () => {
     }, [])
   );
 
+  useFocusEffect(
+    useCallback(() => {
+      if (!loadingAnimeList) refetch();
+    }, [])
+  );
+
   if (
     !uniqueList ||
     uniqueList.length === 0 ||
@@ -102,7 +108,7 @@ const ContinueWatching = () => {
         {uniqueList?.map((item, i) => {
           return (
             <WatchingCard
-              key={i}
+              key={`cw-${i}-${item.id}`}
               {...item}
               watchedAmount={item?.watchedAmount ? item.watchedAmount : 0}
             />

src/containers/Dropped/index.js

@@ -0,0 +1,71 @@
+import { ScrollView } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Card } from "../../components";
+import { Container, Title } from "../Container.styles";
+import { useAccessToken } from "../../contexts";
+import {
+  useGetAnimeListQuery,
+  useGetViewerQuery,
+} from "../../utils/graphql/generated";
+import { MediaListStatusWithLabel } from "../../utils/constants";
+import { sortBy } from "lodash";
+import { utils } from "../../utils";
+import { useFocusEffect } from "@react-navigation/native";
+
+const Dropped = () => {
+  const [status, setStatus] = useState(MediaListStatusWithLabel[3].value);
+
+  const { accessToken, setAccessToken } = useAccessToken();
+
+  const { loading: loadingViewer, data: viewerData } = useGetViewerQuery({
+    skip: !accessToken,
+  });
+
+  const {
+    loading: loadingAnimeList,
+    data: animeListData,
+    refetch,
+  } = useGetAnimeListQuery({
+    skip: !viewerData?.Viewer?.id || !accessToken,
+    variables: {
+      userId: viewerData?.Viewer?.id,
+      status,
+    },
+    // TODO: figure out how to maintain the list position while also updating the cache
+    fetchPolicy: "no-cache",
+    notifyOnNetworkStatusChange: false,
+  });
+
+  const list = useMemo(
+    () =>
+      sortBy(
+        (
+          (animeListData?.MediaListCollection?.lists &&
+            animeListData?.MediaListCollection?.lists[0]?.entries) ??
+          []
+        ).filter(utils.notEmpty),
+        (m) => m.media?.title?.english
+      ),
+    [animeListData]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!loadingAnimeList) refetch();
+    }, [])
+  );
+
+  if (!list.length) return null;
+  return (
+    <Container>
+      <Title>Dropped</Title>
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+        {list.map((item, i) => (
+          <Card key={`Dropped-${item.id}`} {...item} index={i} />
+        ))}
+      </ScrollView>
+    </Container>
+  );
+};
+
+export default Dropped;

src/containers/OnHold/index.js

@@ -0,0 +1,71 @@
+import { ScrollView } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Card } from "../../components";
+import { Container, Title } from "../Container.styles";
+import { useAccessToken } from "../../contexts";
+import {
+  useGetAnimeListQuery,
+  useGetViewerQuery,
+} from "../../utils/graphql/generated";
+import { MediaListStatusWithLabel } from "../../utils/constants";
+import { sortBy } from "lodash";
+import { utils } from "../../utils";
+import { useFocusEffect } from "@react-navigation/native";
+
+const OnHold = () => {
+  const [status, setStatus] = useState(MediaListStatusWithLabel[1].value);
+
+  const { accessToken, setAccessToken } = useAccessToken();
+
+  const { loading: loadingViewer, data: viewerData } = useGetViewerQuery({
+    skip: !accessToken,
+  });
+
+  const {
+    loading: loadingAnimeList,
+    data: animeListData,
+    refetch,
+  } = useGetAnimeListQuery({
+    skip: !viewerData?.Viewer?.id || !accessToken,
+    variables: {
+      userId: viewerData?.Viewer?.id,
+      status,
+    },
+    // TODO: figure out how to maintain the list position while also updating the cache
+    fetchPolicy: "no-cache",
+    notifyOnNetworkStatusChange: false,
+  });
+
+  const list = useMemo(
+    () =>
+      sortBy(
+        (
+          (animeListData?.MediaListCollection?.lists &&
+            animeListData?.MediaListCollection?.lists[0]?.entries) ??
+          []
+        ).filter(utils.notEmpty),
+        (m) => m.media?.title?.english
+      ),
+    [animeListData]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!loadingAnimeList) refetch();
+    }, [])
+  );
+
+  if (!list.length) return null;
+  return (
+    <Container>
+      <Title>On Hold</Title>
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+        {list.map((item, i) => (
+          <Card key={`onHold-${item.id}`} {...item} index={i} />
+        ))}
+      </ScrollView>
+    </Container>
+  );
+};
+
+export default OnHold;

src/containers/PlanToWatch/index.js

@@ -1,5 +1,5 @@
 import { ScrollView } from "react-native";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Card } from "../../components";
 import { Container, Title } from "../Container.styles";
 import { useAccessToken } from "../../contexts";
@@ -10,6 +10,7 @@ import {
 import { MediaListStatusWithLabel } from "../../utils/constants";
 import { sortBy } from "lodash";
 import { utils } from "../../utils";
+import { useFocusEffect } from "@react-navigation/native";
 
 const PlanToWatch = () => {
   const [status, setStatus] = useState(MediaListStatusWithLabel[2].value);
@@ -48,6 +49,12 @@ const PlanToWatch = () => {
     [animeListData]
   );
 
+  useFocusEffect(
+    useCallback(() => {
+      if (!loadingAnimeList) refetch();
+    }, [])
+  );
+
   if (!list.length) return null;
   return (
     <Container>

src/containers/lists/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Completed from "../Completed";
+import ContinueWatching from "../ContinueWatching";
+import Dropped from "../Dropped";
+import OnHold from "../OnHold";
+import PlanToWatch from "../PlanToWatch";
+import { Title, Container, Wrapper, ScrollView } from "./styles";
+
+const ListsContainer = () => {
+  return (
+    <Container>
+      <ScrollView vertical={true} showsVerticalScrollIndicator={false}>
+        <Wrapper>
+          <Title>library</Title>
+        </Wrapper>
+        <ContinueWatching />
+        <PlanToWatch />
+        <OnHold />
+        <Completed />
+        <Dropped />
+      </ScrollView>
+    </Container>
+  );
+};
+
+export default ListsContainer;

src/containers/lists/styles.js

@@ -0,0 +1,24 @@
+import styled from "styled-components/native";
+
+export const ScrollView = styled.ScrollView`
+  margin-bottom: 60px;
+`;
+
+export const Container = styled.View``;
+
+export const Wrapper = styled.View`
+  padding: 10px 25px;
+`;
+
+export const Wrap = styled.TouchableOpacity``;
+
+export const Title = styled.Text`
+  font-size: 25px;
+  font-family: ${({ theme }) => theme.text.font.secondary};
+  color: ${({ theme }) => theme.text.primary};
+  padding: 15px 0;
+  margin: 15px 0;
+  border-bottom-width: 1px;
+  border-bottom-color: ${({ theme }) => theme.text.primary};
+  text-transform: uppercase;
+`;

src/containers/settings/Profile/Profile.styles.js

@@ -9,9 +9,9 @@ export const Container = styled.TouchableOpacity`
 
 export const NotLoggedIn = styled.Text`
   font-size: 23px;
-  font-family: ${({ theme }) => theme.text.font.primary};
+  font-family: ${({ theme }) => theme.text.font.secondary};
   color: ${({ theme }) => theme.text.primary};
-  margin-bottom: 15px;
+  text-transform: uppercase;
 `;
 
 export const ProfileImage = styled.Image`