企業提携TIL-09.デザインモード実戦応用...!

概念はまだ完全に整理されていないようだ.
理論と実際は雲泥の差だ.
今日は、同じ時間の素晴らしいコードを表示することで、View、Presenter、UserCase、Repositoryの例をまとめます.
今日の例では、登録されたID(Eメール)のみがソーシャル・ネットワーク・サービス(SNS)にログインしてホームページに移動できるようにするロジックです.

Repository

export class UsingFirebaseDB {
  getDataFromDB(
    firebaseDBPath: string,
    eventType: EventType,
    successCallback: (a: DataSnapshot, b?: string | null) => any,
  ) {
    return database().ref(firebaseDBPath).once(eventType).then(successCallback);
  }

  setDataToDB(firebaseDBPath: string, value: any) {
    return database().ref(firebaseDBPath).set(value);
  }

  updateDataInDB(firebaseDBPath: string, value: any) {
    return database().ref(firebaseDBPath).update(value);
  }
}

これはFirebaseデータベースにアクセスするロジックです.

export class SignInRepository extends UsingFirebaseDB {
  async getAccessUserEmailFromDB(): Promise<string[] | null> {
    try {
      const email: string[] = await super.getDataFromDB(
        '/access/email',
        'value',
        snapshot => {
          return [...snapshot.val()];
        },
      );
      return email;
    } catch {
      return null;
    }
  }
}

上記のロジックを使用して、DBから承認されたID(Eメール)リストを取得します.

UseCase

export class SignInUseCase extends SignInRepository {
  async signInGoogleAuth(): Promise<ISignInUser | null> {
    GoogleSignin.configure({
      webClientId: CLIENT_ID,
    });

    try {
      const userInfo = await GoogleSignin.signIn();
      const {idToken, user} = userInfo;
      const googleCredential = auth.GoogleAuthProvider.credential(idToken);
      await auth().signInWithCredential(googleCredential);
      return user;
    } catch (e) {
      if (e.code === statusCodes.SIGN_IN_CANCELLED) {
        console.log('유저가 로그인 취소');
      } else if (e.code === statusCodes.IN_PROGRESS) {
        console.log('로그인 진행 중');
      } else if (e.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        console.log('플레이 서비스를 사용할 수 없음');
      } else {
        console.log('그외 에러');
      }
      Alert.alert('다시 로그인 해주세요');
      return null;
    }
  }

  signInValidation(email: string, accessUserEmail: string[] | null): Boolean {
    if (accessUserEmail?.includes(email)) {
      return true;
    } else {
      return false;
    }
  }
}

これには、ソーシャル・ログインのためのロジックと、Repositoryからインポートされたアイデンティティ(電子メール)リストがソーシャル・ログインの電子メールと一致しているかどうかを確認するためのロジックが含まれます.

Presenter

const signInLogic = new SignInUseCase();
const {signInValidation, signInGoogleAuth} = signInLogic;

const handleSocialSignIn = (
  setSignInUserInfo: React.Dispatch<React.SetStateAction<ISignInUser | null>>,
): void => {
  signInGoogleAuth().then(userInfoWithoutToken => {
    setSignInUserInfo(userInfoWithoutToken);
  });
};

export const SignInPresenter = ({navigation}: any) => {
  const {navigate} = navigation;

  const [accessUserEmail, accessUserLoading] = useAccessUserEmail();
  const [signInUserInfo, setSignInUserInfo] = useState<ISignInUser | null>(
    null,
  );

  useEffect(() => {
    if (!accessUserLoading) {
      if (signInUserInfo?.email) {
        if (signInValidation(signInUserInfo.email, accessUserEmail)) {
          navigate('Main');
        }
      }
    }
  }, [accessUserEmail, signInUserInfo]);

  return (
    <SignIn
      handleSocialSignIn={() => {
        handleSocialSignIn(setSignInUserInfo);
      }}
    />
  );
};

実は一番難しい部分を理解していない...!
ソーシャル・ログインのIDと登録されたIDが一致すると、ホームページにアクセスするロジックが含まれます.
この論理はpropsを介してViewに伝達され,Viewとのコミュニケーションの役割を果たす.

View

export const SignIn = ({handleSocialSignIn}: ISignInProps) => {
  const {googleButton} = style;

  return (
    <VStack flex={1} bg="white" justifyContent="center" alignItems="center">
      <Image
        source={require('../../../../data/images/soomgo_logo_rgb.png')}
        alt="Logo"
        w="70%"
        resizeMode="contain"
        marginBottom={75}
      />
      <GoogleSigninButton
        style={googleButton}
        size={GoogleSigninButton.Size.Wide}
        color={GoogleSigninButton.Color.Light}
        onPress={handleSocialSignIn}
      />
    </VStack>
  );
};

const style = StyleSheet.create({
  googleButton: {
    position: 'absolute',
    bottom: 90,
  },
});

一番わかりやすいビュー!!
実はすでに整理してありますが、まだ完全に理解していません…!
これを整理して適用し、他の論理を何回か書いてこそ理解できる.
企業提携の日付から見ると、数日もしないうちに、すぐに実施できるのでしょうか?これは時間で、焦っていましたが・・・
「今の成果」と「完璧に私のものになって、それを理解して」の二つを失わずに、それを得るために、残りの時間の中でもっと努力します.🥲